/*==============================*/
/*=====----- TEMPLATE -----=====*/
/*==============================*/

.mosaic {
    position: relative;
    margin-top: 12px;
    margin-bottom: 90px;
}

.mosaic .mosaic-tiles-wrapper {
    display: grid;
    grid-template: auto / repeat(2, minmax(0, 1fr));
    gap: 12px;
}

/*============================*/
/*=====----- SLIDES -----=====*/
/*============================*/

.mosaic .mosaic-tile,
.mosaic .mosaic-tile-inner,
.mosaic .tile-img {
    position: relative;
    z-index: 1;
}

.mosaic .mosaic-tile {
    color: var(--white);
}

.mosaic .mosaic-tile-inner::before {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: block;
    background: rgba(0,0,0,.4);
    content: '';
    pointer-events: none;
}

.mosaic .mosaic-tile-link {
    display: block;
}

.mosaic .tile-1,
.mosaic .tile-4 {
    grid-column: span 2;
}

.mosaic .tile-img {
    width: 100%;
}

.mosaic .tile-info-wrapper {
    position: absolute;
    inset: 50% 0 auto 0;
    z-index: 4;
    transform: translateY(-50%);
    padding: 10px 6px 20px;
    text-align: center;
    pointer-events: none;
}

.mosaic .tile-title {
    font-family: var(--font-montserrat);
    font-weight: var(--font-weight-black);
    font-size: var(--text-lg);
    line-height: 1.2;
    color: inherit;
    text-transform: uppercase;
}

.mosaic .tile-icon {
    display: none;
}

/*===================================*/
/*=====----- MEDIA QUERIES -----=====*/
/*===================================*/

@media (min-width: 40em) {
    .mosaic .mosaic-tiles-wrapper {
        grid-template:
            'tile1 tile1 tile2' auto
            'tile1 tile1 tile3' auto
            'tile5 tile4 tile4' auto 
            'tile6 tile4 tile4' auto / minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
    }

    .mosaic .tile-1 {
        grid-area: tile1;
    }
    .mosaic .tile-2 {
        grid-area: tile2;
    }
    .mosaic .tile-3 {
        grid-area: tile3;
    }
    .mosaic .tile-4 {
        grid-area: tile4;
    }
    .mosaic .tile-5 {
        grid-area: tile5;
    }
    .mosaic .tile-6 {
        grid-area: tile6;
    }

    .mosaic .mosaic-tile-inner,
    .mosaic .mosaic-tile-link,
    .mosaic .tile-img {
        height: 100%;
    }

    .mosaic .mosaic-tile-inner {
        width: 100%;
    }

    .mosaic .tile-img {
        object-fit: cover;
    }
}

@media (min-width: 64em) {
    .mosaic {
        margin-bottom: 136px;
    }

    .mosaic .mosaic-tiles-wrapper {
        grid-template:
            'tile2 tile1 tile5' 1fr
            'tile2 tile1 tile5' 1fr
            'tile3 tile1 tile5' 1fr
            'tile3 tile4 tile5' 1fr
            'tile3 tile4 tile6' 1fr
            'tile3 tile4 tile6' 1fr / 29.375% minmax(0, 1fr) 29.375%;
    }

    @media (hover: hover) {
        .mosaic .tile-info-wrapper::before {
            position: absolute;
            inset: auto auto -20px 50%;
            z-index: 1;
            transform: translateX(-50%);
            display: block;
            width: 40%;
            max-width: 168px;
            aspect-ratio: 1 / 1;
            background: var(--violet);
            border-radius: 50%;
            content: '';
            pointer-events: none;
            opacity: 0;
            transition: opacity var(--transition-appendix);
        }

        .mosaic .tile-title {
            position: relative;
            z-index: 2;
        }

        .mosaic .tile-icon {
            position: absolute;
            top: 0;
            left: 50%;
            z-index: 2;
            transform: translate(-50%, -100%);
            display: block;
            width: 100%;
            max-width: 30px;
            max-height: 30px;
            object-fit: contain;
            opacity: 0;
            pointer-events: none;
            transition: opacity var(--transition-appendix);
        }

        .mosaic .mosaic-tile-link:hover + .tile-info-wrapper::before {
            opacity: 1;
        }

        .mosaic .mosaic-tile-link:hover + .tile-info-wrapper .tile-icon {
            opacity: 1;
        }
    }
}

@media (min-width: 90em) {
    .mosaic .tile-title {
        font-size: 2.125rem;
    }

    .mosaic .tile-icon {
        max-width: 58px;
        max-height: 58px;
    }
}