@media screen and (max-width: 500px) {

    .for-mobile {
        display: inline-block;
    }
    .for-desktop {
        display: none;
    }

    header {
        height: auto;
    }

   header .cover {
       width: 100%;
       height: auto;
    }
    header .cover svg {
        width: 100%;
        height: auto;
     }
    header .hero .wrapper {
        margin-top: 10vh;
        padding: 0 20px;
    }

    header .hero .wrapper h1 {
        font-size: 35px;
    }

    section .content {
        width: 100%;
        overflow-x: hidden;
    }

    section .content .row {
        display: flex;
        height: fit-content;
        flex-wrap: wrap;
    }

    section .content .row.reverse {
        flex-wrap: wrap-reverse;
    }

    section .content .row .column {
        width: 100%;
    }

    section .content .row .column > svg {
        height: 70%;
    }

    section .content .row .column.text {
        padding: 0 25px;
        height: fit-content;
        margin-top: -35%;
    }

    section.bottom .cover .wrapper {
    width: 90%;
    padding-top: 80px;
    }

    footer .wrapper .row {
        display: inline-block;
        height: auto;
        padding: 0 15px;
        width: 100%;
    }

    footer .wrapper .row .column  {
        width: 100%;
        height: auto;
    }

    .cookie-law .content .row {
        gap: 20px;
        width: fit-content;
        height: auto;
        display: inline-block;
        margin: 0 auto;
    }

    .cookie-law .content .row > div {
        width: 100%;
    }

    section.policy {
        padding: 0 15px;
    }

    div.overlay .modal-content {
        width: 300px;
        height: 600px;
        overflow-y: auto;
    }

}

@media screen and (min-width: 500px) and (max-width: 1024px) {
    header {
        height: auto;
    }

    div.overlay .modal-content {
        width: 400px;
        height: 600px;
        overflow-y: auto;
    }

    header .cover {
       width: 100%;
       height: auto;
    }

    header .cover svg{
        margin-left: -100vh;        
        height: auto;
    }
    
    section .content .row .column.text{
        margin-top: 0;
        height: fit-content;
    }

    section .content .row {
        display: flex;
        height: fit-content;
        flex-wrap: wrap;
    }

    section .content .row.reverse {
        flex-wrap: wrap-reverse;
    }
    section .content .row .column {
        width: 100%;
    }
    section .content {
        width: 100%;
    }

    section .content .row .column.text {
        padding: 25px;
    }

    section.bottom .cover .wrapper {
        width: 50%;
    }

}