header { background: rgba(255, 255, 255, 0.85); }

#brands-page { padding: 90px 50px 160px; }

#brands-page .brands-nav ul { display: flex; gap: 0; }
#brands-page .brands-nav ul li { flex: 1; position: relative; }
#brands-page .brands-nav ul li::after { content: ''; width: 1px; height: 60%; background: #ddd; position: absolute; right: 0; top: 20%; }
#brands-page .brands-nav ul li:last-child::after { display: none; }
#brands-page .brands-nav ul li a { display: block; width: 100%; height: 100%; min-height: 90px; background-position: center; background-repeat: no-repeat; background-size: 150px auto; }
#brands-page .brands-nav ul li a.omiberry { background-image: url("../../img/brands/omiberry-gray.svg"); }
#brands-page .brands-nav ul li a.omiberry.on { background-image: url("../../img/brands/omiberry-deepblue.svg"); }
#brands-page .brands-nav ul li a.dailyonion { background-image: url("../../img/brands/dailyonion-gray.svg"); }
#brands-page .brands-nav ul li a.dailyonion.on { background-image: url("../../img/brands/dailyonion-deepblue.svg"); }
#brands-page .brands-nav ul li a.marketorae { background-image: url("../../img/brands/marketorae-gray.svg"); }
#brands-page .brands-nav ul li a.marketorae.on { background-image: url("../../img/brands/marketorae-deepblue.svg"); }

#brands-page .brands-banner { width: 100%; height: 500px;  background-position: center; background-repeat: no-repeat; background-size: cover; display: flex; justify-content: center; align-items: center; }
#brands-page .brands-banner img { width: 80%; max-width: 350px; height: auto; }

#brands-page .brands-info { display: flex; flex-direction: column; gap: 12px 0; align-items: flex-start; margin: 40px 0 60px; }
#brands-page .brands-info p:last-child { line-height: 1.6; opacity: 0.9; }
#brands-page .brands-info .brand-external-link { display: flex; align-items: center; justify-content: flex-start; gap: 0 12px; margin: 12px 0 0; }
#brands-page .brands-info .brand-external-link::after { content: ''; display: inline-block; margin: 0; width: 18px; height: 18px; background: url("../../img/icon/icon-external.svg") left top / 100% auto no-repeat; }

#brands-page .brands-slider { position: relative; width: 100%; display: flex; flex-direction: column; justify-content: space-between; align-items: center; padding: 60px 0 0; border-top: 1px solid var(--color-deepblue); }
#brands-page .brands-slider > ul { position: relative; width: 100%; padding: 0; display: flex; gap: 0; }
#brands-page .brands-slider > ul > li { position: relative; flex: 1; overflow: visible; width: auto !important; height: auto; }
#brands-page .brands-slider > ul > li img { display: block; height: 100%; width: auto; max-height: 300px; }
#brands-page .brands-slider > ul > li p { padding: 8px 0; }

@media (max-width: 1024px) {
    #brands-page { padding: 70px 30px 120px; }
    #brands-page .brands-banner { height: 400px; }
    #brands-page .brands-nav ul { flex-direction: column; padding: 0; margin-bottom: 30px; }
    #brands-page .brands-nav ul li { flex: none; width: 100%; }
    #brands-page .brands-nav ul li:last-child::after { display: block; }
    #brands-page .brands-nav ul li a { background-size: 110px auto; min-height: 50px; }
    #brands-page .brands-nav ul li::after { height: 1px; width: 100%; top: 100%; }
    #brands-page .brands-slider > ul > li img { max-height: 52vw; }
    #brands-page .brands-info { margin: 30px 0 40px; }
    #brands-page .brands-slider { padding: 40px 0 0; }
}