/* Pages */
main.home {
    section.landing {
        position: sticky;
        top: 0;
        width: 100%;
        background-color: var(--white);
        scroll-snap-align: start;

        @media (max-width: 800px) {
            position: relative;
        }

        .section-inner {
            padding: 3rem 1rem;
            min-height: 100vh;
            display: grid;
            grid-template-columns: 1fr 1fr;
            place-items: center;
            gap: clamp(2rem, 9vw, 10rem);

            @media (max-width: 800px) {
                padding: 6rem 1rem;
                grid-template-columns: 1fr;
            }

            .landing-inner {
                display: flex;
                flex-direction: column;
                gap: 4rem;

                @media (max-width: 800px) {
                    gap: 2rem;
                }
            }
        }

        .h1, .h4, p {
            color: var(--black);
        }

        .series-image {
            width: 100%;
            flex-grow: 1;
            display: flex;
            place-items: center;
            justify-content: center;

            img {
                width: 100%;
                max-width: 1400px;
            }
        }
    }

    section.page-content {
        background-color: var(--black);
        position: relative;
        z-index: 3;
        scroll-snap-align: start;

        .section-inner {
            padding: 1rem 1rem 8rem 1rem;
            gap: 6rem;
        }
    }
}

main.admin {
    display: flex;
    flex-direction: column;
    gap: 2rem;

    .section-inner {
        padding: var(--page-padding);
    }

    section.admin-header {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .button:not(.active) {
            background-color: var(--black);
            color: var(--white);

            &:hover {
                background-color: var(--white);
                color: var(--black);
            }
        }
    }

    section.admin-table {
        table {
            width: 100%;
            text-align: left;
            table-layout: fixed;

            .handle {
                cursor: move;
            }

            tr {
                border-bottom: 1px solid var(--white);
                padding: 0.75rem 0;
                display: grid;
                place-items: start;
                grid-template-columns: 1fr 1fr 1fr 1fr;
                gap: 2rem;
            }

            .h3 + .h3 {
                margin-top: 0;
            }
        }
    }
}

main.form {
    padding: var(--page-padding);
    width: 100%;

    .h3 {
        margin-bottom: 2rem;
    }

    h1 {
        grid-column: span 2/4;
    }

    form {
        grid-column: span 2/4;
        width: 100%;
    }

    .button {
        background-color: var(--black);
        color: var(--white);

        &:hover {
            background-color: var(--white);
            color: var(--black);
        }
    }
}

main.about {
    .section-inner {
        padding: var(--page-padding);
    }
}

main.guests, main.events {
    .section-inner {
        padding: var(--page-padding);
    }
}