@media (max-width: 74em) {
    /* ********************* */
    /* PRICING SECTION*/
    /* ********************* */
    .pricing-option {
        width: 90%;
    }

    .package-benefits {
        margin-left: 4.4rem;
    }
}

@media (max-width: 70em) {
    /* ********************* */
    /* HERO SECTION*/
    /* ********************* */

    .hero {
        grid-template-columns: 5fr 11fr;
        gap: 7.4rem;
    }

    .hero-heading {
        font-size: 3.6rem;
    }

    .hero-heading-secondary {
        font-size: 2.4rem;
    }

    .hero-description {
        font-size: 1.4rem;
    }

    /* ********************* */
    /* MOBILE NAVIGATION*/
    /* ********************* */

    .btn-mobile-nav {
        display: block;
        z-index: 9999;
    }

    .header-right {
        background-color: white;
        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;*/
        /* Hide it visually */
        opacity: 0;

        /* Make it inaccessible to mouse and keyboard */
        pointer-events: none;

        /* Hide it from screen readers */
        visibility: hidden;
    }

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

    .nav-open ion-icon[name="close-outline"] {
        display: block;
    }

    .nav-open ion-icon[name="menu-outline"] {
        display: none;
    }

    .header-right {
        display: flex;
        align-items: flex-start; /* push content to the top */
        justify-content: center;
        padding-top: 6.2rem; /* add a little breathing room */
    }

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

    .btn--header:link,
    .btn--header:visited {
        font-size: 3rem;
    }

    /* ********************* */
    /* PRICING SECTION*/
    /* ********************* */

    .grid--3cols {
        grid-template-columns: repeat(2, 1fr);
        justify-items: center;
    }

    .student-course:nth-child(3) {
        grid-column: span 2; /* take full row */
        max-width: calc((100% - 5.2rem) / 2); /* match one column width */
        justify-self: center; /* center horizontally */
    }

    .package-benefit {
        font-size: 1.6rem;
    }
}

@media (max-width: 56em) {
    /* ********************* */
    /* HERO SECTION*/
    /* ********************* */

    .hero {
        gap: 5.2rem;
    }
    .hero-heading {
        font-size: 3rem;
    }

    .hero-heading-secondary {
        font-size: 2rem;
    }

    .hero-description {
        font-size: 1.2rem;
    }

    /* ********************* */
    /* PRICING SECTION*/
    /* ********************* */

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

    .pricing-option {
        width: 100%;
    }

    .package-benefits {
        margin-left: 2.4rem;
    }

    .package-benefit {
        font-size: 1.4rem;
    }

    .pricing-option--second::after {
        top: 4%;
        right: -10%;
    }

    /* ********************* */
    /* CTA SECTION*/
    /* ******************** */

    .cta-form {
        grid-template-columns: repeat(1, 1fr);
    }

    .cta-form button {
        margin-top: 2.4rem;
    }
    .cta-image {
        background-position: 43%;
    }

    /* ********************* */
    /* FOOTER SECTION*/
    /* ********************* */

    .copyright,
    .contact {
        font-size: 1.4rem;
    }
}

@media (max-width: 48em) {
    /* ********************* */
    /* HEADER SECTION*/
    /* ********************* */
    .header-row {
        height: 8.6rem;
        padding-top: 2.4rem;

        display: grid;
        grid-template-columns: 1fr auto;
        grid-template-rows: auto auto; /* or auto auto depending on content */
        align-items: center;
    }

    .header-left {
        grid-column: 1 / -1; /* span full width */
        justify-self: center;
        grid-row: 1;
    }

    .header-center {
        grid-column: 1;
        grid-row: 2;
    }

    .btn-mobile-nav {
        grid-column: 2;
        grid-row: 2;

        .hero {
            grid-template-columns: 6fr 10fr;
        }
    }

    .heading-primary {
        font-size: 1.8rem;
    }

    .header-center {
        gap: 2.4rem;
    }

    .lang-btn {
        height: 1.6rem;
    }

    .btn-mobile-icon {
        height: 1.6rem;
    }

    /* ********************* */
    /* HERO SECTION*/
    /* ********************* */

    .section-hero {
        margin-top: 3.6rem;
    }

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

    .hero-img {
        width: 100%;
        max-width: 30rem;
        height: auto;
        display: block;
        margin: 0 auto;
    }

    .btn-container {
        gap: 4.4rem;
    }

    /* ********************* */
    /* COURSES SECTION*/
    /* ********************* */

    .grid--3cols {
        grid-template-columns: repeat(1, 1fr);
    }

    .student-course:nth-child(3) {
        grid-column: auto; /* reset span */
        max-width: none; /* allow full width */
        justify-self: stretch; /* default behavior */
    }

    .student-course:hover {
        transform: translateY(0);
    }

    /* ********************* */
    /* PRICING SECTION*/
    /* ******************** */

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

    .package-benefit {
        font-size: 1.8rem;
    }

    .pricing-option--second::after {
        top: 5%;
        right: -5%;
    }

    /* ********************* */
    /* FOOTER SECTION*/
    /* ******************** */

    .footer {
        flex-direction: column;
        gap: 1.6rem;
    }

    .copyright,
    .contact {
        font-size: 1.8rem;
    }
}

@media (max-width: 38em) {
    /* ********************* */
    /* CTA SECTION*/
    /* ******************** */
    .cta {
        grid-template-columns: 1fr;
    }
    .cta-image {
        display: none;
    }
}

@media (max-width: 31em) {
    /* ********************* */
    /* ABOUT SECTION*/
    /* ******************** */

    .about-images {
        grid-template-columns: repeat(2, 1fr);
        gap: 2rem;
    }

    /* ********************* */
    /* PRICING SECTION*/
    /* ******************** */

    .package-benefit {
        font-size: 1.4rem;
    }

    .pricing-option--second::after {
        top: 5%;
        right: -9%;
    }
}

@media (max-width: 26em) {
    /* ********************* */
    /* PRICING SECTION*/
    /* ******************** */

    .package-benefit {
        font-size: 1.2rem;
    }

    .pricing-option--second::after {
        top: 4%;
        right: -15%;
    }

    .cta-text {
        line-height: 1.8rem;
    }
}