Адаптация grid-секции под разрешение 4К

Question

Есть grid-секция, состоящая из двух блоков-формы обратной связи, и карты (в примере вместо нее серый блок). Так как карта должна выходить за пределы контейнера, использовано абсолют. позиц-е. Делю секции на две grid-колонки - 35% и 65%, на разрешениях до 2200 все выглядит нормально, на 3840к-серый блок наползает на блок с формой: а должно быть так: Как сделать, чтобы на 4к секция выглядела как на 2-й картинке?

.contacts {
  position: relative;
  padding-bottom: 120px;
  overflow: hidden;
}

.container {
  margin: 0 auto;
  padding: 0 50px;
  max-width: 1700px;
}

.contacts__content {
  display: grid;
  grid-template-columns: 35.5% 64.5%;
  grid-template-rows: 700px;
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
}

.contacts__left {
  border-top: 1px solid #cacaca;
  border-right: 1px solid #cacaca;
}

.contacts__subheading {
  margin-bottom: 141px;
}

.contacts__subheading-shopname {
  margin-bottom: 4px;
}

.contacts__left-column {
  padding: 124px 122px 124px 0;
}

.contacts__callback-heading {
  margin-bottom: 16px;
  max-width: 50%;
}

.contacts__quickly-heading {
  margin-bottom: 16px;
}

.contacts__map {
  width: 100%;
  height: 100%;
}

.contacts__address {
  margin-bottom: 27px;
  font-style: normal;
}

[class*="-ground-pane"] {
  filter: grayscale(1);
}

.contacts__form {
  max-width: 25%;
}

.contacts__form-elem {
  margin-bottom: 23px;
  position: relative;
}

.contacts__form-btn {
  margin-bottom: 39px;
  padding: 14px 34px;
  position: relative;
  transition: background .2s ease-in-out, color .2s ease-in-out;
}

.contacts__input {
  padding: 0 24px;
  width: 100%;
  min-height: 40px;
  border: 1px solid black;
  border-radius: 50px;
  transition: background .2s ease-in-out;
}

.contacts__messendgers-link:not(:last-child) {
  margin-right: 16px;
}

.contacts__right {
  background: #cacaca;
}

<section class="contacts">
  <div class="contacts__content">
    <div class="contacts__left"></div>
    <div class="contacts__right">
      <div class="contacts__map" id="map"></div>
    </div>
  </div>
  <div class="contacts__box">
    <div class="container contacts__container">
      <h2 class="subheading contacts__subheading">Контакты</h2>
      <h3 class="text-reset prime-subheading contacts__subheading-shopname">Шоурум №4</h3>
      <address class="prime-text contacts__address">Леонтьевский переулок, дом 5/1</address>
      <h3 class="text-reset prime-subheading weight-normal contacts__callback-heading">Заказать обратный звонок</h3>
      <form class="contacts__form" name="form" action="/mail.php" method="post">
        <div class="contacts__form-elem">
          <input class="int-reset contacts__input" type="text" name="name" id="contacts__input-name" placeholder="Имя*" data-validate-field="name">
        </div>
        <div class="contacts__form-elem">
          <input class="int-reset contacts__input" type="tel" name="phone" id="contacts__input-phone" placeholder="Телефон*" data-validate-field="tel" inputmode="text">
        </div>
        <button class="btn-reset btn contacts__form-btn" type="submit">Заказать</button>
      </form>
      <h3 class="text-reset prime-subheading weight-normal contacts__quickly-heading">Связаться в один клик</h3>
      <div class="contacts__messendgers">
        <a class="link-reset contacts__messendgers-link" href="#" aria-label="Написать нам в вотсапп"></a>
        <a class="link-reset contacts__messendgers-link" href="#" aria-label="Написать нам в телеграм"></a>
      </div>
    </div>
  </div>
</section>

БЛОГ НА HUSL

Адаптация grid-секции под разрешение 4К

Ответы (0 шт):