/*  COMPONENT: LINKBOX
//////////////////////////////////////////////////////////////////////////////*/

@layer components {
    .linkbox,
    .linkbox--text {
        display: grid !important;
        grid-template-rows: 1fr min-content min-content;
    }

    .linkbox *,
    .linkbox--text * {
        margin: 0;
    }
    .linkbox .block__hl,
    .linkbox--text .block__hl {
        grid-column: 1;
        grid-row: 2;
        padding-inline: var(--spacing-m);
        padding-top: var(--spacing-m);
        pointer-events: none;
    }
    .linkbox .block__hl * {
        color: var(--color-white);
        font-size: var(--font-size-l);
    }
    .linkbox--text .block__hl * {
        font-size: var(--font-size-l);
    }
    .linkbox .linkbox__caption {
        grid-column: 1;
        grid-row: 3;
        padding-inline: var(--spacing-m);
        padding-bottom: var(--spacing-m);
        color: var(--color-white);
        font-weight: var(--font-weight-light);
    }
    .linkbox--text .linkbox__caption {
        grid-column: 1;
        grid-row: 3;
        padding-inline: var(--spacing-m);
        padding-bottom: var(--spacing-m);
        font-weight: var(--font-weight-light);
    }
    .linkbox .linkbox__image {
        grid-column: 1;
        grid-row: 1 /4;

        z-index: -1;
        height: 19.375rem;
        position: relative;
    }
    .linkbox--text .linkbox__image {
        grid-column: 1;
        grid-row: 1 /4;

        position: relative;
    }

    .linkbox .linkbox__image .image_container,
    .linkbox--text .linkbox__image .image_container,
    .linkbox--text .linkbox__image .image_container a {
        height: 100%;
        width: 100%;
    }
    .linkbox .linkbox__image img {
        height: 100%;
        width: 100%;
        object-fit: cover;
    }
    .linkbox .linkbox__image::after {
        content: "";
        position: absolute;
        bottom: 0;
        width: 100%;
        height: 100%;
        pointer-events: none;
        background: linear-gradient(0, var(--color-mbz-blue-900) 0%, oklch(44.13% 0.042 256.44 / 0) 10rem);
    }
    .linkbox a,
    .linkbox--text a {
        text-decoration: none;
    }
    .linkbox:hover *,
    .linkbox--text:hover * {
        text-decoration: underline;
        text-underline-offset: 0.1em;
        text-decoration-thickness: 1px;
    }

    .linkbox--text {
    }

    .linkbox a {
        color: var(--color-white);
    }
    @media (max-width: 680px) {
        .linkbox .block__hl * {
            text-shadow: 0 1px 5px black;
        }
    }
    @media (min-width: 680px) {
        .linkbox--text .linkbox__image {
            height: 19.375rem;
        }
        .linkbox,
        .linkbox--text {
            height: 19.375rem;
        }
    }
}