/* ==========================================================
   VBC Framework
   What Matters
========================================================== */

.vbc-what-matters{
    padding:0 0 56px;
    background:var(--vbc-color-background);
}

.vbc-what-matters__box{
    position:relative;
    padding:44px;
    background:var(--vbc-color-surface);
    border:1px solid var(--vbc-color-border);
}

.vbc-what-matters__grid{
    display:grid;
    grid-template-columns:1fr minmax(0, 480px);
    gap:48px;
    align-items:center;
}

.vbc-what-matters__heading{
    font-family:var(--vbc-font-heading);
    font-size:32px;
    font-weight:700;
    letter-spacing:.02em;
    text-transform:uppercase;
    color:var(--vbc-color-heading);
    margin:0 0 26px;
}

.vbc-what-matters__heading em{
    font-style:normal;
    color:var(--vbc-color-primary);
}

.vbc-what-matters__item{
    display:flex;
    gap:16px;
    margin-bottom:22px;
}

.vbc-what-matters__item:last-child{
    margin-bottom:0;
}

.vbc-what-matters__icon{
    width:44px;
    height:44px;
    border-radius:50%;
    border:1px solid var(--vbc-color-accent);
    display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
}

.vbc-what-matters__icon i{
    width:18px;
    height:18px;
    background-color:var(--vbc-color-accent);
}

.vbc-what-matters__item h3{
    font-family:var(--vbc-font-heading);
    font-size:15px;
    font-weight:700;
    letter-spacing:.02em;
    text-transform:uppercase;
    color:var(--vbc-color-heading);
    margin:0 0 6px;
}

.vbc-what-matters__item p{
    margin:0;
    color:var(--vbc-color-body);
    font-size:14px;
    line-height:1.7;
}

.vbc-what-matters__media{
    position:relative;
    max-width:70%;
    margin:0 auto;
}

.vbc-what-matters__ring{
    position:absolute;
    top:50%;
    left:50%;
    width:80%;
    aspect-ratio:1;
    border:2px solid var(--vbc-color-accent);
    border-radius:50%;
    transform:translate(-50%, -50%);
    pointer-events:none;
    z-index:0;
}

.vbc-what-matters__media img{
    position:relative;
    z-index:1;
    display:block;
    width:100%;
    height:auto;
}

.vbc-what-matters__badge{
    position:absolute;
    z-index:2;
    background:var(--vbc-color-heading);
    color:var(--vbc-color-background);
    font-family:var(--vbc-font-heading);
    font-weight:600;
    font-size:12px;
    letter-spacing:.02em;
    padding:10px 16px;
    border:1px solid var(--vbc-color-accent);
    white-space:nowrap;
}

.vbc-what-matters__badge--1{
    top:6%;
    right:-8%;
}

.vbc-what-matters__badge--2{
    top:44%;
    left:-14%;
}

.vbc-what-matters__badge--3{
    bottom:6%;
    right:4%;
}

@media (max-width:1100px){

    .vbc-what-matters__box{
        padding:24px;
    }

    .vbc-what-matters__grid{
        grid-template-columns:1fr;
        gap:32px;
    }

    .vbc-what-matters__media{
        max-width:60%;
        margin:0 auto;
    }

    .vbc-what-matters__ring{
        display:none;
    }

    .vbc-what-matters__badge{
        position:static;
        display:block;
        width:fit-content;
        margin:12px auto 0;
    }

    .vbc-what-matters{
        padding:0 0 20px;
    }

}