.services-header {
    margin-block-end: var(--stack-gutter);
}

@media  screen and (min-width:48em) {
    .services-header {
        --min-title-width: calc(var(--size-xl) * 6.5);
        display: grid;
        grid-template-columns: minmax(var(--min-title-width), 1.2fr) 1fr;
        grid-template-rows: auto 1fr;
        grid-template-areas:
            "title img"
            "text img";
        column-gap: var(--size-s);
    }

    .services-header .page-title {
        grid-area: title;
    }

    .services-hero-img {
        grid-area: img;
        padding: 0;
        aspect-ratio: 1;
        margin-block-end: -40%;
    }

    .services-hero-img img {
        object-fit: cover;
        aspect-ratio: 1;
        object-position: center top;
    }
}

.programs {
    position: relative;
    padding-bottom: var(--stack-section-gutter);
}

.programs:not(:has(+.programs))::before {
    content:'';
    display:block;
    position:absolute;
    z-index:1;
    height: 90%;
    inset-block-end: var(--stack-gutter);
    inset-inline-start: 0;
    z-index:-1;
    aspect-ratio: 4/5;
    background-color:var(--color-teal);
    clip-path:polygon(0 0, 100% 100%, 0 100%);
}

.programs:not(:has(+.programs))::after {
    inset-block-end: calc(-1 * var(--stack-gutter));
    transform: rotate(316deg);
    transform-origin: bottom left;
    width: 40%;
    background-color: var(--color-white);
    z-index:-1;
    content: '';
    position: absolute;
    display: block;
    height: 0.0625rem;
}

@media screen and (min-width:48em) {

    .programs::before {
        width: calc(var(--side-offset) + 20rem);
        height: unset;
        aspect-ratio: 1;
        transform: translateY(calc(-1 * var(--stack-section-gutter)));
        inset-block-end: calc(-1 * var(--stack-section-gutter));
    }

    .programs .gallery__item {
        width: min(70vw, 35rem);
    }

    .program-gallery {
        text-align:center;
    }

}

.program-caption {
    padding: 0.5em;
    text-align: center;
}

@media screen and (min-width:48em) and (hover:hover) and (pointer:fine) {
    .program-caption {
        transform: translateY(0.75em);
        transition: all 0.3s ease-out;
    }

    .gallery__item:hover .program-caption {
        transform: none;
    }
}
    
.other-services__item {
    width: fit-content;
}


.other-services__content {
    --stack-content-gutter: var(
    --size-s);
    display: flex;
    flex-direction: column;
    align-items: start;
    width: 100%;
    flex-wrap: wrap;
    gap: var(--size-l);
}

@media screen and (min-width:48em) {
    .other-services__content { 
        flex-direction: row;
    }
}

.other-services__item-link {
    color: var(--color-teal);
    text-align: left;
}

.program__more-btn {
    position: absolute;
    inset: 0;
    opacity: 0;
    z-index: 2;
}

@media screen and (min-width:48em) {
    .program__more-btn {
        position: static;
        border-color: transparent;
        margin-inline: auto;
        font-weight: normal;
        display: block;
        transition: all 0.3s ease-out;
        opacity: 1;
    }
   
}

@media screen and (min-width:48em) and (hover:hover) and (pointer:fine) {
    .program__more-btn {
        opacity: 0;
    }
    .gallery__item:hover .program__more-btn {
        opacity: 1;
    }
}

@media screen and (min-width:20em) {
    .services__contact-btn {
        grid-column: 1 / span 2;
        width: fit-content
    }
}

.dance-events__main {
    display: block;
}

@media screen and (min-width:48em) {
    .dance-events__main {
        max-inline-size: var(--grid-max-width);
        margin-inline: auto;
        padding-inline: var(--grid-gutter);
        display: grid;
        grid-template-columns: 10fr 7fr;
    
    }

    .dance-events__main figure {
        width: 140%;
        margin-left: -40%
    }

 
}