@media (min-width: 1001px) and (max-width: 1271px) {
    html {
        font-size: 12px;
    }
}

@media (max-width: 1000px) {
    :root {
        --section-margin: 5rem;
    }

    h1 {
        font-size: 2.5rem;
    }

    #intro-person-image {
        display: none !important;
    }

    #intro {
        text-align: center;
        height: 59rem;
    }

    #intro .grid-col-two {
        display: flex !important;
        flex-direction: column;
        align-items: center;
        justify-items: center;
    }

    #intro-contents p {
        width: 100%;
    }

    #shapes-background {
        display: none;
    }

    #shapes-background-mobile {
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 60rem;
        background-image: url('../images/mobile-shapes-intro.svg');
        background-size: cover;
        background-position: center;
        z-index: -3;
    }

    #sticky-note-grid {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 8rem;
    }

    .double-col-buttons {
        flex-direction: column;
        align-items: center;
        gap: 1.5rem;
    }

    #network-logos img {
        width: 5.125rem;
        height: 100%;
    }

    #video-frame {
        position: relative;
        /* width: 100%; */
        /* height: 100%; */
        width: 100% !important;
        height: 17.067rem;
        margin: 2rem auto 4rem auto;
        /* aspect-ratio: 16 / 9; */
        background: #000;
        border-radius: 2.313rem;
        overflow: hidden;
    }

    #level-up-marketing {
        background-image: none;
    }

    #marketing-button-wrapper {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 1.5rem;
        margin-top: 0rem !important;
    }

    #marketing-button-wrapper> :nth-child(2n) {
        margin-top: 0rem !important;
    }

    #footer {
        height: 90rem;
        margin-top: 0rem;
    }

    #footer::before {
        width: 100%;
        height: 85%;
        clip-path: polygon(0 0, 100% 15%, 100% 100%, 0 100%);
    }

    .footer-links {
        display: flex;
        flex-direction: column;
    }

    #footer-content {
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding-top: 110%;
        gap: 2rem;
    }

    #footer-content>img {
        margin-top: 4rem;
    }

    #level-up-marketing {
        height: 100%
    }

    #shapes-background-footer {
        display: none;
    }

    #shapes-background-footer-mobile {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 90%;
        background-image: url('../images/mobile-shapes-footer.svg');
        background-size: cover;
        background-position: center;
        z-index: -1;
    }

    #level-up-marketing {
        margin: 0;
    }
}