.page-section {
    flex: 1 0 auto;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: stretch;

    margin: 2.5em 0;

    & > .anchor-section {
        flex: 1 1 auto;
        padding: 0 8em;
        font-size: 1.25em;

        & > h1 {
            font-family: "EB Garamond", serif;
            font-size: 2.5em;

            margin: 0;
            paddng: 0;

            color: #1e293b;
        }
    }

    & > aside {
        flex: 0 1 auto;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        justify-content: stretch;
        border-radius: 100vh 0 0 100vh;

        color: white;

        font-family: "EB Garamond", serif;
        font-size: 2em;

        & > .aside-content {
            flex: 0 1 auto;
            background-color: #0B1223BB;
            padding: 5em 5em 5em 6em;
            border-radius: 100vh 0 0 100vh;

            &.compact {
                font-size: 0.8em;
                padding: 0.5em 0.5em 0.5em 3em;
            }

            & > .hero-text {
                font-size: 2em;
                text-transform: uppercase;
                line-height: 1em;
            }
        }
    }

    &.flipped {
        & > aside {
            border-radius: 0 100vh 100vh 0;

            & > .aside-content {
                padding: 5em 6em 5em 5em;
                border-radius: 0 100vh 100vh 0;

                &.compact {
                    padding: 0.5em 3em 0.5em 0.5em;
                }
            }
        }
    }
}

@media screen and (max-width: 1200px) {
    .page-section {
        font-size: 0.7em;
    }
}

@media screen and (max-width: 900px) {
    .page-section {
        flex-direction: column;
        align-items: stretch;
        margin: 0 0 2em 0;

        & > .anchor-section {
            padding: 2em;

            & > h1 {
                font-size: 2em;
            }
        }

        & > aside {
            text-align: center;
            margin: 0 0 0 1em;

            & > .aside-content {
                padding: 2em 1em 2em 3em;

                &.compact {
                    font-size: 1em;
                }

                & > .hero-text {
                    font-size: 1.25em;
                }
            }
        }

        &.flipped {
            & > aside {
                margin: 0 1em 0 0;

                & > .aside-content {
                    padding: 2em 3em 2em 1em;
                }
            }
        }
    }
}