/*==================================================
BRANDS
==================================================*/

.brands{

    position:relative;

    width:100%;

    min-height:100vh;

    display:flex;
    align-items:center;

    background:#ff4d6d;

    overflow:hidden;

    padding:180px 0;

}


.brands .container{

    width:min(1650px,92vw);

    margin:0 auto;

}


/*==================================================
HEADER
==================================================*/

.brands-header{

    display:flex;

    flex-direction:column;

    gap:40px;

}


.section-label{

    font-size:.85rem;

    text-transform:uppercase;

    letter-spacing:.35em;

    color:rgba(255,255,255,.55);

}


.brands-title{

    width:100%;

    color:#FFF;

    font-size:clamp(3.5rem,5vw,6rem);

    line-height:.92;

    font-weight:400;

    letter-spacing:-.05em;

    text-align: center;

}


.brands-description{

    width:100%;

    font-size:1.1rem;

    line-height:1.8;

    color:rgba(255,255,255,.82);
    text-align: center;

}


/*==================================================
GRID
==================================================*/

.brands-grid{

    margin-top:140px;

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:90px 80px;

    align-items:center;

}


.brand-item{

    display:flex;

    justify-content:center;

    align-items:center;

    text-decoration:none;

    transition:.45s cubic-bezier(.22,.61,.36,1);

}


.brand-item img{

    height:38px;

    width:auto;

    max-width:100%;

    opacity:.28;

    transition:.45s cubic-bezier(.22,.61,.36,1);

    filter:brightness(0) invert(1);

}


.brand-item:hover{

    transform:translateY(-6px);

}


.brand-item:hover img{

    opacity:1;

}


/*==================================================
NOTE
==================================================*/

.brands-note{

    margin-top:140px;

   width:100%;

    font-size:.85rem;

    line-height:1.7;

    color:rgba(255,255,255,.45);
    text-align: center;

}


/*==================================================
RESPONSIVE
==================================================*/

@media(max-width:1200px){

.brands-grid{

    grid-template-columns:repeat(3,1fr);

}

}



@media(max-width:900px){

.brands{

    padding:120px 0;

}

.brands-title{

    font-size:clamp(3rem,10vw,5rem);

}

.brands-grid{

    margin-top:80px;

    grid-template-columns:repeat(2,1fr);

    gap:70px 40px;

}

}



@media(max-width:640px){

.brands{

    min-height:auto;

}

.brands-header{

    gap:30px;

}

.brands-description{

    max-width:100%;

}

.brands-grid{

    margin-top:70px;

    grid-template-columns:1fr;

    gap:60px;

}

.brand-item img{

    height:34px;

}

.brands-note{

    margin-top:90px;

}

}