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

    /***** Structure *****/
    #homepageHeader {
        position: relative;
        width: 100%;
        height: 42em;
    }
    #homepageHeader {
        display: grid;
        grid-template-rows: 50% 50%;
        align-items: center;
        justify-items: center;
    }

    /***** Blocks *****/
    #headerMoonlight, #headerShadow {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    #headerMoonlight, #headerShadow {
        width: 100%;
        height: 100%;
    }

    /***** Blocks / Backgrounds *****/
    .headerBlockBackground {
        position: absolute;
    }
    .headerBlockBackground {
        width: 100%;
        height: 100%;
    }
    .headerBlockBackground {
        object-fit: cover;
    }

    /***** Blocks / Fighters *****/
    .headerBlockFighter {
        position: absolute;
        bottom: 0;
    }
    .headerBlockFighter {
        width: auto;
        height: 95%;
    }
    .headerBlockFighter {
        object-fit: cover;
    }
    .moonlightFighter {
        right: 1.5em;
    }
    .shadowFighter {
        left: 1.5em;
    }
    
    /***** Blocks / Gradient *****/
    .headerGradient {
        position: absolute;
        bottom: 0;
    }
    .headerGradient {
        width: 80%;
        height: 100%;
    }
    #headerMoonlight .headerGradient {
        left: 0;
    }
    #headerShadow .headerGradient {
        right: 0;
    }
    #headerMoonlight .headerGradient {
        background: #000;
        background: linear-gradient(90deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 80%, rgba(0, 0, 0, 0) 100%);
    }
    #headerShadow .headerGradient {
        background: #000;
        background: linear-gradient(-90deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 80%, rgba(0, 0, 0, 0) 100%);
    }

    /***** Blocks / Button (whole block clickable) *****/
    .headerBlockButton {
        position: absolute;
    }
    .headerBlockButton {
        width: 100%;
        height: 100%;
    }

    /***** Blocks / Details *****/
    .headerBlocktext {
        position: absolute;
    }
    #headerMoonlight .headerBlocktext {
        left: 1.5em;
    }
    #headerShadow .headerBlocktext {
        right: 1.5em;
    }
    .headerBlocktext {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 10px;
    }
    .headerBlocktext img {
        width: auto;
        height: 4.2em;
    }

    /***** Blocks / Sidelines *****/
    #homepageHeader h5 {
        display: none;
    }


    /***** Background *****/
    #headerBackground {
        position: absolute;
    }
    #headerBackground {
        width: 100%;
        height: 100%;
    }
    #headerBackground {
        background-color: var(--primary);
    }
    #headerBackground {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    #headerBackground img {
        width: auto;
        height: 5em;
    }

    /***** Arrows *****/
    #headerArrows {
        position: absolute;
    }
    #headerArrows div {
        margin: 6em 0;
        animation: arrowsLoop 1s ease-in-out infinite alternate;
    }
    #headerArrows div {
        background: #eee;
        background: radial-gradient(circle, rgba(238, 238, 238, 1) 50%, rgba(221, 221, 221, 1) 100%);
        padding: 20px 3px;
        border-radius: 50px;
        box-shadow: 0 0 10px #000;
    }
    #headerArrows div {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 20px;
    }
    #headerArrows div svg {
        width: 30px;
        height: auto;
    }
    #headerArrows div svg {
        color: var(--primary);
    }



}