fefan/next/components/editionElement/style.module.scss

.editionSection {
    --cell-width: 14.25rem;

    display: grid;
    scroll-snap-align: center;
    flex: none;
    grid-template-columns: repeat(4, max-content);
    grid-template-rows: repeat(2, max-content);
    align-content: center;
    justify-content: center;

    &.fullViewport {
        min-height: calc(2 * var(--cell-width) + 10rem + 4 * var(--border-width));
        height: calc(100vh - 2 * var(--border-width) - 5rem - 2rem);
    }

    .image {
        display: block;
        grid-row: span 2;
        margin: 0.5rem;
        img {
            display: block;
            height: calc(2 * var(--cell-width) + 1rem + 4 * var(--border-width));
        }
    }

    img.image {
        display: block;
        height: calc(2 * var(--cell-width) + 1rem + 4 * var(--border-width));
    }

    article {
        border: solid 1px var(--fg-2);
        width: var(--cell-width);
        height: var(--cell-width);
        justify-content: center;
        display: flex;
        align-items: center;
        object-fit: fill;
        margin: 0.5rem;
    }
    
    .callToAction {
        grid-row: 3;
        grid-column: span 4;
        justify-content: flex-end;
        display: flex;
        align-items: center;

        & > a {
            justify-content: flex-end;
            display: flex;
            align-items: center;
        }
    }
}

.informations {
    color: var(--fg-0);
    display: flex;
    flex-flow: column;
    margin-left: 1rem;
    text-decoration: none;
    
    h2 {
        font-family: var(--font-details);
        margin: -0.5rem 0px;
        font-size: 2rem;
        font-weight: 400;
    }

    h3 {
        margin: 0px;
        font-size: 0.75rem;
        opacity: 0.75;
        font-weight: 700;
        text-transform: uppercase;
    }
}

@media only screen and (max-width: 70rem) {
    .editionSection {
        grid-template-columns: repeat(3, max-content);

        .callToAction {
            grid-column: span 3;
        }

        article:nth-of-type(n+5) {
            display: none;
        }
    }
}

@media only screen and (max-width: 60rem) {
    .editionSection {
        grid-template-columns: repeat(2, max-content);

        .callToAction {
            grid-column: span 2;
        }

        article:nth-of-type(n+3) {
            display: none;
        }
    }
}

@media only screen and (max-width: 40rem) and (min-width: 30rem) {
    .editionSection {
        grid-template-columns: repeat(1, max-content);

        .callToAction {
            grid-column: span 1;
        }

        article {
            display: none;
        }
    }
}

@media only screen and (max-width: 30rem) {
    .editionSection {
        --cell-width: calc(50vw - 5rem);
        grid-template-columns: repeat(2, max-content);
        grid-template-rows: repeat(5, max-content);

        &.fullViewport {
            height: calc(3.5 * var(--cell-width) + 10rem + 4 * var(--border-width));
            min-height: calc(100vh - 2 * var(--border-width) - 4rem - 2rem);
        }

        .image {
            grid-row: 1;
            grid-column: span 2;
            img {
                height: auto;
                width: calc(2 * var(--cell-width) + 1rem + 4 * var(--border-width));
            }
        }

        img.image {
            height: auto;
            width: calc(2 * var(--cell-width) + 1rem + 4 * var(--border-width));
        }

        .callToAction {
            grid-row: 5;
            grid-column: span 2;
        }

        article:nth-of-type(n+3) {
            display: none;
        }
    }
}