*{
padding: 0;
margin: 0;
border: 0;
}

html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}


body{
font-family: 'TT Lakes', sans-serif;
background-color: #F8F8F8;
}

.brands {
min-width: 320px;
}

.brands__title {
padding: 16px;
height: 80px;
font-weight: 400;
font-size: 16px;
line-height: 24px;
text-transform: uppercase;
color: #7E7E82;
background-color: #FFFFFF;
border-top: 2px solid #D9FFF5;
}

.brands__container {
position: relative;
}

.brands__list {
margin: 16px;
display: flex;
flex-wrap: nowrap;
gap: 16px;
}

.brands__item {
list-style-type: none;
width: 240px;
height: 72px;
}

.brands__button {
width: 240px;
height: 72px;
background: none;
border: none;
cursor: pointer;
background: #FFFFFF;
border: 1px solid #EAEAEA;
border-radius: 6px;
display: flex;
justify-content: space-between;
align-items: center;
transition: all 0.3s ease;
}

.brands__button:hover {
transform: scale(1.1);
}

.brands__button-logo {
margin-left: 16px;
}

.brands__button-arrow {
width: 40px;
height: 40px;
margin-right: 16px;
}

.swiper-pagination {
position: static;
}

.swiper-pagination-bullet {
width: 12px;
height: 12px;
background-color: #DDDDDD;
}

.swiper-pagination-bullet-active {
background-color: #B5B6BC;
}

.brands__show-all {
font-family: 'TT Lakes', sans-serif;
margin-left: 24px;
background: none;
border: none;
cursor: pointer;
font-weight: 500;
font-size: 16px;
line-height: 24px;
color: #1B1C21;
display: flex;
align-items: center;
}

.brands__show-all::before {
content: url("../img/expand.svg");
width: 24px;
height: 24px;
margin-right: 9px;
transition: transform 0.3s ease;
}

.brands__show-all.brands__show-all--expanded::before {
transform: rotate(180deg);
}



@media only screen and (max-width: 320px) {
.brands__show-all {
display: none;
}

}


@media only screen and (min-width: 321px) and (max-width: 767px) {
.brands__title {
padding-left: 24px;
}

.brands__show-all {
display: none;
}

}


@media only screen and (min-width: 768px) and (max-width: 1119px) {
.swiper-pagination{
display: none;
}

.brands__title {
padding-left: 24px;
height: 56px;
}

.brands__list {
display: grid;
grid-template-columns: repeat(3, 240px);
gap: 16px 24px;
margin: 24px;
}

.brands__list:not(.brands__list--expanded) .brands__item:nth-child(n+7) {
display: none;
}

}


@media only screen and (min-width: 1120px) {
.swiper-pagination{
display: none;
}

.brands__title {
padding-left: 32px;
height: 56px;
}

.brands__list {
margin: 24px 32px;
display: grid;
grid-template-columns: repeat(4, 240px);
gap: 16px 32px;
}

.brands__show-all {
margin-left: 32px;
}

.brands__list:not(.brands__list--expanded) .brands__item:nth-child(n+9) {
display: none;
}

}