/*specific pages CSS*/

.language-switcher {
    display: grid;
    grid-template-columns: 1fr;
    row-gap: 0.75rem;
    border-radius: 0.5rem;
    background-color: var(--wp--preset--color--light-grey);
}
.switcher-button {
    display: flex;
    justify-content: center;
}
.switcher-hidden {
    display: none;
}
.language-switcher.open .switcher-hidden {
    display: flex;
}
.flag-icon {
    width: 2rem;
    height: auto;
}

/*hero------------------------------------------*/
.sleepinurbania {
    background-image:
    linear-gradient(135deg, transparent 40%, rgba(0,0,0,0.85) 100%),
    var(--bg-image);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
    width: 100%;
    min-height: 36rem;
    display: grid;
    grid-auto-flow: column;
    align-items: center;
    justify-items: end;
    padding: 6rem 15%;
    border-bottom: solid 0.2rem var(--wp--preset--color--light-grey);
}
.sleepinurbania .two-columns {
    --logo-font-size: clamp(1.5rem, 12cqi, 10rem);
    --logo-line-height: 1;

    container-type: inline-size;
    margin-bottom: 2rem;
}
.sleepinurbania .two-columns img {
    display: block;

    height: calc(var(--logo-font-size) * 2 * var(--logo-line-height));
    width: auto;

    object-fit: contain;
}
.sleepinurbania h1 {
    margin: 0;
    max-width: 100%;
    font-size: var(--logo-font-size);
    line-height: var(--logo-line-height);
    white-space: nowrap;
}
.sleepinurbania h1 strong{
    letter-spacing: -0.03em;
}
.sleepinurbania p {
    text-align: center;
    color: var(--wp--preset--color--white);
}
.sleepinurbania h3 {
    margin: 1rem auto;
}
.sleepinurbania .infographic {
    display: block;
}





@media (max-aspect-ratio: 4/3) {

}





@media(max-aspect-ratio: 2/3) {
    .sleepinurbania {
        min-height: 45rem;
        padding: 6rem 15% 3rem 15%;
    }
    .sleepinurbania h1 {
        margin: 0;
        color: var(--wp--preset--color--black);
    }
    .sleepinurbania .one-column {
        height: 100%;
        display: flex;
        flex-direction: column;
    }
    .sleepinurbania .one-column > .two-columns {
        flex: 0 0 auto;
    }

    .sleepinurbania .one-column > .three-columns {
        margin-top: auto;
    }

    .sleepinurbania .one-column > .button {
        flex: 0 0 auto;
    }

}