Проблемы с блоком. При увеличении разрешения верхняя часть блока уходит за границы и его не видно

const box = document.querySelector(".box");
const openButton = document.querySelector(".open-button");
const boxContent = document.querySelector(".box-contet");
const closeButton = document.querySelector(".close-button");

openButton.addEventListener('click', () => {
  openButton.classList.add("disble");
  boxContent.classList.remove("disble");
})

closeButton.addEventListener('click', () => {
  openButton.classList.remove("disble");
  boxContent.classList.add("disble");
})

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.container {
  max-width: 332px;
  margin: 0 auto;
}

.open-button {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  cursor: pointer;
  border: none;
  border-radius: 4px;
  box-shadow: 0px 4px 30px 0px #00000040;
  padding: 12px 56px;
  background: #FFFFFF;
  color: #000000;
}

.disble {
  display: none;
}

.show {
  display: block;
}

.box-contet {
  width: 552px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 4px;
  box-shadow: 0px 4px 30px 0px #00000040;
}

.top {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding-top: 8px;
  padding-bottom: 8px;
  padding-left: 15px;
  background: #E8EBF3;
}

.close-button {
  width: 8px;
  height: 8px;
  border-radius: 7px;
  background: #E85162;
  border: none;
  cursor: pointer;
}

.top__yelow {
  width: 8px;
  height: 8px;
  border-radius: 7px;
  background: #F29B3D;
}

.top__green {
  width: 8px;
  height: 8px;
  border-radius: 7px;
  background: #40AB55;
}

.info {
  background: #DAE0E4;
  padding-top: 40px;
  padding-bottom: 40px;
}

.info-flex {
  display: flex;
  justify-content: center;
  align-items: center;
}

.info__title {
  width: 114px;
  height: 15px;
  background: #C5CBCF;
  margin-bottom: 11px;
}

.info__subtitle {
  width: 41px;
  height: 15px;
  background: #C5CBCF;
}

.box-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  background: #FFFFFF;
  padding-top: 20px;
  padding-bottom: 32px;
}

.card {
  width: 100px;
}

.card__img {
  width: 100%;
  height: 100px;
  background: #DAE0E4;
  margin-bottom: 12px;
  border-radius: 4px
}

.card__text {
  height: 15px;
  background: #C6CACD;
  border-radius: 4px;
}

.card__text_width-one {
  width: 41px;
}

.card__text_width-two {
  width: 88px;
}

.card__text_width-free {
  width: 67px;
}

.card__text_width-four {
  width: 35px;
}

.card__text_width-five {
  width: 67px;
}

.card__text_width-six {
  width: 35px;
}

@media (min-width: 320px) and (max-width: 767px) {
  .box-contet {
    width: 375px;
  }
  .container {
    max-width: 100px;
  }
}

<div class="box">
  <button class="open-button">Button</button>
</div>
<div class="box-contet disble">
  <div class="top">
    <button class="close-button"></button>
    <div class="top__yelow"></div>
    <div class="top__green"></div>
  </div>
  <div class="info info-flex">
    <div class="container">
      <div class="info__title"></div>
      <div class="info-flex">
        <div class="info__subtitle"></div>
      </div>
    </div>
  </div>
  <div class="box-cards container">
    <div class="card">
      <div class="card__img"></div>
      <div class="card__text card__text_width-one"></div>
    </div>
    <div class="card">
      <div class="card__img"></div>
      <div class="card__text card__text_width-two"></div>
    </div>
    <div class="card">
      <div class="card__img"></div>
      <div class="card__text card__text_width-free"></div>
    </div>
    <div class="card">
      <div class="card__img"></div>
      <div class="card__text card__text_width-four"></div>
    </div>
    <div class="card">
      <div class="card__img"></div>
      <div class="card__text card__text_width-five"></div>
    </div>
    <div class="card">
      <div class="card__img"></div>
      <div class="card__text card__text_width-six"></div>
    </div>
  </div>
</div>