body {
    overflow-x: hidden;
}

main > section:not(:last-child) {
    border-bottom: lightgray 1px solid;
}

#hero {
    position: relative;

    & #hero-text-container {
        width: fit-content;
        padding: 0.75rem 7rem;
        border: 0.5rem white solid;
        border-radius: 20px;
    }

    & #hero-img {
        height: 101vh;
        width: 100vw;
        position: relative;
        background-image: url('https://imagedelivery.net/674o8qhbSH_VvvEqhrXjwA/5ac37623-eebf-495c-b09f-8545fa4f8b00/public');
        border-image: linear-gradient(
                hsl(240 100% 20% / 0.6),
                hsl(0 100% 20% / 0.6)
            )
            fill 1;
        background-size: cover;
        background-repeat: no-repeat;
        background-position: 50% 50%;
        min-block-size: 80vh;
        object-fit: cover;
        top: -5.05rem;
        display: grid;
        text-align: center;
        place-content: center;
        color: white;
    }
}

#hero-title {
    font-size: 4rem;
}

#hero-slogan {
    font-size: xx-large;
}

#hero-navigate-down {
    color: white;
    text-decoration: none;
    font-size: xx-large;
}

.poem-section-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    padding-top: 2rem;
}

.poem-section-container {
    & h2,
    & h3,
    & h4 {
        text-align: center;
    }
}

.poem-section-container {
    max-width: fit-content;
    margin: 0 auto;

    & hr.video-poem-split {
        display: none;
    }

    & > p.read-more-link {
        display: none;
    }

    & .poetry-video_iframe {
        width: 100%;
    }
}

.hero-img-gone {
    background-color: white !important;
    border-bottom: 1px lightgrey solid;
}

#poetry-twelve-steps {
    display: grid;
    text-wrap: wrap;
    max-width: 75ch;
    justify-self: center;

    & > figure {
        padding-inline: 1rem;
    }

    & h2 {
        text-align: center;
    }

    & h3 {
        margin-inline: 2rem;
    }

    & ul {
        list-style: number;

        & li {
            margin-block: 1rem;
        }
    }
}

#poemonger-landing-works {
    display: grid;
    justify-content: center;
    gap: 2rem;

    & h2,
    & h3 {
        text-align: center;
        max-width: 80vw;
        justify-self: center;
    }

    & .work-price {
        text-align: end;
    }

    & button.audio-poem_trigger,
    & button.video-poem_trigger {
        border: solid 1px hsl(33, 99%, 33%);
        background-color: unset;

        &:hover {
            background-color: hsl(var(--button-color), var(--button-color-l));
        }
    }

    & .button.work-description {
        background-color: hsl(45, 97%, 75%);

        &:hover {
            background-color: hsl(45, 97%, 50%);
        }
    }

    & .work-audio,
    & .work-video {
        text-align: center;
    }
}

footer {
    display: flex;
    gap: 2rem;
    width: 75vw;
    margin: 1rem auto;
    padding: 2rem 1rem;
    background-color: white;
    border-top: lightgrey 1px solid;
}

@media (width >=320px) and (width <=768px) {
    #hero-text-container {
        padding: 0.75rem !important;
    }

    footer {
        width: auto;
    }

    .poem-section-container {
        grid-template-columns: none;
        grid-template-rows: auto 3rem 3rem auto;
        padding-top: 0px;
        gap: 0.5rem;

        & .poem-content-container {
            order: 2;
            justify-self: center;
        }

        & .poem-video-section {
            display: grid;

            & h3 {
                align-self: center;
                margin: 0;
                padding: 1rem;
            }

            & .poetry-video_iframe {
                width: 101%;
            }
        }

        & p.read-more-link {
            display: block;
            padding-block: 1rem;
        }

        & hr.video-poem-split {
            display: inline;
            border: none;
            border-top: 3px double #333;
            color: #333;
            overflow: visible;
            text-align: center;
            height: 5px;
            width: 100%;
        }

        & hr.video-poem-split::after {
            background: #fff;
            content: 'Read the poem';
            padding: 0 4px;
            position: relative;
            top: -13px;
        }
    }
}

@media only screen and (width <=420px) {
    #hero-title {
        font-size: 3.5rem !important;
    }
}

@media only screen and (width <= 400px) {
    #hero-text-container {
        padding: unset !important;
        border: none !important;
        border-radius: unset !important;
    }
}