/* =============================================================================
   GLOBAL
   ============================================================================= */

#brands .text .box{
display:flex;
width:100%;
align-items:center;
justify-content:space-between;
}

#brands .text .box .media{
filter:brightness(0) invert(.2);
}


#brands{
display:flex;
align-items:center;
flex-direction:column;
}

#brands .title{
display:flex;
align-items:center;
}

#brands .text{
display:flex;
align-items:center;
flex-direction:column;
justify-content:space-between;
background:linear-gradient(0deg, rgba(241,241,241,1) 0%, rgba(255,255,255,1) 70%);
border-radius:var(--brd-radius-5);
}


#brands .text .box ul li:before{
display:none;
}

#brands .text .box ul li:after{
content: '';
margin:0 0 0 .25rem;
padding:0 1rem 0 0;
background:url('/assets/img/icon/check.svg') no-repeat 0 2px;
background-size:90%;
}

/* =============================================================================
   MOBILE (max-width: 45rem)
   ============================================================================= */
@media screen and (max-width: 45rem){

#brands{
width:100%;
margin:.5rem 0;
padding:0;
}

#brands .text{
width:100%;
margin:0;
padding:0;
}

#brands .text .box{
flex-direction:column;
}

#brands .text .box .media{
margin:.25rem 0 1rem 0;
width:40vw;
}

#brands .text .box ul{
padding:0;
margin:0;
}

#brands .text .box ul li{
float:left;
width:100%;
text-align:center;
margin:.5rem 0;
}

}

/* =============================================================================
   TABLET PORTRAIT (45rem – 79.5rem, portrait)
   ============================================================================= */
@media screen and (min-width: 45rem) and (max-width: 79.5rem) and (orientation: portrait){

#brands{
width:100%;
margin:1rem auto;
}

#brands .text{
width:100%;
padding:1rem;
}

#brands .text .box .media{
margin:2rem 0 2.5rem 0;
width:5rem;
}

#brands .text .box ul{
display:flex;
width:100%;
align-items:center;
justify-content:center;
}

#brands .text .box ul li{
width:33%;
margin:.5rem 0 .5rem 0;
text-align:center;
font-weight:bold;
font-size:var(--fs-h4);
}

}

/* =============================================================================
   TABLET LANDSCAPE (45rem – 79.5rem, landscape)
   ============================================================================= */
@media screen and (min-width: 45rem) and (max-width: 79.5rem) and (orientation: landscape){

#brands{
width:100%;
margin:1rem auto;
}

#brands .text{
width:100%;
padding:1rem 1.5rem;
}

#brands .text .box .media{
margin:2rem 0 2.5rem 0;
width:5.5rem;
}

#brands .text .box ul{
display:flex;
width:100%;
align-items:center;
justify-content:center;
}

#brands .text .box ul li{
width:33%;
margin:.5rem 0 .5rem 0;
text-align:center;
font-weight:bold;
font-size:var(--fs-h4);
}

}

/* =============================================================================
   DESKTOP (min-width: 79.5rem)
   ============================================================================= */
@media screen and (min-width: 79.5rem){

#brands .text .box{
flex-direction:row;
}

#brands .text .box .media{
margin:2.5rem 0 3.5rem 0;
padding:0;
min-width:3rem;
width:6rem;
max-width:10rem;
}

#brands .text .box ul{
display:flex;
width:100%;
align-items:center;
justify-content:center;
}

#brands .text .box ul li{
width:33%;
margin:.5rem 0 .5rem 0;
text-align:center;
font-weight:bold;
font-size:var(--fs-h4);
}

}