/* HERO */

.hero {
    margin-top: calc(var(--space-sm) + var(--space-xxl));
}

.hero.is-subpage {
    margin-top: (var(--space-xxl));
}

.hero.is-subpage img {
    width: 100%;
    height: calc(1.5 * var(--slider-element-height));
    object-fit: cover;
}

.hero-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: var(--space-l);
}

.hero-grid div {
    background-color: var(--light);
    padding-top: var(--space-m);
    margin-top: calc(var(--space-m) * -3);
}

.hero-slider {
    position: relative;
}

.hero-slider-content-wrapper {
    position: absolute;
    right: 0;
    overflow: hidden;
    display: flex;
    flex-direction: row;
    max-width: 40rem;
}

.hero-slider-content {
    display:none;
    width: 100%;
}

.is-highlight {
    background-color: var(--yellow);
    display: flex;
    height: fit-content;
    position: relative;
    flex: 0 0 calc(100% - var(--space-l));
    width: 40vw;
    padding: var(--space-m);
    flex-direction: column;
    gap: var(--space-sm);
}

.hero-slider-content-first-line {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.hero-slider-content svg {
    height: var(--space-sm);
    transition: transform 0.3s ease-out;
}

.hero-slider-content svg {
    height: var(--space-sm);
    transition: transform 0.3s ease-out; /* Smooth transform transition */
}

.hero-slider-content h2 {
    max-width: 75%;
}

/* SECTIONS */

.section-dark {
    color: white;
    background-color: var(--dark);
}

.section-grey {
    background-color: var(--medium-almost-light);
}

.is-with-overlay {
    padding-bottom: calc((var(--slider-element-height) / 2) + var(--space-m)) !important;
}

.is-under-overlay {
    padding-top: calc((var(--slider-element-height) / 2) + var(--space-xl))!important;
    background-color: var(--medium-almost-light);
}

.is-under-divider {
    padding-top: 0px!important;
}

.is-under-divider-2 {
    padding-top: var(--space-l)!important;
}

.section-dark p {
    color: white;
    opacity: 0.8;
}

.section-yellow {
    background-color: var(--yellow);
}

#casambi img {
    max-height: 30rem;
    width: auto;
    margin-left: auto;
}

#casambi .layout-1-2 {
    align-items: center;
}

#squash-court {
    object-position: 0% 30%;
}


/* Breakpoints */

@media screen and (max-width: 67.5rem) {

    #casambi img {
        margin-left: 0;
    }

    .hero-grid, .layout-1-2 {
     grid-template-columns: 1fr;
     gap: var(--space-m);
    }

    .layout-1-1-m, .layout-2-1 {
        grid-template-columns: 1fr;
        gap: var(--space-s);
       }

    .hero-slider .spacer-m {
        height: var(--space-l);
    }

    .hero-slider-content-wrapper {
        top: 6rem;
    }

    .max-width, .nav-content {
        padding-left: var(--space-m);
        padding-right: var(--space-m);
    }

    .is-under-overlay {
        padding-top: calc((var(--slider-element-height) / 2) + var(--space-l)) !important;
    }

    .hero {
        margin-top: calc(var(--space-sm) + var(--space-xl));
    }

 }

 @media screen and (max-width: 45rem) {

    #casambi img {
        max-height: 15rem;
    }

    .max-width, .nav-content {
        padding-left: var(--space-s);
        padding-right: var(--space-s);
    }

    .is-highlight {
        width: 75vw;
    }

    .slider-imgs {
        margin-top: var(--space-l);
    }

 }