@media (max-width: 88.75em) {

    .primary-header {
        font-size: 5.4rem;
    }
}

@media (max-width: 78.12rem) {

    html {
        font-size: 56.25%;
    }

    .container {
        max-width: 110rem;
    }

    .heading-secondary {
        font-size: 4.0rem;
    }

    .heading-tertiary {
        font-size: 2.4rem;
    }
}

@media (max-width: 63.12rem) {

    html {
        font-size: 50%;
    }

    .main-nav-list {
        gap: 3.2rem;
    }
}

@media (max-width: 56.87rem) {

    .heading-secondary {
        margin-bottom: 4.8rem;
    }

    .btn-mobile-nav {
        display: block;
        z-index: 9999;
        justify-self: end;
        margin-right: 4rem;
    }

    .main-nav {
        background-color: rgba(255, 255, 255, 0.9);
        backdrop-filter: blur(10px);
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        transform: translateX(100%);

        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.5s ease-in;

        opacity: 0;

        pointer-events: none;

        visibility: hidden;
        z-index: 9999;
    }

    .nav-open .icon-mobile-nav.closed {
        display: none;
    }

    .nav-open .icon-mobile-nav.open {
        display: block;
    }

    .main-nav-list {
        flex-direction: column;
        gap: 4.8rem;
    }

    .main-nav-link:link, .main-nav-link:visited {
        font-size: 3rem;
        color: #101720;
    }

    .main-nav-link:hover, .main-nav-link:active {
        color: #e277cd;
    }

    .main-nav-link.cta:link, .main-nav-link.cta:visited {
        color: white;
    }

    .main-nav-link.cta:hover, .main-nav-link.cta:active {
        color: white;
        background-color: #b55fa4;
        scale: 1.05;
    }

    .nav-open .main-nav {
        opacity: 1;
        pointer-events: auto;
        visibility: visible;
        transform: translateX(0);
    }
}

@media (max-width: 44.68rem) {

    .footer-grid {
        gap: 3rem
    }
}

@media (max-width: 37.63rem) {

    .footer {
        padding: 6.4rem 0;
        border-top: 1px solid #eee;
    }

    .footer-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .footer-cert {
        grid-column: 1 / -1;
        text-align: center;
    }
}