.hero-banner {
    background-image: var(--bg-mobile);
    aspect-ratio: var(--bg-mobile-ratio);
    background-size:contain;
    background-position:center;
    background-repeat: no-repeat;
    display: flex;
    flex-direction: column;
    justify-content: end;
    width:100%;
    padding-left: var(--pad-sides);
    padding-right: var(--pad-sides);    
}

.hero-banner .wrapper .img {
    aspect-ratio: var(--img-mobile-ratio);
    width: 100%;
}

@media (min-width:1024px) {

    .hero-banner {
        background-image: var(--bg-desktop);
        aspect-ratio: var(--bg-desktop-ratio);
        justify-content: center;
    }
    .hero-banner .wrapper {
        display:flex;
        padding-left:var(--pad-sides);
        padding-right:var(--pad-sides);
    }
    .hero-banner .wrapper a {
        width:50%;
    }
    .hero-banner .wrapper a .img {
        aspect-ratio:var(--img-desktop-ratio);
    }

}

@media (min-width:1200px) {

    .hero-banner .wrapper {
        max-width:var(--max-width);
        margin-left:auto;
        margin-right:auto;
    }

}

@media (min-width:2560px) {
    .hero-banner .wrapper a {
        width:60%;
    }
}