@media screen and (max-width: 420px) {
    body {
        /* background-color: red; */
    }

    .logo {
        width: 300px;
    }

    .content {
        padding: 20px 0;
    }

    .container__title {
        font-size: 32px;
        margin-bottom: 8px;
    }

    .footer {
        height: auto;
    }

    .footer__link {
        width: 100%;
        padding-bottom: 20px;
    }

    .footer__values {
        font-size: 20px;
        padding-top: 15px;
        padding-bottom: 15px;

        background-color: rgba(0, 0, 0, .2);
        border-radius: 0;
    }

    .footer__container {
        flex-direction: column-reverse;
    }
}

@media (hover: none) and (orientation: landscape) {
    .footer__values,
    .footer__link {
        width: 48%;
    }

    .footer__values {
        font-size: 20px;

        margin-left: 4%;
    }
}