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>
    <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>
  </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);
}