@media screen and (max-width: 768px) {
    body {
        background-position: initial !important;
        margin: 0 auto;
        display: block;
        min-height: auto;
        font-size: 15px;
        background-image: url('../img/image-mobile-ham.jpg');
    }

    footer {
        margin-top: 2rem;
    }

    section#sm .socials .figure {
        width: 10rem;
        height: 10rem;
        top: -5rem;
        right: 0;
    }

    section#sm .socials .socials-item a img {
        height: 8.5rem;
    }


}


@media screen and (max-width: 500px) {
    section#sm .socials {
        padding: 4rem 0.9rem 0.9rem 0.9rem;
        margin-top: 4rem;
    }

    section#mw .miwula {
        padding: 0.05rem 0.9rem 1rem 0.9rem;
        margin-top: 2rem;
    }

    section#sm .socials .figure {
        display: none;
    }

    section {
        margin: 0 auto;
        padding: 0 1rem;
        text-align: left;
        margin: 1.3rem 0;
    }
    .flag h1 {
        display: inline-block;
        padding: 9px 16px 10px 16px;
        background-color: rgb(120,212,255);
        box-shadow: rgb(0,32,64) 4px 4px 0px;
        transform: rotate(-4deg);
        width: fit-content;
        position: absolute;
        top: -3rem;
        left: 1rem;
    }
}