Неправильно переносятся блоки
Проблема такая , блок переносится вниз хотя должен быть напротив высокого блока , вот так:
а у меня переносится вот так:
Вот мой код:
.lessons__block-wide{
border-radius: 10px;
box-shadow: 0px 2px 30px 0px rgba(75, 63, 96, 0.15);
background: rgb(255, 255, 255);
width: 560px;
padding: 22px 30px 24px 30px;
position: relative;
}
.lessons__years{
color: rgb(255, 255, 255);
font-family: Roboto;
font-size: 12px;
font-weight: 400;
line-height: 120%;
letter-spacing: 0%;
text-align: center;
border-radius: 5px;
background: rgb(100, 60, 193);
width: 70px;
padding: 5px 8px;
margin-bottom: 29px;
}
.lessons__title{
color: rgb(13, 2, 34);
font-family: Circe Rounded ;
font-size: 24px;
font-weight: 400;
line-height: 120%;
letter-spacing: 0%;
text-align: left;
margin-bottom: 25px;
width: 210px;
}
.lessons__link{
color: rgb(88, 81, 101);
font-family: Roboto;
font-size: 18px;
font-weight: 400;
line-height: 150%;
letter-spacing: 0%;
text-align: left;
}
.lesson__image{
position: absolute;
top: 0;
bottom: 0;
right: 0;
height: 100%;
}
.lessons__blocks{
display: flex;
align-items: start;
flex-wrap: wrap;
width: 560px;
justify-content: space-between;
gap: 40px 0px;
}
.lessons__block-small{
border-radius: 10px;
box-shadow: 0px 2px 30px 0px rgba(75, 63, 96, 0.15);
background: rgb(255, 255, 255);
width: 260px;
padding: 22px 30px 24px 30px;
position: relative;
}
.lessons__block-high{
border-radius: 10px;
box-shadow: 0px 2px 30px 0px rgba(75, 63, 96, 0.15);
background: rgb(255, 255, 255);
width: 260px;
padding: 22px 30px 22px 30px;
min-height: 460px;
position: relative;
}
.lessons__block-high .lesson__image{
height: 274px;
top: auto;
}
.lessons__content{
display: flex;
gap: 0 40px;
align-items: start;
} <section class="lessons">
<div class="container">
<div class="lessons__content">
<div class="lessons__blocks">
<div class="lessons__block-wide">
<img class="lesson__image" src="static/imgs/lesson__1.svg" alt="">
<p class="lessons__years">4-8 лет</p>
<h2 class="lessons__title">Английский<br> для малышей</h2>
<a class="lessons__link" href="#">Узнать больше <svg width="26.200195" height="9.003906" viewBox="0 0 26.2002 9.00391" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs/>
<path id="Vector 156" d="M0.5 4.50195L25.5 4.50195M21.5786 8.50195L25.5 4.50195L21.5786 0.501953" stroke="#585165" stroke-opacity="1.000000" stroke-width="1.000000"/>
</svg>
</a>
</div>
<div class="lessons__block-small">
<img class="lesson__image" src="static/imgs/lesson__2.svg" alt="">
<p class="lessons__years">14-19 лет</p>
<h2 class="lessons__title">Для<br>
подростков</h2>
<a class="lessons__link" href="#">Узнать больше <svg width="26.200195" height="9.003906" viewBox="0 0 26.2002 9.00391" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs/>
<path id="Vector 156" d="M0.5 4.50195L25.5 4.50195M21.5786 8.50195L25.5 4.50195L21.5786 0.501953" stroke="#585165" stroke-opacity="1.000000" stroke-width="1.000000"/>
</svg>
</a>
</div>
<div class="lessons__block-small">
<p class="lessons__years">Хит</p>
<h2 class="lessons__title">Подготовка<br> к ЗНО</h2>
<a class="lessons__link" href="#">Узнать больше <svg width="26.200195" height="9.003906" viewBox="0 0 26.2002 9.00391" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs/>
<path id="Vector 156" d="M0.5 4.50195L25.5 4.50195M21.5786 8.50195L25.5 4.50195L21.5786 0.501953" stroke="#585165" stroke-opacity="1.000000" stroke-width="1.000000"/>
</svg>
</a>
</div>
</div>
<div class="lessons__blocks">
<div class="lessons__block-high">
<img class="lesson__image" src="static/imgs/lessons__high.svg" alt="">
<p class="lessons__years">8-14 лет</p>
<h2 class="lessons__title">Занятия<br>
для школьников</h2>
<a class="lessons__link" href="#">Узнать больше <svg width="26.200195" height="9.003906" viewBox="0 0 26.2002 9.00391" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs/>
<path id="Vector 156" d="M0.5 4.50195L25.5 4.50195M21.5786 8.50195L25.5 4.50195L21.5786 0.501953" stroke="#585165" stroke-opacity="1.000000" stroke-width="1.000000"/>
</svg>
</a>
</div>
<div class="lessons__block-small">
<img class="lesson__image" src="static/imgs/lesson__2.svg" alt="">
<p class="lessons__years">14-19 лет</p>
<h2 class="lessons__title">Для<br>
подростков</h2>
<a class="lessons__link" href="#">Узнать больше <svg width="26.200195" height="9.003906" viewBox="0 0 26.2002 9.00391" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs/>
<path id="Vector 156" d="M0.5 4.50195L25.5 4.50195M21.5786 8.50195L25.5 4.50195L21.5786 0.501953" stroke="#585165" stroke-opacity="1.000000" stroke-width="1.000000"/>
</svg>
</a>
</div>
<div class="lessons__block-small">
<img class="lesson__image" src="static/imgs/lesson__2.svg" alt="">
<p class="lessons__years">14-19 лет</p>
<h2 class="lessons__title">Для<br>
подростков</h2>
<a class="lessons__link" href="#">Узнать больше <svg width="26.200195" height="9.003906" viewBox="0 0 26.2002 9.00391" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs/>
<path id="Vector 156" d="M0.5 4.50195L25.5 4.50195M21.5786 8.50195L25.5 4.50195L21.5786 0.501953" stroke="#585165" stroke-opacity="1.000000" stroke-width="1.000000"/>
</svg>
</a>
</div>
</div>
</div>
</div>
</section>