:root{
    --item-size:100px;
    --mobile-item-size:65px;
}

/* =========================
   SECTION
========================= */

.brands-section{
    width:100%;
    background:#fff;
    z-index: 4;
}

.brands-wrapper{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:30px;
}

/* =========================
   LEFT CONTENT
========================= */

.brands-content{
    flex:0 0 35%;
}

.brands-content h2{
    font-size:72px;
    line-height:0.95;
    margin-bottom:20px;
    font-weight:600;
}

.brands-content h2 span{
    font-style:italic;
}

.brands-content p{
    max-width:350px;
    font-size:18px;
    line-height:1.8;
    color:#666;
}

/* =========================
   WHEEL
========================= */

.logo-wheel{
    flex:0 0 60%;
    width:100%;
    max-width:700px;
    aspect-ratio:1/1;
    position:relative;
    overflow:visible;
}

.wheel{
    position:absolute;
    inset:0;
}

.wheel-item{
    position:absolute;
    width:var(--item-size);
    height:var(--item-size);

    display:flex;
    align-items:center;
    justify-content:center;
}

.wheel-item img{
    width:100%;
    height:100%;
    object-fit:contain;
}

.upright{
    width:100%;
    height:100%;

    display:flex;
    align-items:center;
    justify-content:center;
}

/* =========================
   CENTER LOGO
========================= */

.wheel-center{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    z-index:5;
}

.wheel-center img{
    width:130px;
    height:auto;
}

/* =========================
   TOOLTIP
========================= */

.wheel-item::after{
    content:attr(data-tooltip);
    position:absolute;

    bottom:120%;
    left:50%;

    transform:translateX(-50%) translateY(10px);

    background:#000;
    color:#fff;

    font-size:13px;
    padding:8px 12px;
    border-radius:6px;

    white-space:nowrap;

    opacity:0;
    pointer-events:none;

    transition:.3s;
}

.wheel-item:hover::after{
    opacity:1;
    transform:translateX(-50%) translateY(0);
}

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

@media(max-width:991px){

    .brands-wrapper{
        gap:50px;
    }

    .brands-content h2{
        font-size:52px;
    }

    .logo-wheel{
        max-width:550px;
    }

}

@media(max-width:768px){

    .brands-wrapper{
        flex-direction:column;
        text-align:center;
    }

    .brands-content{
        flex:unset;
        width:100%;
    }

    .brands-content p{
        margin:auto;
        max-width:100%;
    }

    .brands-content h2{
        font-size:42px;
    }

    .wheel-item{
        width:var(--mobile-item-size);
        height:var(--mobile-item-size);
    }

    .logo-wheel{
        max-width:420px;
    }

    .wheel-center img{
        width:90px;
    }
}