/* [built_around_character] — bento service grid, full-bleed images on hover */

.df-character-grid {
    --df-character-grid-card: #fbfafc;
    --df-character-grid-title: #4d4d4d;
    --df-character-grid-text: #8b898c;
    --df-character-grid-radius: 1.35rem;
    --df-character-grid-gap: 1rem;
    padding: clamp(2.5rem, 5vw, 4.5rem) 0;
    background: #fff;
    color: var(--df-character-grid-title)
}

.df-character-grid__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
        "heading"
        "branding"
        "strategy"
        "storytelling"
        "ai"
        "marketing"
        "gamified";
    gap: var(--df-character-grid-gap);
    align-items: stretch
}

.df-character-grid__heading {
    grid-area: heading;
    align-self: start;
    max-width: 11ch;
    margin: 0;
    padding-top: .15rem;
    font-family: var(--df-font-heading);
    font-size: clamp(1.85rem, 3.4vw, 2.625rem);
    font-weight: 600;
    line-height: 1.12;
    letter-spacing: -.03em;
    color: var(--df-character-grid-title)
}

.df-character-grid__card--branding { grid-area: branding }
.df-character-grid__card--strategy { grid-area: strategy }
.df-character-grid__card--storytelling { grid-area: storytelling }
.df-character-grid__card--ai { grid-area: ai }
.df-character-grid__card--marketing { grid-area: marketing }
.df-character-grid__card--gamified { grid-area: gamified }

.df-character-grid__card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 14rem;
    padding: 0;
    overflow: hidden;
    border-radius: var(--df-character-grid-radius);
    background: var(--df-character-grid-card)
}

.df-character-grid__media {
    position: absolute;
    inset: 0;
    z-index: 0;
    opacity: 0;
    pointer-events: none;
    transition: opacity .7s cubic-bezier(.22, 1, .36, 1)
}

.df-character-grid__card:hover .df-character-grid__media,
.df-character-grid__card:focus-within .df-character-grid__media,
.df-character-grid__card.is-auto-hover .df-character-grid__media {
    opacity: 1
}

.df-character-grid__image {
    display: block;
    width: 100%;
    height: 100% !important;
    object-fit: cover;
    object-position: center
}

.df-character-grid__copy {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    height: 100%;
    margin-top: auto;
    padding: 3.25rem 1.15rem 1.2rem
}

.df-character-grid__title {
    margin: 0;
    font-family: var(--df-font-heading);
    font-size: 36px;
    font-weight: 300;
    line-height: 1.3;
    color: var(--df-character-grid-title);
    transition: transform .55s cubic-bezier(.22, 1, .36, 1)
}

.df-character-grid__text {
    margin: .35rem 0 0;
    max-width: 36em;
    max-height: 8em;
    overflow: hidden;
    font-size: 18px;
    font-weight: 300;
    line-height: 1.5;
    color: var(--df-character-grid-text);
    transition:
        opacity .45s cubic-bezier(.22, 1, .36, 1),
        max-height .55s cubic-bezier(.22, 1, .36, 1),
        margin .55s cubic-bezier(.22, 1, .36, 1)
}

.df-character-grid__card:hover .df-character-grid__text,
.df-character-grid__card:focus-within .df-character-grid__text,
.df-character-grid__card.is-auto-hover .df-character-grid__text {
    opacity: 0;
    max-height: 0;
    margin: 0;
    pointer-events: none
}

@media (min-width: 720px) {
    .df-character-grid {
        --df-character-grid-gap: 1rem
    }

    .df-character-grid__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-areas:
            "heading heading"
            "branding branding"
            "strategy storytelling"
            "ai gamified"
            "marketing marketing"
    }

    .df-character-grid__card--strategy,
    .df-character-grid__card--storytelling,
    .df-character-grid__card--ai,
    .df-character-grid__card--gamified {
        min-height: 16.5rem
    }
}

@media (min-width: 1024px) {
    .df-character-grid {
        --df-character-grid-gap: 1.15rem
    }

    .df-character-grid__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        grid-template-rows: minmax(9.5rem, auto) minmax(4.25rem, auto) minmax(15.5rem, 1fr) minmax(15.25rem, 1fr);
        grid-template-areas:
            "heading branding branding"
            "strategy branding branding"
            "strategy storytelling ai"
            "marketing marketing gamified"
    }

    .df-character-grid__heading {
        padding-top: .35rem
    }

    .df-character-grid__card {
        min-height: 0
    }

    .df-character-grid__copy {
        padding: 3.5rem 1.2rem 1.25rem
    }
}

@media (hover: none) {
    .df-character-grid__media {
        opacity: 1
    }

    .df-character-grid__card:hover .df-character-grid__text,
    .df-character-grid__card:focus-within .df-character-grid__text,
    .df-character-grid__card.is-auto-hover .df-character-grid__text {
        opacity: 1;
        max-height: 8em;
        margin: .35rem 0 0;
        pointer-events: auto
    }
}

@media (prefers-reduced-motion: reduce) {
    .df-character-grid__media {
        opacity: 1;
        transition: none
    }

    .df-character-grid__title,
    .df-character-grid__text {
        transition: none
    }
}