.Header__Background {
    /* mobile-first */
    height: 5em;
}

@media (min-width: 640px) {

}

@media only screen and (min-width: 900px) {

}

.Header__Logo {
    position: absolute;
    top: 50%;
    left: 50%;
    max-width: 50%;
    transform: translate(-50%, -50%);
    z-index: 3;
}

@media (min-width: 900px) {

    /* wide-enough for full Hero */
    .Header__Logo {
        position: absolute;
        top: 50%;
        left: 50%;
        max-width: 50%;
        transform: translate(-50%, -50%);
    }
}

.Header__Logo img {
    height: 80px;
    /* mobile-first */
}

@media only screen and (min-width: 600px) {
    /* Desktop */
    .Header__Logo img {
        height: 120px;
    }
}

@media only screen and (min-width: 900px) {
    /* Desktop */
    .Header__Logo img {
        height: 200px;
    }
}

/* LOGO */
@media (min-width: 900px) {

    /* wide-enough for full Hero */
    .Layout__MainContainer.Layout__PaymentPortal .Header__Logo {
        left: 50px;
        top: 5rem;
    }
}