/* =========================================================
   IMAGE GRID LINKS
========================================================= */

.espa-image-grid-links {
    position: relative;

    width: 100%;

    margin:
            36px
            0
            46px;

    padding:
            34px
            36px;

    border:
            1px solid
            color-mix(
                    in srgb,
                    var(--espa-border) 80%,
                    transparent
            );

    border-radius: 24px;

    background:
            color-mix(
                    in srgb,
                    var(--espa-surface-secondary) 92%,
                    var(--espa-surface)
            );

    box-shadow:
            0
            10px
            30px
            rgba(15, 23, 42, .045);
}


/* =========================================================
   HEADER
========================================================= */

.espa-image-grid-links__header {
    margin-bottom: 28px;

    text-align: center;
}


.espa-image-grid-links__heading {
    margin: 0;

    color:
            var(--espa-heading);

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

    font-size:
            clamp(
                    27px,
                    2.5vw,
                    35px
            );

    font-weight: 800;

    line-height: 1.18;

    letter-spacing: -.03em;
}


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

.espa-image-grid-links__grid {
    display: grid;

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

    grid-auto-rows: 180px;

    gap: 18px;
}


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

.espa-image-grid-links__item {
    position: relative;

    min-width: 0;

    overflow: hidden;

    border-radius: 20px;
}


/* =========================================================
   SPECIAL LAYOUT
========================================================= */

/*
|--------------------------------------------------------------------------
| HERO
|--------------------------------------------------------------------------
*/

.espa-image-grid-links__item--hero {
    grid-column:
            1 / span 2;

    grid-row:
            1 / span 2;
}


/*
|--------------------------------------------------------------------------
| SMALL CARDS
|--------------------------------------------------------------------------
*/

.espa-image-grid-links__item--small-1 {
    grid-column: 3;
    grid-row: 1;
}


.espa-image-grid-links__item--small-2 {
    grid-column: 4;
    grid-row: 1;
}


.espa-image-grid-links__item--small-3 {
    grid-column: 3;
    grid-row: 2;
}


.espa-image-grid-links__item--small-4 {
    grid-column: 4;
    grid-row: 2;
}


/*
|--------------------------------------------------------------------------
| WIDE CARDS
|--------------------------------------------------------------------------
*/

.espa-image-grid-links__item--wide-1 {
    grid-column:
            1 / span 2;

    grid-row: 3;
}


.espa-image-grid-links__item--wide-2 {
    grid-column:
            3 / span 2;

    grid-row: 3;
}


/*
|--------------------------------------------------------------------------
| STANDARD CARDS
|--------------------------------------------------------------------------
*/

.espa-image-grid-links__item--standard {
    min-height: 180px;
}


/* =========================================================
   CARD
========================================================= */

.espa-image-grid-links__card {
    position: relative;

    display: block;

    width: 100%;
    height: 100%;

    overflow: hidden;

    border-radius: inherit;

    background:
            var(--espa-surface-secondary);

    color: #ffffff;

    text-decoration: none;

    box-shadow:
            0
            10px
            24px
            rgba(15, 23, 42, .08);

    transform: translateZ(0);

    transition:
            transform .28s ease,
            box-shadow .28s ease;
}


.espa-image-grid-links__card:hover {
    color: #ffffff;

    transform:
            translateY(-4px);

    box-shadow:
            0
            20px
            38px
            rgba(15, 23, 42, .15);
}


/* =========================================================
   IMAGE
========================================================= */

.espa-image-grid-links__image {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
            transform .55s
            cubic-bezier(
                    .2,
                    .75,
                    .2,
                    1
            );
}


.espa-image-grid-links__card:hover
.espa-image-grid-links__image {
    transform:
            scale(1.055);
}


/* =========================================================
   OVERLAY
========================================================= */

.espa-image-grid-links__overlay {
    position: absolute;

    inset: 0;

    z-index: 1;

    pointer-events: none;

    background:
            linear-gradient(
                    180deg,
                    rgba(15, 23, 42, .01) 30%,
                    rgba(15, 23, 42, .08) 58%,
                    rgba(15, 23, 42, .30) 100%
            );

    transition:
            background .25s ease;
}


.espa-image-grid-links__card:hover
.espa-image-grid-links__overlay {
    background:
            linear-gradient(
                    180deg,
                    rgba(15, 23, 42, .02) 25%,
                    rgba(15, 23, 42, .10) 55%,
                    rgba(15, 23, 42, .38) 100%
            );
}


/* =========================================================
   CONTENT / GLASS LABEL
========================================================= */

.espa-image-grid-links__content {
    position: absolute;

    left: 18px;
    bottom: 18px;

    z-index: 3;

    max-width:
            calc(
                    100% - 36px
            );

    min-height: 52px;

    padding:
            0
            18px;

    border:
            1px solid
            rgba(255, 255, 255, .38);

    border-radius: 14px;

    background:
            rgba(255, 255, 255, .78);

    display: inline-flex;

    align-items: center;

    justify-content: space-between;

    gap: 12px;

    box-shadow:
            0
            8px
            22px
            rgba(15, 23, 42, .14);

    backdrop-filter:
            blur(14px);

    -webkit-backdrop-filter:
            blur(14px);

    transition:
            background .25s ease,
            transform .25s ease,
            box-shadow .25s ease;
}


