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

/*---------- Section ----------*/

.benefits{}

/*---------- Container ----------*/

.benefits__container{}

/*---------- Header ----------*/

.benefits__header{
    margin-bottom:var(--space-4);
}

.benefits__title{}

.benefits__description{}

/*---------- Grid ----------*/

.benefits__grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
    gap:var(--space-3);
}

/*---------- Card ----------*/

.benefit{

    background:var(--surface);

    border:1px solid var(--border);

    border-radius:var(--radius-lg);

    overflow:hidden;

    transition:
        transform var(--transition-slow),
        box-shadow var(--transition),
        border-color var(--transition);
}

.benefit:hover{

    transform:translateY(-8px);

    border-color:var(--sunflower);

    box-shadow:var(--shadow-md);
}


.benefit__title{
    margin-bottom:.5rem;
    font-size:1.05rem;
    text-transform:uppercase;
    letter-spacing:.03em;
    color:var(--primary-dark);
}

.benefit__description{
    color:var(--text-soft);
}

/*---------- Image ----------*/

/*---------- Image ----------*/

.benefit__image{

    display:block;

    width:calc(100% - 2rem);
    height:220px;

    margin:1rem auto 0;

    border-radius:var(--radius-md);

    object-fit:cover;

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

    transition:
        transform .7s ease,
        box-shadow var(--transition);
}

.benefit:hover .benefit__image{

    transform:scale(1.03);

    box-shadow:var(--shadow-md);
}

/*---------- Body ----------*/

.benefit__title,
.benefit__description{

    padding-inline:var(--space-3);
}

.benefit__title{

    margin-top:var(--space-3);
    margin-bottom:.8rem;

    color:var(--primary-dark);

    font-size:1.1rem;

    text-transform:uppercase;

    letter-spacing:.03em;
}

.benefit__description{

    padding-bottom:var(--space-3);

    color:var(--text-soft);

    line-height:1.7;
}