@media (max-width: 900px) {

    .container {
        width: min(
            100% - 1.5rem,
            var(--container-width)
        );
    }

   /* =========================
       NAVBAR
       ========================= */

    .navbar__toggle {
        display: block;
    }

    .navbar__menu {
        display: none;

        position: absolute;
        top: var(--navbar-height);
        left: 0;
        right: 0;

        flex-direction: column;
        align-items: stretch;

        padding: var(--space-4);

        background-color: var(--color-primary);

        box-shadow: var(--shadow-md);
    }

    .navbar__menu.is-open {
        display: flex;
    }

    .navbar__link {
        padding: var(--space-3);
    }


    /* =========================
       FOOTER
       ========================= */

    .footer__grid {
        grid-template-columns: 1fr;

        gap: var(--space-5);
    }


    /* =========================
       HERO
       ========================= */

    .hero__inner {
        grid-template-columns: 1fr;

        gap: var(--space-7);

        padding-top: var(--space-7);
        padding-bottom: var(--space-7);
    }

    .hero__content {
        max-width: 720px;
    }

    .hero__visual {
        width: 100%;
        max-width: 520px;

        margin-inline: auto;
    }


    /* =========================
       ABOUT
       ========================= */

    .about {
        padding: var(--space-8) 0;
    }

    .about__grid {
        grid-template-columns: 1fr;

        gap: var(--space-7);
    }

    .about__visual {
        max-width: 520px;

        margin-inline: auto;
    }

    .about__content {
        max-width: 720px;
    }


    /* =========================
       EDUCATION
       ========================= */

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


    /* =========================
       ACHIEVEMENTS
       ========================= */

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


    /* =========================
       EVENTS
       ========================= */

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


/* =========================
   TABLET / SMALL SCREEN
   <= 768px
   ========================= */

@media (max-width: 768px) {

    .hero__logo {
        width: 140px;
    }
}


/* =========================
   ANNOUNCEMENTS
   <= 700px
   ========================= */

@media (max-width: 700px) {

    .announcements {
        padding: var(--space-7) 0;
    }

    .announcement {
        grid-template-columns:
            64px minmax(0, 1fr);

        gap: var(--space-4);

        padding: var(--space-5) 0;
    }

    .announcement__day {
        font-size: 1.6rem;
    }

    .announcement__action {
        grid-column: 2;
    }
}


/* =========================
   MOBILE
   <= 600px
   ========================= */

@media (max-width: 600px) {

    /* =========================
       HERO
       ========================= */

    .hero {
        min-height: auto;
    }

    .hero__inner {
        padding-top: var(--space-6);
        padding-bottom: var(--space-7);
    }

    .hero h1 {
        font-size: clamp(
            2.5rem,
            13vw,
            3.5rem
        );
    }

    .hero__description {
        font-size: var(--font-size-base);
    }

    .hero__actions {
        flex-direction: column;
        align-items: stretch;
    }

    .button {
        width: 100%;
    }

    .hero__visual-card {
        transform: none;
    }


    /* =========================
       ABOUT
       ========================= */

    .about {
        padding: var(--space-7) 0;
    }

    .about__feature {
        padding: var(--space-3);
    }


    /* =========================
       EDUCATION
       ========================= */

    .education {
        padding: var(--space-7) 0;
    }

    .section-heading {
        margin-bottom: var(--space-6);
    }

    .education__grid {
        grid-template-columns: 1fr;
    }

    .education-card {
        min-height: 0;
    }


    /* =========================
       ACHIEVEMENTS
       ========================= */

    .achievements {
        padding: var(--space-7) 0;
    }

    .achievements__grid {
        grid-template-columns: 1fr;
    }

    .achievement-card {
        min-height: 260px;
    }


    /* =========================
       EVENTS
       ========================= */

    .events {
        padding: var(--space-7) 0;
    }

    .events__grid {
        grid-template-columns: 1fr;
    }


    /* =========================
       CONTACT CTA
       ========================= */

    .contact-cta {
        padding: var(--space-7) 0;
    }

    .contact-cta__actions {
        flex-direction: column;
        align-items: stretch;
    }

    .contact-cta__actions .btn {
        width: 100%;
    }
}


/* =========================
   REDUCED MOTION
   ========================= */

@media (prefers-reduced-motion: reduce) {

    [data-scroll] {
        opacity: 1;

        transform: none;

        transition: none;
    }

    .education-card,
    .achievement-card,
    .event-card,
    .announcement,
    .education-card__link {
        transition: none;
    }

    .education-card:hover,
    .achievement-card:hover,
    .event-card:hover,
    .announcement:hover {
        transform: none;
    }
}


/* =========================
   HOVER DEVICES
   ========================= */

@media (hover: hover) and (pointer: fine) {

    .education-card,
    .achievement-card,
    .event-card {
        transition:
            transform 0.3s ease,
            box-shadow 0.3s ease;
    }

    .education-card:hover,
    .achievement-card:hover,
    .event-card:hover {
        transform: translateY(-6px);

        box-shadow:
            0 12px 30px rgba(0, 0, 0, 0.12);
    }
}

/* =========================
   REDUCED MOTION
   ========================= */

@media (prefers-reduced-motion: reduce) {

    .error-page .button {
        transition: none;
    }

    .error-page .button:hover {
        transform: none;
    }
}