/* BLOCK: Intro */

.block-intro .tiles-wrapper {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 1.25rem;
    grid-auto-flow: dense;
}

.block-intro .tiles-wrapper:not(:first-child) {
    margin-top: 1.25rem;
}

.block-intro .tiles-wrapper .tile {
    grid-column: span var(--size, 1);
    border-radius: 1.5625rem;
    overflow: hidden;
}

.block-intro .tiles-wrapper .tile:not(.tile--tall) {
    height: 13.75rem;
}

.block-intro .tiles-wrapper .tile--large {
    height: 25rem;
}

.block-intro .tiles-wrapper .tile--bg-media .overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 2.5rem;
    padding: 3.125rem;
    isolation: isolate;
}

.block-intro .tiles-wrapper .tile--bg-media .overlay.v-align--top {
    justify-content: flex-start;
}

.block-intro .tiles-wrapper .tile--bg-media .overlay.v-align--middle {
    justify-content: center;
}

.block-intro .tiles-wrapper .tile--bg-media .overlay.v-align--bottom {
    justify-content: flex-end;
}

.block-intro .tiles-wrapper .tile--bg-media .overlay::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(260.89deg, transparent, rgb(from var(--c-text-dark) r g b / 0.5) 100%);
    mix-blend-mode: multiply;
    z-index: -1;
    pointer-events: none;
}

.block-intro .tiles-wrapper .tile--bg-media .overlay > * {
    max-width: 60%;
}

.block-intro .tiles-wrapper .tile--bg-media.tile--full {
    min-height: 31.25rem;
}

.block-intro .tiles-wrapper .tile--image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.block-intro .tiles-wrapper .tile--info {
    padding: 1.875rem;
    display: flex;
    gap: 1.25rem;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
}

.block-intro .tiles-wrapper .tile--info .tile__icon {
    margin-bottom: auto;
    align-self: flex-end;
    max-width: 1.875rem;
    max-height: 1.875rem;
    color: var(--c-tertiary);
}

.block-intro .tiles-wrapper .tile--info[class*=theme--light] .tile__title {
    color: var(--c-primary);
}

.block-intro .tiles-wrapper .tile--info .tile__description {
    width: 80%;
}

.block-intro .tiles-wrapper .tile--text {
    padding: 1.875rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 2.5rem;
}

.block-intro .tiles-wrapper .tile--text > * {
    margin: 0;
}

.block-intro .tiles-wrapper .tile--text :is(h6, .h6, .h7) {
    color: var(--c-tertiary);
}

@media screen and (width <= 920px) {
    .block-intro .tiles-wrapper {
        gap: 0.75rem;
    }

    .block-key-ctas + .block-intro .tiles-wrapper {
        padding-top: 2px;
    }
    
    .block-intro .tiles-wrapper .tile--bg-media .overlay {
        padding: 1.875rem;
    }

    .block-intro .tiles-wrapper .tile--info {
        padding: 1.375rem;
    }
}

@media screen and (width <= 620px) {
    .block-intro .tiles-wrapper .tile--bg-media .overlay > * {
        max-width: unset;
    }

    .block-intro .tiles-wrapper {
        grid-template-columns: repeat(2, 1fr);
    }

    .block-intro .tiles-wrapper:not(:first-child) {
        margin-top: 0.75rem;
    }

    .block-intro .tiles-wrapper .tile {
        grid-column: span 1;
        border-radius: 1.125rem;
        /* height: 11.25rem; */
        height: 9.375rem;
        order: var(--order);
    }

    .block-intro .tiles-wrapper .tile--text {
        gap: 1.25rem;
        /* min-height: 11.25rem; */
        height: auto;
    }

    .block-intro .tiles-wrapper :is(.tile--image, .tile--large, .tile--tall) {
        grid-column: span 2;
    }

    .block-intro .tiles-wrapper .tile--bg-media {
        height: auto !important;
        aspect-ratio: 35 / 30;
    }

    .block-intro .tiles-wrapper .tile--bg-media.tile--full {
        aspect-ratio: 1;
        width: 100%;
        height: auto;
        min-height: unset;
        grid-column: span 2;
    }

    /* .block-intro .tiles-wrapper .tile--image.tile--large {
        height: auto;
        aspect-ratio: 35 / 30;
    } */

    .block-intro .tiles-wrapper .tile--info {
        gap: 0.75rem;
        height: auto !important;
        min-height: 9.375rem;
    }

    .block-intro .tiles-wrapper .tile--info .tile__icon {
        max-width: 1.25rem;
        max-height: 1.25rem;
    }

    .block-intro .tiles-wrapper .tile--info .tile__description {
        width: 100%;
    }
}

/* @media screen and (width <= 420px) {
    .block-intro .tiles-wrapper .tile:not(.tile-text,.tile--large,.tile--full) {
        height: 9.375rem;
    }
} */