:root {
    --content-width: 1200px;
}
#page-content {
    grid-column: 1 / -1;
    grid-row: 2;
    display: grid;
    grid-template-columns: subgrid;
    grid-auto-rows: max-content;
    & #page-heading {
        margin: 0;
        grid-column: 2 / 3;
        grid-row: 1;
        padding-bottom: 3.2rem;
        & h1 {
            margin: 0;
            color: rgb(88, 28, 144);
            letter-spacing: 0px;
            font-size: clamp(3rem, 8vw, 5.5rem);
            line-height: 0.9;
            font-weight: 400;
        }
        & h6 {
            margin: 0;
            color: rgba(88, 28, 144, 0.6);
            letter-spacing: 0px;
            line-height: normal;
        }
    }
    & section {
        grid-column: 1 / -1;
        display: grid;
        grid-template-columns: subgrid;
        padding: 5dvw 0;
        & .inner-wrapper {
            grid-column: 2;
            align-self: center;
            display: grid;
            & > img {
                animation: fade-in;
                animation-duration: 2s;
                animation-fill-mode: forwards;
            }
        }
        &:nth-of-type(odd) {
            background-color: rgb(91, 61, 148);
            color: #fff;
        }
        &:nth-of-type(even) {
            color: rgb(71, 48, 115);
        }
        &:nth-of-type(1),
        &:nth-of-type(2) {
            & .inner-wrapper {
                grid-template-columns: repeat(12, 1fr);
                grid-template-rows: repeat(3, max-content);
                column-gap: 1dvw;
                & > img {
                    width: 100%;
                    border-radius: 10px;
                } 
                & .caption {
                    height: max-content;
                    align-self: center;
                    & h6 {
                        margin: 0;
                        padding: 3rem;
                        font-size: clamp(1.4rem, 2dvw, 2.2rem);
                        line-height: normal;
                        font-weight: 200;
                    }
                }
            }
        }
        &:nth-of-type(1) {
            grid-row: 2;
            & .inner-wrapper {
                & > img {
                    grid-column: 2 / 6;
                    grid-row: 1 / span 3;
                    box-shadow: 12px 11px 36px #1d0035;
                }
                & .caption {
                    grid-column: 6 / 13;
                    grid-row: 2;
                }
            }
        }
        &:nth-of-type(2) {
            grid-row: 3;
            & .inner-wrapper {
                & > img {
                    grid-column: 8 / 12;
                    grid-row: 1 / span 3;
                    box-shadow: 12px 11px 36px #989898;
                }
                & .caption {
                    grid-column: 1 / 8;
                    grid-row: 2;
                    & h6 {
                        text-align: end;
                    }
                }
            }
        }
        &:nth-of-type(3) {
            grid-row: 4;
            color: #fff;
            & .inner-wrapper {
                grid-template-columns: repeat(3, 1fr);
                grid-auto-rows: 1fr;
                gap: 3.2rem;
                & .card {
                    display: flex;
                    flex-direction: column;
                    overflow: hidden;
                    padding: 0 1rem 2rem 1rem;
                    height: 100%;
                    background-color: #fff;
                    color: rgb(124, 124, 124);
                    border-radius: 8px;
                    box-shadow: 10px 9px 34px #1d0035;
                    cursor: pointer;
                    transition: all 0.3s ease;
                    opacity: 0;
                    transition: opacity 0.8s ease-out, transform 0.3s ease-out;
                    &.is-visible {
                        opacity: 1;
                    }
                    &:hover {
                        transform: scale(1.08);
                        & .card-content-wrapper h6 {
                            color: rgb(71, 48, 115);
                        }
                    }
                    @supports (animation-timeline: view()) {
                        &.auto-show {
                            animation: fade-in both;
                            animation-timeline: view();
                            animation-range: entry 20% cover 50%;
                            opacity: 1; 
                        }
                    }
                    & .card-content-wrapper {
                        display: grid;
                        grid-template-rows: auto 1fr; 
                        height: 100%;
                        & h6 {
                            margin: 0;
                            text-align: center;
                            font-size: 2.5rem;
                            padding: 2rem 0 0 0;
                        }
                        & img {
                            width: 100%;
                            width: 100%;
                            height: 100%;
                            object-fit: contain;
                            display: block;
                        }
                    }
                }
            }
        }
    }
}
@keyframes fade-in {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
@media screen and (width < 900px) {
    #container {
        & #page-content {
            & section:nth-of-type(1) {
                & .inner-wrapper {
                    & > img {
                        grid-column: 1 / 6;
                    }
                    & .caption {
                        grid-column: 6 / 14;
                    }
                }
            }
            & section:nth-of-type(2) {
                & .inner-wrapper {
                    & > img {
                        grid-column: 8 / 13;
                    }
                    & .caption {
                        grid-column: 1 / 8;
                    }
                }
            }
            & section:nth-of-type(3) {
                & .inner-wrapper {
                    grid-template-columns: repeat(2, 1fr);
                }
            }
        }
    }
}
@media screen and (width < 500px) {
    #container {
        & #page-content {
            & section:nth-of-type(3) {
                & .inner-wrapper {
                    grid-template-columns: 1fr;
                }
            }
        }
    }
}