Więcej responsywności w CSS

<div class="container">
  <div class="content">
    <div class="box">
      <div class="box_image">
        <img src="image/image_1.jpg" />
      </div>
      <div class="box_text">
        <p>
          Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quam
          expedita unde ipsam repudiandae obcaecati fuga totam
          provident! Quam doloribus animi quis, corrupti mollitia,
          voluptas, dicta voluptates eius accusamus odit cumque.
        </p>
        <button class="button poppins-regular">onsectetur</button>
        <button class="button poppins-regular">doloribus</button>
      </div>
    </div>
    <div class="box">
      <div class="box_image">
        <img src="image/image_2.jpg" />
      </div>
      <div class="box_text">
        <p>
          Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quam
          expedita unde ipsam repudiandae obcaecati fuga totam
          provident! Quam doloribus animi quis, corrupti mollitia,
          voluptas, dicta voluptates eius accusamus odit cumque.
        </p>
        <button class="button poppins-regular">onsectetur</button>
        <button class="button poppins-regular">doloribus</button>
      </div>
    </div>
  </div>
  <aside class="sidebar">
    <h2>Sidebar</h2>
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit.
      Explicabo, quae, ullam quia, vel alias neque cumque aut quidem
      libero suscipit ad voluptatem! Quidem voluptatibus quas, veniam
      reiciendis iste atque commodi. Delectus earum veritatis eum id
      dolores harum accusantium sit, quidem recusandae ipsa dolor enim
      nemo repudiandae quod, sunt autem debitis amet totam. Recusandae
      officia, commodi assumenda tempora mollitia iure rerum.
    </p>
  </aside>
</div>
              

.container {
  display: flex;
  gap: 40px;
}

@media (max-width: 900px) {
  .container {
    flex-direction: column;
  }
}

.content {
  width: 70%;
}

.sidebar {
  width: 30%;
}

@media (max-width: 1050px) {
  .content,
  .sidebar {
    width: 100%;
  }
}

.sidebar h2 {
  margin-top: 0;
}

.box {
  display: flex;
  margin-bottom: 20px;
}

@media (max-width: 1050px) {
  .box {
    flex-direction: column;
  }
}

.box_image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.box_text {
  padding: 20px;
  background-color: rgb(38, 46, 70);
}

.box_text p {
  margin-top: 0;
}

.button {
  padding: 7px 18px;
  background-color: transparent;
  border: 2px solid rgb(131, 57, 152);
  border-radius: 8px;
  color: rgb(255,255,255);
  cursor: pointer;
  transition: background-color 0.4s;
}

.button:hover {
  background-color: rgb(131, 57, 152);
}