.espa-image-grid-links__card:hover
.espa-image-grid-links__content {
    background:
            rgba(255, 255, 255, .92);

    transform:
            translateY(-2px);

    box-shadow:
            0
            12px
            26px
            rgba(15, 23, 42, .18);
}


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

.espa-image-grid-links__title {
    min-width: 0;

    margin: 0;

    color:
            var(--espa-heading);

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

    font-size: 14px;

    font-weight: 700;

    line-height: 1.25;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;
}


/* =========================================================
   ARROW
========================================================= */

.espa-image-grid-links__arrow {
    flex: 0 0 auto;

    width: 26px;
    height: 26px;

    border-radius: 50%;

    background:
            color-mix(
                    in srgb,
                    var(--espa-primary) 9%,
                    transparent
            );

    color:
            var(--espa-primary);

    display: flex;

    align-items: center;

    justify-content: center;

    opacity: 0;

    transform:
            translateX(-4px);

    transition:
            opacity .2s ease,
            transform .2s ease,
            background .2s ease;
}


.espa-image-grid-links__arrow iconify-icon {
    font-size: 13px;
}


.espa-image-grid-links__card:hover
.espa-image-grid-links__arrow {
    opacity: 1;

    transform:
            translateX(0);
}


/* =========================================================
   HERO CARD TITLE
========================================================= */

.espa-image-grid-links__item--hero
.espa-image-grid-links__content {
    min-height: 60px;

    padding:
            0
            22px;
}


.espa-image-grid-links__item--hero
.espa-image-grid-links__title {
    font-size: 16px;
}


/* =========================================================
   SMALL CARDS
========================================================= */

.espa-image-grid-links__item--small-1
.espa-image-grid-links__content,

.espa-image-grid-links__item--small-2
.espa-image-grid-links__content,

.espa-image-grid-links__item--small-3
.espa-image-grid-links__content,

.espa-image-grid-links__item--small-4
.espa-image-grid-links__content {
    left: 14px;
    bottom: 14px;

    max-width:
            calc(
                    100% - 28px
            );

    min-height: 44px;

    padding:
            0
            14px;

    border-radius: 12px;
}


.espa-image-grid-links__item--small-1
.espa-image-grid-links__title,

.espa-image-grid-links__item--small-2
.espa-image-grid-links__title,

.espa-image-grid-links__item--small-3
.espa-image-grid-links__title,

.espa-image-grid-links__item--small-4
.espa-image-grid-links__title {
    font-size: 12px;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1199.98px) {

    .espa-image-grid-links {
        padding:
                30px
                28px;
    }


    .espa-image-grid-links__grid {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );

        grid-auto-rows: 190px;
    }


    .espa-image-grid-links__item--hero {
        grid-column:
                1 / span 2;

        grid-row:
                auto;

        min-height: 380px;
    }


    .espa-image-grid-links__item--small-1,
    .espa-image-grid-links__item--small-2,
    .espa-image-grid-links__item--small-3,
    .espa-image-grid-links__item--small-4,
    .espa-image-grid-links__item--wide-1,
    .espa-image-grid-links__item--wide-2,
    .espa-image-grid-links__item--standard {
        grid-column: auto;
        grid-row: auto;

        min-height: 190px;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767.98px) {

    .espa-image-grid-links {
        margin:
                24px
                0
                30px;

        padding:
                22px
                14px;

        border-radius: 18px;
    }


    .espa-image-grid-links__header {
        margin-bottom: 18px;

        text-align: left;
    }


    .espa-image-grid-links__heading {
        font-size: 23px;
    }


    .espa-image-grid-links__grid {
        grid-template-columns: 1fr;

        grid-auto-rows: auto;

        gap: 12px;
    }


    .espa-image-grid-links__item,
    .espa-image-grid-links__item--hero,
    .espa-image-grid-links__item--small-1,
    .espa-image-grid-links__item--small-2,
    .espa-image-grid-links__item--small-3,
    .espa-image-grid-links__item--small-4,
    .espa-image-grid-links__item--wide-1,
    .espa-image-grid-links__item--wide-2,
    .espa-image-grid-links__item--standard {
        grid-column: auto;
        grid-row: auto;

        width: 100%;

        min-height: 0;

        aspect-ratio:
                16 / 9;

        border-radius: 16px;
    }


    .espa-image-grid-links__item--hero {
        aspect-ratio:
                4 / 3;
    }


    .espa-image-grid-links__content,
    .espa-image-grid-links__item--hero
    .espa-image-grid-links__content,
    .espa-image-grid-links__item--small-1
    .espa-image-grid-links__content,
    .espa-image-grid-links__item--small-2
    .espa-image-grid-links__content,
    .espa-image-grid-links__item--small-3
    .espa-image-grid-links__content,
    .espa-image-grid-links__item--small-4
    .espa-image-grid-links__content {
        left: 12px;
        bottom: 12px;

        max-width:
                calc(
                        100% - 24px
                );

        min-height: 44px;

        padding:
                0
                14px;

        border-radius: 12px;
    }


    .espa-image-grid-links__title,
    .espa-image-grid-links__item--hero
    .espa-image-grid-links__title {
        font-size: 13px;
    }


    .espa-image-grid-links__arrow {
        width: 24px;
        height: 24px;

        opacity: 1;

        transform: none;
    }

}