/* ==========================================================================
   LEGENDS
   ========================================================================== */

.sv_legends,
.sv_legends_header,
.sv_legends_list {
    width: 100%;
    min-width: 0;
}

.sv_legends {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    min-height: 0;
    overflow: hidden;
}

.sv_legends_header {
    flex: 0 0 auto;
    padding-bottom: var(--space_2);
}

.sv_legends_list {
    position: relative;
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    grid-template-rows: repeat(5, minmax(0, 1fr));
    flex: 1 1 auto;
    width: calc(var(--space_2_5) * 22);
    max-width: 100%;
    min-height: 0;
    margin-inline: auto;
    overflow: hidden;
}

/* ==========================================================================
   LEGEND
   ========================================================================== */

.sv_legend {
    position: relative;
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    cursor: pointer;
}

    /* ==========================================================================
   STAGGERED LAYOUT
   ========================================================================== */

    .sv_legend:nth-child(16n + 1) {
        grid-column: 1;
        grid-row: 1 / span 2;
    }

    .sv_legend:nth-child(16n + 2) {
        grid-column: 2;
        grid-row: 2 / span 2;
    }

    .sv_legend:nth-child(16n + 3) {
        grid-column: 3;
        grid-row: 1 / span 2;
    }

    .sv_legend:nth-child(16n + 4) {
        grid-column: 4;
        grid-row: 2 / span 2;
    }

    .sv_legend:nth-child(16n + 5) {
        grid-column: 5;
        grid-row: 1 / span 2;
    }

    .sv_legend:nth-child(16n + 6) {
        grid-column: 6;
        grid-row: 2 / span 2;
    }

    .sv_legend:nth-child(16n + 7) {
        grid-column: 7;
        grid-row: 1 / span 2;
    }

    .sv_legend:nth-child(16n + 8) {
        grid-column: 8;
        grid-row: 2 / span 2;
    }

    .sv_legend:nth-child(16n + 9) {
        grid-column: 1;
        grid-row: 3 / span 2;
    }

    .sv_legend:nth-child(16n + 10) {
        grid-column: 2;
        grid-row: 4 / span 2;
    }

    .sv_legend:nth-child(16n + 11) {
        grid-column: 3;
        grid-row: 3 / span 2;
    }

    .sv_legend:nth-child(16n + 12) {
        grid-column: 4;
        grid-row: 4 / span 2;
    }

    .sv_legend:nth-child(16n + 13) {
        grid-column: 5;
        grid-row: 3 / span 2;
    }

    .sv_legend:nth-child(16n + 14) {
        grid-column: 6;
        grid-row: 4 / span 2;
    }

    .sv_legend:nth-child(16n + 15) {
        grid-column: 7;
        grid-row: 3 / span 2;
    }

    .sv_legend:nth-child(16n + 16) {
        grid-column: 8;
        grid-row: 4 / span 2;
    }

/* ==========================================================================
   FLIP
   ========================================================================== */

.sv_legend_image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    perspective: calc(var(--space_4) * 100);
}

.sv_legend_image_face {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    backface-visibility: hidden;
    transition: transform 300ms ease;
}

.sv_legend_image_front {
    transform: rotateY(0deg);
}

.sv_legend_image_back {
    transform: rotateY(180deg);
}

.sv_legend_image:hover .sv_legend_image_front {
    transform: rotateY(-180deg);
}

.sv_legend_image:hover .sv_legend_image_back {
    transform: rotateY(0deg);
}

/* ==========================================================================
   CONTENT
   ========================================================================== */

.sv_legend_image_front .svg_icon,
.sv_legend_image_back a,
.sv_legend_image_back img {
    display: block;
    width: 100%;
    height: 100%;
}

.sv_legend_image_front .svg_icon {
    fill: currentColor;
    object-fit: contain;
}

.sv_legend_image_back img {
    object-fit: contain;
}

.sv_legend_image_back a {
    text-decoration: none;
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media only screen and (max-width: 64em) {

    .sv_legends_list {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        grid-template-rows: repeat(8, minmax(0, 1fr));
        width: 100%;
    }

    .sv_legend {
        grid-column: auto !important;
        grid-row: span 2 !important;
    }

        .sv_legend:nth-child(even) {
            transform: translateY(50%);
        }
}

@media only screen and (max-width: 30em) {

    .sv_legends_list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-rows: repeat(16, minmax(0, 1fr));
    }

    .sv_legend:nth-child(even) {
        transform: none;
    }
}