@media (max-width: 768px) {
    header {
        flex-wrap: wrap;
        gap: 14px;
    }

    header #site-name {
        font-size: 22px;
    }

    header nav {
        gap: 22px;
    }

    header > span {
        order: 1;
        width: 100%;
        margin: 0;
        padding: 8px 0 0;
    }

    #registration-form,
    #login-form,
    #change-email-form,
    #change-password-form,
    #register-product-form,
    #edit-product-form,
    #contact-form,
    #request-reset-password-form,
    #reset-password-form {
        padding: 32px 24px;
    }

    #container-product-list {
        margin: 32px auto;
        gap: 20px;
    }

    #account-container-index {
        margin: 48px auto;
    }
}

@media (max-width: 480px) {
    header {
        padding: 0.875rem 1rem;
    }

    header #site-name {
        font-size: 20px;
        margin-left: 6px;
    }

    header nav {
        gap: 14px;
    }

    header nav a {
        font-size: 13px;
        letter-spacing: 0.5px;
    }

    #registration-form,
    #login-form,
    #change-email-form,
    #change-password-form,
    #register-product-form,
    #edit-product-form,
    #contact-form,
    #request-reset-password-form,
    #reset-password-form {
        padding: 24px 18px;
    }

    #registration-form h1,
    #login-form h1,
    #change-email-form h1,
    #change-password-form h1,
    #contact-form h1,
    #request-reset-password-form h1,
    #reset-password-form h1,
    #register-product-form h1,
    #edit-product-form h1 {
        font-size: 22px;
    }

    #account-container-index {
        margin: 40px auto;
    }

    #account-container-index h1 {
        font-size: 1.4rem;
    }

    #container-product-list {
        margin: 24px auto;
        padding: 0 16px;
    }

    #container-product-list h1 {
        font-size: 22px;
    }

    #container-product-list .container-product {
        flex-basis: 100%;
        max-width: 100%;
    }
}