@media (prefers-color-scheme: dark) {
    .bg_wrapperx {
        background-color: #0d0a0b;
        color: #e8e9f3;
    }
}
@media screen and (min-width: 4000rem) {
    h1 {
        font-size: 3.6vw;
    }

    h2 {
        font-size: 2.8vw;
    }

    h3, .fIcona:before {
        font-size: 2vw;
    }

    div.slogan h1 {
        font-size: 4vw;
    }
}
@media screen and (max-width: 1023px) {
    .grid4x {
         grid-template-columns: 1fr 1fr;
         grid-gap: 2.25rem;    
    }            
}
@media screen and (max-width: 720px) {
    header {
        display: flex;
        width: 100%;
    }
    .bg_wrapper,
    .header_slogan_wrapper {
        background-repeat: no-repeat;
        background-position: 100% 50%;
        background-attachment: scroll;
        background-size: cover;
        margin: 0 auto;
        display: flex;
        flex-direction: column;
        padding: 1rem;
        color: #f8f8f8;
    }

    .bg_wrapper .content_left {
        -ms-grid-column: 2 / -2;
        grid-column: 2 / -2;
        -ms-justify-self: center;
        justify-self: center;
    }

    .bg_wrapper .content_right {
        -ms-grid-column: 2 / -2;
        grid-column: 2 / -2;
        -ms-justify-self: center;
        justify-self: center;
    }

    .bg_wrapper .teaser_right {
        -ms-grid-column: 2 / -1;
        grid-column: 2 / -1;
        -ms-justify-self: center;
        justify-self: center;
    }

    .bg_wrapper .teaser_left {
        -ms-grid-column: 1 / -2;
        grid-column: 1 / -2;
        -ms-justify-self: center;
        justify-self: center;
    }
    .content_full {
         grid-column: 2 / 3;
    }
    .w-50 {
        width: 66%;
    }
}
@media screen and (max-width: 480px) {
    body {
        font-size: calc(24px + (28 - 18) * ((100vw - 480px) / (1600 - 480)));    
    }    
    h1 {
        font-size: 8vw;
    }

    h2 {
        font-size: 7vw;
    }

    h3, .fIcona:before {
        font-size: 6vw;
    }

    div.slogan h1 {
        font-size: 8vw;
    }    
    .grid4x {
         grid-template-columns: 1fr 1fr;
         grid-gap: 1.25rem;    
    }      
    .singleFeatures {
        aspect-ratio: auto;
    }
    .w-50 {
        width: 94%;
    }    
}
@media screen and (max-width: 375px) {
    body {
        font-size: calc(24px + (28 - 18) * ((100vw - 480px) / (1600 - 480)));    
    }
    h1 {
        font-size: 8vw;
    }

    h2 {
        font-size: 7vw;
    }

    h3, .fIcona:before {
        font-size: 6vw;
    }

    div.slogan h1 {
        font-size: 8vw;
    }    
    .grid4x {
         grid-template-columns: 1fr;
         grid-gap: 1.25rem;    
    }      
    .singleFeatures {
        aspect-ratio: auto;
    }
}