Почему не получается прижать грид элемент полностью к верху?
Есть вот такой блок нужно чтоб кнопки переключение слайдов прижимались к верху прописываю им align-self: start; они все ровно не становятся в самый верх когда вместо start ставлю end все роботает как надо никаких отступом у меня там нету в чем может быть проблема ?
new Swiper('.reviews__swiper', {
slidesPerView: 1,
spaceBetween: 20,
navigation: {
nextEl: '.reviews__button-next',
prevEl: '.reviews__button-prev',
},
});.reviews {
position: relative;
padding-top: 210px;
}
.reviews::before {
content: url(../images/reviews-deco01.png);
position: absolute;
right: 0;
bottom: -370px;
z-index: -1;
}
.reviews::after {
content: url(../images/reviews-deco02.png);
position: absolute;
left: 0;
top: -150px;
z-index: -1;
}
.reviews__row {
display: grid;
grid-template-areas:
"reviews__swiper reviews__info"
"reviews__swiper reviews__buttons";
gap: 0px 100px;
}
.reviews__swiper {
overflow: hidden;
width: 600px;
grid-area: reviews__swiper;
}
.reviews__slide {
background: var(--white);
filter: drop-shadow(0px 20px 60px rgba(163, 168, 179, 0.15));
border-radius: 16px;
width: 600px;
}
.reviews__slide-img {
width: 100%;
max-width: 100%;
border-radius: 16px 16px 0px 0px;
}
.reviews__slide-content {
padding: 40px;
}
.reviews__slide-top {
display: flex;
align-items: center;
column-gap: 16px;
}
.reviews__slide-name {
font-weight: 600;
font-size: 24px;
line-height: 30px;
}
.reviews__slide-text {
margin-top: 32px;
font-weight: 400;
font-size: 20px;
line-height: 30px;
}
.reviews__info {
grid-area: reviews__info;
}
.reviews__info-title {
text-align: left !important;
}
.reviews__info-item {
margin-top: 42px;
display: flex;
align-items: center;
column-gap: 24px;
}
.reviews__info-number {
font-weight: 600;
font-size: 40px;
line-height: 40px;
}
.reviews__info-text {
margin-top: 8px;
font-weight: 400;
font-size: 20px;
line-height: 28px;
color: var(--grey);
}
.reviews__buttons {
display: flex;
column-gap: 24px;
grid-area: reviews__buttons;
align-self: start;
}
.reviews__button {
width: 60px;
height: 60px;
display: flex;
align-items: center;
justify-content: center;
background: var(--white);
box-shadow: 0px 12px 30px rgba(205, 209, 214, 0.28);
border-radius: 100%;
cursor: pointer;
} <link rel="stylesheet" href="css/reset.css">
<section class="reviews">
<div class="container">
<div class="reviews__row">
<div class="reviews__swiper">
<div class="swiper-wrapper">
<div class="reviews__slide swiper-slide">
<img class="reviews__slide-img" src="images/reviews01.jpg" alt="">
<div class="reviews__slide-content">
<div class="reviews__slide-top">
<span class="reviews__slide-name">
Brooklyn Simmons
</span>
<img class="reviews__slide-stars" src="images/vector/stars.svg" alt="">
</div>
<p class="reviews__slide-text">
“Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint. Velit officia consequat duis enim velit mollit. Exercitation veniam consequat sunt nostrud amet. Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint. Velit officia”
</p>
</div>
</div>
<div class="reviews__slide swiper-slide">
<img class="reviews__slide-img" src="images/reviews01.jpg" alt="">
<div class="reviews__slide-content">
<div class="reviews__slide-top">
<span class="reviews__slide-name">
Imam White
</span>
<img class="reviews__slide-stars" src="images/vector/stars.svg" alt="">
</div>
<p class="reviews__slide-text">
“Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint. Velit officia consequat duis enim velit mollit. Exercitation veniam consequat sunt nostrud amet. Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint. Velit officia”
</p>
</div>
</div>
</div>
</div>
<div class="reviews__info">
<h3 class="reviews__info-title title">
What Our Customers Say
</h3>
<div class="reviews__info-item">
<span class="reviews__info-number">
4.9
</span>
<div>
<img class="reviews__info-stars" src="images/vector/stars.svg" alt="">
<p class="reviews__info-text">
based on 2452+ reviews
</p>
</div>
</div>
</div>
<div class="reviews__buttons">
<div class="reviews__button-prev reviews__button">
<img src="images/vector/reviews-arrow-right.svg" alt="">
</div>
<div class="reviews__button-next reviews__button">
<img src="images/vector/reviews-arrow-left.svg" alt="">
</div>
</div>
</div>
</div>
</section>
<script src="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.js"></script>Источник: Stack Overflow на русском