@media only screen and (min-device-width: 320px) and (max-device-width: 480px)
{
    .content {
        width: 100%;
    }

    .hero {
        background: #004FCE url("../images/medium-shot-woman-with-laptop-coffee-shop.png") no-repeat top/100% 50%;
    }

    .hero-content {
        padding: .2em 8%;
        text-align: center;
        width: 84%;
        height: 100%;
        align-items: center;
        justify-content: flex-end;
    }

    .hero-content h1  {
        font-size: 1.6rem;
    }

    .how-to {
        padding: 1em 8%;
        width: 84%;
    }

    .how-to article {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(8em, 1fr));
        row-gap: 2em;
        column-gap: 1em;
        padding: 0;
    }

    .specifications .content {
        width: 96%;
        padding: 2%;
    }

    .specifications .content article {
        flex-direction: column;
        margin-top: 1em;
    }

    .specifications .content h2 {
        padding: 0 5em;
    }

    .how-to h1, .specifications .content h1 {
        font-size: 1.2rem;
    }

    .hero-content h2, .how-to h2, .specifications .content h2 {
        font-size: .9rem;
        font-weight: 500;
    }

    .hero-content > * {
        margin: .8em 0;
    }

    .hero-content button {
        margin-bottom: 2.5em;
    }

    footer section {
        flex-direction: column-reverse;
        padding: 1.5em 0;
    }

    .contacts {
        justify-content: space-between;
        flex-wrap: nowrap;
        padding: 0;
    }

    .contact {
        justify-content: center;
        margin: auto;
    }

    .social-media {
        justify-content: center;
        padding: 0;
        margin-bottom: 1em;
    }

    .logo {
        padding: 1.5em 0;
    }

    .logo img {
        width: 15em;
    }

    .try-now {
        padding: 2em 0;
    }

    .try-now h1 {
        font-weight: 700;
        font-size: 2rem;
    }

    .try-now h2 {
        padding: 0 2.5em;
        font-size: 1.4rem;
        font-weight: 600;
    }

    .specifications .content article {
        padding: 1em 2.5em;
    }

    .specifications .content article > * {
        margin-bottom: 2em;
    }

    .specifications .content article div:last-of-type {
        margin-bottom: 0;
    }

    .specifications .content article div img {
        width: 2.5em;
    }

    .specifications .content article div h6, .specifications .content article div p  {
        font-size: 1em;
        padding: 0;
    }

    .how-to article div div {
        font-size: 1.5rem;
        width: 1.8em;
        height: 1.8em;
        margin-bottom: .5em;
    }

    .how-to article div p {
        font-size: .8rem;    
        padding: 0 .7em;
    }
}