/* =====================================================
   BENEFITS
===================================================== */

.benefits{

    background:#fff;

    padding:var(--space-5) 0;

    overflow:hidden;

}

.benefits .container{

    width:min(var(--container),92%);

    margin:auto;

}

.benefits__grid{

    display:grid;

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

    grid-auto-rows:1fr;

    gap:var(--space-3);

}

.benefits__card{

    --frame-inset-x:calc(var(--space-3) / 2);
    --frame-inset-y:calc(var(--space-3) / 2);

    position:relative;

    min-height:145px;

    display:grid;

    grid-template-columns:40px minmax(0,1fr);

    align-items:center;

    gap:10px;

    padding:18px var(--space-3);

    background:var(--color-warm-white);

    border-radius:8px;

    box-shadow:var(--shadow-soft);

    overflow:hidden;

    opacity:0;

    transform:translateY(24px);

    transition:
        opacity .5s ease-out,
        transform .5s ease-out,
        background .25s ease,
        box-shadow .25s ease;

}

.benefits.is-visible .benefits__card{

    opacity:1;

    transform:translateY(0);

}

.benefits__card:hover{

    background:rgba(115,138,105,.09);

    box-shadow:0 14px 38px rgba(47,49,51,.1);

}

.benefits__card > :not(.frame){

    position:relative;

    z-index:2;

}

.benefits__icon{

    display:flex;

    align-items:center;

    justify-content:center;

    align-self:center;

}

.benefits__icon img{

    display:block;

    width:40px;

    height:40px;

}

.benefits__content{

    display:flex;

    flex-direction:column;

    justify-content:center;

    gap:5px;

    text-align:left;

    transform:translateY(3px);

}

.benefits__title{

    font-family:var(--font-heading);

    font-size:16px;

    font-weight:600;

    line-height:1.28;

    color:var(--graphite);

    margin-bottom:0;

}

.benefits__text{

    font-size:13px;

    line-height:1.65;

    color:var(--graphite-600);

}

.benefits__card .frame{

    opacity:0;

}

.benefits.is-visible .benefits__card .frame{

    opacity:1;

    transition:opacity .25s ease .5s;

}

@media (max-width:1180px){

    .benefits{

        padding:var(--space-5) 0;

    }

    .benefits__grid{

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

        gap:var(--space-3);

    }

    .benefits__card{

        min-height:150px;

    }

}

@media (max-width:720px){

    .benefits{

        padding:var(--space-4) 0;

    }

    .benefits__grid{

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

        gap:var(--space-2);

    }

    .benefits__card{

        --frame-inset-x:calc(var(--space-3) / 2);
        --frame-inset-y:calc(var(--space-3) / 2);

        min-height:160px;

        grid-template-columns:1fr;

        align-items:start;
        align-content:start;

        gap:12px;

        padding:18px var(--space-3);

    }

    .benefits__icon{

        align-self:start;

        justify-content:center;

    }

    .benefits__content{

        text-align:center;

        transform:none;

    }

    .benefits__icon img{

        width:40px;

        height:40px;

    }

    .benefits__title{

        font-size:16px;

    }

    .benefits__text{

        font-size:13px;

        line-height:1.55;

    }

}