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

@media (max-width: 600px) {

     .container,
    .hero,
    .home-section {
        width: min(calc(100% - 24px), 1440px);
    }

    .login-button {
        min-width: 82px;
        height: 38px;
    }

    .hero {
        height: 430px;
    }

    .hero__content {
        width: 100%;

        padding:
            0 12px;
    }

    .hero__title {
        font-size: 43px;
    }

    .hero__description {
        font-size: 13px;
    }

    .section-header {
        align-items: center;
    }

    .section-header h2 {
        font-size: 25px;
    }

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

        gap: 14px;
    }

    .popular-controls > a {
        display: none;
    }

    .recent-card {
        grid-template-columns:
            72px minmax(0, 1fr);

        min-height: 112px;

        padding: 12px;
    }

    .recent-card__poster {
        width: 72px;
        height: 88px;
    }

    .recent-card__title {
        font-size: 15px;
    }

    .site-footer__inner {
        flex-wrap: wrap;

        padding:
            25px 0;
    }

    .site-footer__nav {
        width: 100%;

        margin-left: 0;

        flex-wrap: wrap;
    }

    /* HEADER */

    .site-header {
        height: auto;
    }

    .site-header__inner {
        display: grid;
        grid-template-columns: 1fr auto;

        width: 100%;
        height: auto;

        padding: 0 12px;
    }


    /* LOGO */

    .site-logo {
        padding: 14px 0 12px;
    }

    .site-logo__name {
        font-size: 20px;
        letter-spacing: 6px;
    }

    .site-logo__subtitle {
        margin-top: 6px;

        font-size: 8px;
        letter-spacing: 4px;
    }


    /* SEARCH */

    .site-header__actions {
        margin: 0;

        display: flex;
        align-items: center;

        justify-self: end;
    }


    /* NAVIGATION */

    .site-nav {
        grid-column: 1 / -1;

        display: flex;
        align-items: center;
        justify-content: center;

        width: 100%;

        margin: 0;

        gap: 32px;

        border-top: 1px solid rgba(255, 255, 255, 0.06);
    }

    .site-nav__link {
        padding: 12px 0 14px;

        font-size: 12px;
        white-space: nowrap;
    }

    .site-nav__link--active::after {
        bottom: 7px;
    }
}