:root {
    --content-width: 1400px;
}
#container {
    grid-template-columns: 1fr min(90dvw, var(--content-width)) 1fr;
}
#page-content {
    grid-column: 2;
    grid-row: 2;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-auto-rows: 100px;
    grid-template-areas: 
    "A A A A A A"
    "A A A A A A"
    "A A A A A A"
    "A A A A A A"
    "B B B B C C"
    "B B B B C C"
    "B B B B C C"
    "B B B B C C"
    "B B B B C C"
    "F F F F C C"
    "F F F F C C"
    "F F F F C C"
    "E E D D D D"
    "E E D D D D"
    "E E D D D D"
    "E E D D D D"
    "E E D D D D"
    "G G H H I I"
    "G G H H I I"
    "G G H H I I"
    "G G H H I I"
    "G G H H I I";
    gap: max(1rem, 1dvw);
    & .card {     
        position: relative;
        overflow: hidden;
        border: 1px rgb(174, 174, 174) solid;
        border-radius: 8px;
        box-shadow: 2px 2px 8px #dddddd;;
        padding: 2rem 1rem;
        opacity: 0.2;
        transition: opacity 0.8s ease-out;
        &:nth-child(1) { grid-area: A; }
        &:nth-child(2) { grid-area: B; }
        &:nth-child(3) { grid-area: C; }
        &:nth-child(4) { grid-area: D; }
        &:nth-child(5) { grid-area: E; }
        &:nth-child(6) { grid-area: F; }
        &:nth-child(7) { grid-area: G; }
        &:nth-child(8) { grid-area: H; }
        &:nth-child(9) { grid-area: I; }
        &.is-visible {
            opacity: 1;
        }
        &.scale {
            transition: transform 0.3s ease;
            &:hover {
                transform: scale(1.03);
            }
        }
        @supports (animation-timeline: view()) {
            animation: text-appear both;
            animation-timeline: view();
            animation-range: entry 20% cover 50%;
            /* Reset transition if timeline is supported */
            transition: none; 
            transform: none;
            opacity: 1; 
        }
        & img {
            width: 100%;
            height: 100%;
            object-fit: contain; 
            display: block;
        }
    }
}
@keyframes text-appear {
    from {
        opacity: 0.2;
        filter: blur(1px);
    }
    to {
        opacity: 1;
        filter: blur(0);
    }
}
@media screen and (width < 1000px) {
    #page-content {
        grid-template-areas: 
        "A A A A A A"
        "A A A A A A"
        "A A A A A A"
        "B B B B B B"
        "B B B B B B"
        "B B B B B B"
        "B B B B B B"
        "F F F F F F"
        "F F F F F F"
        "F F F F F F"
        "D D D D D D"
        "D D D D D D"
        "D D D D D D"
        "D D D D D D"
        "E E E E C C"
        "E E E E C C"
        "E E E E C C"
        "E E E E C C"
        "E E E E C C"
        "G G H H I I"
        "G G H H I I"
        "G G H H I I"
        "G G H H I I"
        "G G H H I I"
    }
}
@media screen and (width < 700px) {
    #page-content {
        grid-template-areas: 
        "A A A A A A"
        "A A A A A A"
        "A A A A A A"
        "B B B B B B"
        "B B B B B B"
        "B B B B B B"
        "B B B B B B"
        "F F F F F F"
        "F F F F F F"
        "F F F F F F"
        "D D D D D D"
        "D D D D D D"
        "D D D D D D"
        "D D D D D D"
        "E E E E E E"
        "E E E E E E"
        "E E E E E E"
        "E E E E E E"
        "E E E E E E"
        "C C C C C C"
        "C C C C C C"
        "C C C C C C"
        "C C C C C C"
        "C C C C C C"
        "C C C C C C"
        "C C C C C C"
        "C C C C C C"
        "G G G G G G"
        "G G G G G G"
        "G G G G G G"
        "G G G G G G"
        "G G G G G G"
        "G G G G G G"
        "H H H H H H"
        "H H H H H H"
        "H H H H H H"
        "H H H H H H"
        "H H H H H H"
        "H H H H H H"
        "I I I I I I"
        "I I I I I I"
        "I I I I I I"
        "I I I I I I"
        "I I I I I I"
        "I I I I I I"
    }
}