Grid траблы с блоками
Здраствуйте, помогите с grid-ом Делаю вёрстку по PP, столкнулся с тем что у меня образовывается 4 блока в грид сетке, вместо 3х (скрин 1 и 2), если применить gap что бы сделать отступы, то он посчитает все 4 отступа Не могу понять, почему так получается, прошу помочь, код прилагаю ниже если кому потребуется полностью весь код, могу скинуть в файлообменнике
/*style.css*/
.about {
margin-bottom: 100px;
}
.about__wrap {
max-width: 70%;
}
.about-section {
margin-top: 50px;
}
.about__list {
--gap: 32px;
--screen: 2;
--width: 50%;
display: grid;
grid-template-columns: repeat(auto-fit, calc(var(--width) - var(--gap) / var(--screen)));
grid-template-rows: repeat(auto-fit, 292px);
gap: 32px;
}
.about__item {
position: relative;
display: grid;
min-height: 295px;
justify-items: center;
}
.about__item:first-child {
width: 100%;
min-height: 622px;
transform: scale(1);
grid-row: 1/3;
align-items: end;
background-image: url("../img/section-banner-background.jpg");
border-radius: 24px;
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
}
.about__inner {
display: flex;
max-height: 196px;
justify-content: space-between;
align-items: center;
padding: 50px;
background-color: rgb(0,0,0, 0.5);
border-radius: inherit;
}
.about-descr {
width: 56%;
color: var(--color-white);
font-weight: 700;
}
.item-btn {
background-color: transparent;
border: 3px solid var(--color-orange);
padding: 18px 36px;
border-radius: 16px;
transition: background-color .3s ease-in-out, border-color .3s ease-in-out;
}
.item-btn:focus, .item-btn:hover {
background-color: var(--color-orange);
}
.item-btn:active {
background-color: var(--color-dark-orange);
border-color: var(--color-dark-orange);
}
.item-btn__link {
font-size: 16px;
font-weight: 700;
line-height: 19.5px;
color: var(--color-white);
}
.about__item:nth-child(2){
align-items: center;
border: 1px solid var(--color-gray);
border-radius: 32px;
background-image: url("../img/background-about-upper.png");
background-repeat: no-repeat;
background-size: 190px 165px;
background-position: top 64px left 60px;
}
.about__item:nth-child(3){
align-items: center;
border: 1px solid var(--color-gray);
border-radius: 32px;
background-image: url("../img/background-about-under.png");
background-repeat: no-repeat;
background-size: 190px 165px;
background-position: top 64px left 60px;
}
.item__wrap {
max-width: 452px;
margin-left: 21%;
}
.text__descr {
overflow-wrap: break-word;
}
/*style.css*/
/*media.css (max-width: 320px)*/
.about__item:first-child {
grid-row: span 2;
min-height: 400px;
border-radius: 16px;
background-size: contain;
background-position: top;
}
.about__inner {
flex-direction: column;
align-items: flex-start;
background-color: transparent;
color: var(--color-black);
font-size: 14px;
font-weight: 400;
line-height: 28px;
padding: 0;
gap: 13px;
}
.about-descr {
color: inherit;
font-weight: inherit;
}
.about-section {
margin-top: 14px;
}
.about__list {
gap: 0px;
grid-template-rows: auto;
grid-template-rows: repeat(3, auto);
}
.about-descr {
width: 100%;
}
.item-btn {
padding: 9px 42px;
border-radius: 8px;
border: 2px solid var(--color-orange);
}
.item-btn__link {
color: var(--color-orange);
font-size: 12px;
line-height: 14.63px;
}
.about__item:nth-child(2),
.about__item:nth-child(3) {
border: none;
background-size: 64px 49px;
background-position: top 80px left 0px;
}
.item__wrap {
margin: 0;
max-width: 290px;
}
.subtitle {
max-width: 290px;
margin-bottom: 4px;
font-size: 18px;
font-weight: 500;
line-height: 21.94px;
}
.subtitle-descr {
font-size: 14px;
font-weight: 400;
line-height: 28px;
}
.caption-descr {
word-spacing: -3px;
}
/*media.css*/ <section class="about offset flex">
<div class="container">
<div class="about__wrap">
<h2 class="caption">О нас</h2>
<p class="caption-descr">
Также как перспективное планирование создаёт необходимость включения в производственный план целого ряда внеочередных мероприятий с учётом комплекса экспериментов, поражающих по своей масштабности и грандиозности. А также диаграммы связей могут быть описаны максимально подробно. Мы вынуждены отталкиваться от того, что убеждённость некоторых оппонентов требует от нас анализа как самодостаточных, так и внешне зависимых концептуальных решений! Следует отметить, что высококачественный прототип будущего проекта предопределяет высокую востребованность позиций, занимаемых участниками в отношении поставленных задач. Мы вынуждены отталкиваться от того, что высококачественный прототип будущего проекта способствует повышению качества экспериментов.
</p>
</div>
<div class="about-section">
<ul class="about__list r-list ">
<li class="about__item">
<div class="about__inner">
<p class="caption-descr about-descr">
Принимая во внимание показатели успешности, перспективное планирование способствует подготовке и реализации новых принципов
</p>
<button class="item-btn"><a href="#" class="item-btn__link">Подробнее</a></button>
</div>
</li>
<li class="about__item">
<div class="item__wrap">
<h3 class="subtitle">Консультация с широким активом</h3>
<p class="subtitle-descr text__descr">А также свежий взгляд на привычные вещи — безусловно открывает новые горизонты для как самодостаточных, так и внешне зависимых концептуальных решений</p>
</div>
</li>
<li class="about__item">
<div class="item__wrap">
<h3 class="subtitle">В своём стремлении повысить</h3>
<p class="subtitle-descr text__descr">Качество жизни, они забывают, что сплочённость команды профессионалов представляет собой интересный эксперимент проверки прогресса профессионального сообщества</p>
</div>
</li>
</ul>
</div>
</div>
</section>
