/* Shared brand section styles for homepage and brands archive. */

.brands {
    position: relative
}
.brands__container {
    max-width: 1660px
}
@media (max-width: 576px) {.brands__container {
        padding: 0;
        margin: 0;
        width: 100%
    }

}
.brands--cards {
    padding-bottom: 130px
}
@media (max-width: 768px) {.brands--cards {
        padding-bottom: 70px
    }

}
.brands--cards .brands__title {
    margin-bottom: 40px;
    color: #272b2c
}
@media (max-width: 576px) {.brands--cards .brands__title {
        margin-bottom: 30px
    }

}
.brands__content {
    position: relative;
    padding: 70px 81px 100px;
    border-radius: 24px;
    background-color: #0c5e84
}
@media (max-width: 1440px) {.brands__content {
        padding: 60px 60px 92px
    }

}
@media (max-width: 1024px) {.brands__content {
        padding: 60px 40px 92px
    }

}
.brands__content::before {
    content: "";
    position: absolute;
    left: 80px;
    top: -25%;
    bottom: -25%;
    right: 80px;
    z-index: 1;
    width: calc(100% - 160px);
    height: 150%;
    mix-blend-mode: soft-light;
    background: radial-gradient(50% 50% at 50% 50%, #fff 0, rgba(255, 255, 255, 0) 100%)
}
.brands__title {
    margin-bottom: 50px;
    color: #fff
}
.brands__swiper-content {
    position: relative;
    min-width: 0
}
@media (max-width: 768px) {.brands__title {
        margin-bottom: 30px
    }
.brands__slider-nav {
        display: none
    }

}
.brands__slide {
    border-radius: 24px;
    background-color: #fff
}
@media (max-width: 576px) {.brands__content {
        padding: 60px 15px 92px
    }
.brands__content::before {
        left: -12.5%;
        right: -12.5%;
        top: 0;
        bottom: auto;
        width: 125%;
        height: 125%
    }
.brands__slide {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 103px
    }
.brands__link {
        padding: 15px
    }

}
.brands__link {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 160px
}
.brands__link img {
    -o-object-fit: cover;
    object-fit: cover
}
.brands .slider-nav__btn::before {
    top: -16px;
    left: -16px;
    width: 50px;
    height: 50px
}
@media (max-width: 576px) {.brands__link img {
        height: 42px;
        -o-object-fit: contain;
        object-fit: contain
    }

}
@media (max-width: 767px) {.brands__title {
        margin-bottom: 20px !important;
    }
.brands {
        padding-bottom: 40px !important;
    }
.brands__content {
        padding: 28px 15px 56px !important;
    }

}
