/* ===========================
   Tablet
=========================== */

@media (max-width:1024px){

    .features{

        grid-template-columns:repeat(2,1fr);

    }

}

/* ===========================
   Smartphone
=========================== */

@media (max-width:768px){

    .header-hero{

        width:70%;

    }

    .header-container{

        display:grid;

        grid-template-columns:auto 1fr;

        gap:var(--spacing-sm) var(--spacing-md);

        padding:var(--spacing-sm) var(--spacing-md);

    }

    .header-logo{

        grid-column:1;

        grid-row:1;

        align-self:center;

    }

    .header-actions{

        grid-column:2;

        grid-row:1;

        justify-self:end;

    }

    .menu-toggle{

        display:flex;

    }

    #navigation{

        grid-column:1 / -1;

        grid-row:2;

        flex-direction:column;

        align-items:stretch;

        width:100%;

        max-height:0;

        overflow:hidden;

        gap:0;

        transition:max-height .25s ease;

    }

    .header-container.nav-open #navigation{

        max-height:24rem;

        padding-top:var(--spacing-sm);

    }

    #navigation a{

        display:block;

        font-size:16px;

        padding:.75rem 0;

        text-align:center;

        border-top:1px solid rgba(255,255,255,.25);

    }

    #navigation a.active{

        border-bottom:0;

        font-weight:700;

        text-decoration:underline;

        text-underline-offset:0.35em;

    }

    .language-current{

        max-width:9rem;

        overflow:hidden;

        text-overflow:ellipsis;

    }

    .features{

        grid-template-columns:1fr;

    }

    main{

        padding:1rem;

    }

    .hero{

        padding:3rem 0;

    }

    .course-table{

        min-width:640px;

    }

}