.section {
    box-sizing: border-box;
    display: grid;
    margin: 0 0 8rem;
    min-width: 100%;
}

.grid-description {
    & > * {
        padding: 0.75rem;
    }
}

.grid-title {
    & .year {
        color: var(--grey);
    }

    & > .essentials {
        & > * {
            padding: 0.75rem;
        }
    }

    & > .reference-section {
        padding: 0.75rem;
    }
}

.media-item {
    padding: 0.75rem;
}

.icon-section {
    padding: 0;
}

.overlay-x {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0);
    /*box-shadow: inset 0 0 10px rgba(255, 255, 255, 1); !* Inset shadow *!*/
    box-shadow:
        inset 3rem 0 3rem white,
        inset -3rem 0 3rem white; /* Inset shadow */
    pointer-events: none; /* Ensure clicks go through to the image */
}

.overlay-y {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0);
    /*box-shadow: inset 0 0 10px rgba(255, 255, 255, 1); !* Inset shadow *!*/
    box-shadow:
        inset 0 3rem 3rem white,
        inset 0 -3rem 3rem white;
    pointer-events: none;
}

.reference-section {
    & a {
        color: var(--grey);
        text-decoration-color: var(--grey);
    }
}

@media screen and (min-width: 701px) {
    .section {
        overflow-x: visible;
        flex-flow: row nowrap;
        grid-template-columns: repeat(8, minmax(0, 1fr));
        grid-template-rows: fit-content(0) auto;

        &:has(.grid-description) {
            .grid-title {
                grid-column-end: 4;
            }

            .media-section {
                grid-column-start: 4;
            }

            .icon-section {
                grid-column-start: 4;
            }
        }

        &:not(:has(.grid-description)) {
            .grid-title {
                grid-column-end: 3;
            }

            .media-section {
                grid-column-start: 3;
            }

            .icon-section {
                grid-column-start: 3;
            }
        }
    }

    .grid-title {
        grid-row-start: 1;
        grid-row-end: 2;

        grid-column-start: 1;

        padding-left: 0.75rem;
    }

    .grid-description {
        grid-row-start: 2;
        grid-row-end: 3;

        grid-column-start: 1;
        grid-column-end: 4;

        padding-left: 0.75rem;
    }

    .media-section {
        box-sizing: border-box;
        display: flex;
        height: 100%;
        overflow-x: scroll;
        -ms-overflow-style: none;
        scrollbar-width: none;

        grid-row-start: 1;
        grid-row-end: 3;

        grid-column-end: 9;

        padding: 0.75rem 0 0.75rem;

        &::-webkit-scrollbar {
            display: none;
        }

        & .media-item {
            padding: 0 0.75rem 0;
            box-sizing: border-box;
        }
    }

    .icon-section {
        grid-row-start: 3;
        grid-row-end: 4;

        grid-column-end: 9;
    }

    .desktop-1-8 {
        min-width: 12.5dvw;
        width: 12.5dvw;
    }

    .desktop-2-8 {
        min-width: 25dvw;
        width: 25dvw;
    }

    .desktop-3-8 {
        min-width: 37.5dvw;
        width: 37.5dvw;
    }

    .desktop-4-8 {
        min-width: 50dvw;
        width: 50dvw;
    }

    .desktop-5-8 {
        min-width: 62.5dvw;
        width: 62.5dvw;
    }
}

@media screen and (max-width: 700px) {
    .section {
        flex-direction: column;
    }

    .grid-title {
        order: 1;

        display: flex;

        flex-flow: row nowrap;

        & .reference-section {
            margin-right: 0;
            margin-left: auto;
            width: fit-content;
        }
    }

    .grid-description {
        order: 2;
    }
}