/**
 * ==================================================
 * WHY US
 * ==================================================
 * Theme: Aicher Teeladen
 *
 * Homepage trust section.
 *
 * Includes:
 * - Section
 * - Container
 * - Eyebrow
 * - Section Title
 * - Grid Layout
 * - Items
 * - Icons
 * - Typography
 * - Responsive Layout
 * ==================================================
 */


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

.why-us {

    padding-block: 4rem;

    background-color: var(--wp--preset--color--background-alt);

}


/* ==================================================
   CONTAINER
================================================== */

.why-us__container {

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 2.5rem;

}


/* ==================================================
   EYEBROW
================================================== */

.why-us__eyebrow {

    margin: 0;

    color: var(--wp--preset--color--accent);

    font-size: .95rem;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: .15em;

    text-align: center;

}


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

.why-us__title {

    margin: -.5rem 0 0;

    color: var(--wp--preset--color--primary);

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

    font-size: clamp(2rem, 3vw, 2.8rem);

    font-weight: 600;

    line-height: 1.2;

    text-align: center;

}


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



.why-us__grid {

    display: grid;

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

    gap: 2.5rem;

}

/* ==================================================
   WORDPRESS LAYOUT RESET
================================================== */

.why-us__grid > .why-us__item {
    margin-block-start: 0;
}


/* ==================================================
   ITEM
================================================== */

.why-us__item {

    display: flex;

    align-items: center;

    justify-content: flex-start;

    gap: 1rem;

    width: 100%;

}


/* ==================================================
   ICON
================================================== */

.why-us__icon {

    width: 52px;
    height: 52px;

    border-radius: 50%;

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

    background-repeat: no-repeat;
    background-position: center;
    background-size: 22px;

    flex-shrink: 0;
}

.why-us__icon.leaf {
    background-image: url("../svg/leaf.svg");
}

.why-us__icon.quality {
    background-image: url("../svg/quality.svg");
}

.why-us__icon.user {
    background-image: url("../svg/user.svg");
}

.why-us__icon.truck {
    background-image: url("../svg/truck.svg");
}

.why-us__icon img {

    display: none;

}

/* Hide Image */

.why-us__icon img {

    display: none;

}



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

.why-us__content {

    flex: 1;

    display: flex;

    flex-direction: column;

    justify-content: center;

    gap: .2rem;

}


/* ==================================================
   ITEM TITLE
================================================== */

.why-us__item-title {

    margin: 0;

    color: var(--wp--preset--color--primary);

    font-size: 1.2rem;

    font-weight: 600;

    line-height: 1.3;

}


/* ==================================================
   ITEM TEXT
================================================== */

.why-us__text {

    margin: 0;

    color: var(--wp--preset--color--foreground);

    font-size: .8rem;

    line-height: 1.4;

    opacity: .75;

}


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

/* Tablet */

@media (max-width: 1063px) {

    .why-us {

        padding-block: 3.5rem;

    }

    .why-us__grid {

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

        gap: 2rem;

    }

    .why-us__item {

        width: 280px;
        margin: 0 auto;

    }

}

/* Smartphone */

@media (max-width: 620px) {

    .why-us {

        padding-block: 3rem;

    }

    .why-us__grid {

        grid-template-columns: 1fr;

        justify-items: center;

    }

    .why-us__item {

        width: 280px;
        margin: 0 auto;
        justify-content: flex-start;

    }

}