/* =================================================================== SERVICES section css =================================================================== */
.services {
    /* headroom so the hover lift isn't clipped by the slider */
    & .services__swiper { padding-top: var(--sp8); margin-top: calc(var(--sp8) * -1); }

    & .services__card {
        display: flex; flex-direction: column;
        background: var(--white);
        border-radius: var(--r-lg);
        overflow: hidden;
        transition: var(--transition);

        &:hover { transform: translateY(-6px); }
        &:hover .services__img { transform: scale(1.05); }
        &:hover .services__arrow .notch-badge { background: var(--primary); color: var(--white); }
    }

    & .services__media {
        position: relative;
        overflow: hidden;
    }

    & .services__img {
        width: 100%;
        aspect-ratio: 3 / 2;
        object-fit: cover;
        transition: var(--transition);
    }

    & .services__icon .notch-badge { width: 55px; height: 55px; color: var(--ink); }

    & .services__body {
        min-height: 120px;
        padding: var(--sp25) 90px var(--sp25) var(--sp25);
    }

    & .services__title {
        margin-top: var(--sp10);
        font-size: var(--f25);
    }

    & .services__link::after { position: absolute; inset: 0; content: ''; }
    & .services__card { position: relative; }

    & .services__arrow .notch-badge { width: 55px; height: 55px; }
}

/* =================================================================== SERVICES responsive =================================================================== */
@media (max-width: 1199.98px) {
    .services {
        }
}

@media (max-width: 767.98px) {
    .services {
        }
}

@media (max-width: 575.98px) {
    .services {
        }
}