I have an image banner with some text and buttons on top of it and two widgets right next to it in a flex (watch image for reference). I want them to be responsive when the screen changes sizes.

<div className="tabs">
          <div className="tabs-container">
            <img src={MainBG} alt="background" className="banner-img" />
            <div className="top-text">
              <div>
                <h1>
                  Track Crypto Activity <br /> For Smarter Trading
                </h1>
                <button className="join-button"> Join Now</button>
                <button className="academy-button"> Crypto Academy</button>
              </div>
            </div>
          </div>
          <div className="widgets">
            <TechnicalAnalysis
              colorTheme="dark"
              width="280"
              height="305"
              symbol="BITSTAMP:BTCUSD"
            />
            <TechnicalAnalysis
              colorTheme="dark"
              width="280"
              height="305"
              symbol="BINANCE:ETHUSDT"
            />
          </div>
          

How the Ui is on one screen size

Here is the current CSS:

.tabs {
  display: flex;
  overflow: scroll;
  width: 100%;
}
.banner-img {
  width: 95%;
}
.tabs-container {
  position: relative;
  margin-top: 20px;
  margin-left: 10px;
}

.top-text {
  position: absolute;
  margin-left: 30px;
  display: flex;
  justify-content: space-around;
  color: white;
  top: 50px;
}

.join-button {
  background-color: #bb46e2;
  cursor: pointer;
  color: white;
  padding: 10px;
  width: 90px;
  border-radius: 10px;
  border: none;
}

.academy-button {
  background-color: transparent;
  cursor: pointer;
  padding: 10px;
  border: 1px solid white;
  color: white;
  border-radius: 10px;
  margin-left: 15px;
}

.academy-button:hover {
  background-color: white;
  color: #bb46e2;
}

.widgets {
  display: flex;
  flex-direction: row;
  width: 50%;
  justify-content: space-between;
  margin-top: 20px;
  margin-right: 30px;
}

How do I make these responsive for all screen sizes?