Смещение блоков
 

Происходит смещение блоков. Именно когда окно браузера начинаю сжимать, на полный экран всё норм
Скрин - https://skrinshoter.ru/sLEfG6YZZuX?a

Можно ли как то поставить их правильно?
Или это я в медиа запросах не разбираюсь просто

// Первый блок

.first-block {
   height: 100vh;
   background: url(../Калькулятор/img/figma/index-bg.png) 0 0 / cover no-repeat;
}

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

.first-block__row {
   display: flex;

}

.first-block__body {
   padding-top: 180px;

}

.first-block__title {
   width: 600px;
   font-size: 50px;
   font-style: normal;
   font-weight: 700;
   line-height: 140%;
   color: #fff;
   margin: 0px 0px 40px 0px;
}

.first-block__text {
   font-size: 16px;
   font-style: normal;
   font-weight: 400;
   color: #fff;
   width: 322px;
   margin: 0px 0px 64px 0px;
}

.first-block__btn {
   color: #fff;
   font-size: 20px;
}

.first-block__blocks {
   padding-top: 131px;
   padding-left: 31px;
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   grid-template-rows: repeat(2, 1fr);
   gap: 24px;
}

.first-block__block {
   display: flex;
   width: 306px;
   padding: 30px 35px;
   flex-direction: column;
   align-items: flex-start;
   gap: 118px;

   border-radius: 20px;
   background: var(--blue, #5DB7DE);
}