/* Brands */
#brands { margin: 30px auto 0; display: flex; gap: 50px; width: 90%; align-items: start; }
#brands form { width: 260px; background: #fff; border-radius: 20px; position: relative; padding: 17px 26px 24px; overflow: hidden; box-shadow: 0 0 15px #00000029; }
#brands form:before { content: ' '; display: block; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient( 90deg, #ffc401, #ff4515 ); }
#brands form h3 { margin: 0 0 10px; }
#brands form section { display: flex; gap: 7px; flex-wrap: wrap; justify-content: start; }
#brands form button { border: 0; background: #f1f1f1; padding: 7px 10px; border-radius: 5px; color: #000; width: calc( ( 100% - 10px ) / 2 ); transition: all .4s; font: 500 10pt/1 'Lexend Deca', 'Arial', sans-serif; letter-spacing: -.5px; }
#brands form .active { background: linear-gradient( 90deg, #ff7b07, #ff2e70 ); color: #fff; }
#subcategories { margin: 13px 0 0; }
#subcategories h4 { margin: 0 0 8px; }
#brands-content { width: calc( 100% - 310px ); display: flex; flex-wrap: wrap; gap: 35px; text-align: center; align-items: center; }
#brands-content .mix { display: none; width: calc( ( 100% - 105px ) / 4 ); height: 140px; line-height: 160px; background: #fff; border-radius: 10px; }
#brands-content .has-packshots { cursor: pointer; transition: box-shadow .4s; }
#brands-content .has-packshots:hover { box-shadow: 0 0 15px #00000029; }
#brands-content .mix figure { display: flex; align-items: center; height: 100%; justify-content: center; }
#brands-content .mix img { max-width: 140px; max-height: 120px; }
#brands-content aside { display: none; }

@media (max-width: 1200px) {
    #brands-content .mix { width: calc( ( 100% - 70px ) / 3 ); }
}

@media (max-width: 850px) {
    #brands-content .mix { width: calc( ( 100% - 35px ) / 2 ); }
}

@media (max-width: 768px) {
    #brands { flex-direction: column; }
    #brands form { margin: auto; max-width: 100%; box-sizing: border-box; }
    #brands-content { width: 100%; }
    #brands-content .mix { width: calc( ( 100% - 105px ) / 4 ); }
}

@media (max-width: 650px) {
    #brands-content .mix { width: calc( ( 100% - 70px ) / 3 ); }
}

@media (max-width: 550px) {
    #brands-content .mix { width: calc( ( 100% - 35px ) / 2 ); }
}