.services {
    padding: 40px 0 120px;
}

.services .container {
    display:        flex;
    flex-direction: column;
    gap:            48px;
}

.service {
    display:        flex;
    flex-direction: column;
    gap:            40px;
    padding:        56px;
    border-radius:  var(--radius-2xl);
    background:     var(--bg-subtle);
    scroll-margin-top: 120px;
}

.service__top {
    display:     flex;
    align-items: center;
    gap:         64px;
}

.service--reverse .service__top {
    flex-direction: row-reverse;
}

.service__text {
    display:        flex;
    flex:           1 1 0;
    flex-direction: column;
    align-items:    flex-start;
    gap:            20px;
    min-width:      0;
}

.service__eyebrow {
    display:     flex;
    align-items: center;
    gap:         10px;
    font-size:   16px;
    font-weight: 500;
    color:       var(--orange-500);
}

.service__number {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    width:           44px;
    height:          44px;
    border-radius:   var(--radius-pill);
    font-weight:     700;
    color:           var(--text-inverse);
    background:      var(--orange-500);
}

.service__title {
    font-size:   40px;
    line-height: 48px;
    font-weight: 700;
    color:       var(--text-primary);
}

.service__lead {
    font-size:   18px;
    line-height: 28px;
    color:       var(--text-secondary);
}

.service__button {
    margin-top: 8px;
}

.service__media {
    flex:          0 0 620px;
    width:         620px;
    height:        380px;
    margin:        0;
    border-radius: 24px;
    overflow:      hidden;
}

.service__image {
    display:    block;
    width:      100%;
    height:     100%;
    object-fit: cover;
}

.service__items {
    display:               grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap:                   20px;
}

.service-item {
    display:        flex;
    flex-direction: column;
    gap:            16px;
    padding:        28px;
    border-radius:  24px;
    background:     var(--neutral-0);
}

.service-item__icon {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    width:           52px;
    height:          52px;
    border-radius:   16px;
    background:      var(--bg-subtle);
}

.service-item__title {
    font-size:   19px;
    line-height: 26px;
    font-weight: 600;
    color:       var(--text-primary);
}

.service-item__text {
    font-size:   15px;
    line-height: 23px;
    color:       var(--text-secondary);
}

@media (max-width: 1279px) {
    .service { padding: 40px; }

    .service__top { gap: 40px; }

    .service__media {
        flex-basis: 46%;
        width:      46%;
        height:     auto;
        aspect-ratio: 620 / 380;
    }

    .service__title {
        font-size:   34px;
        line-height: 42px;
    }

    .service__items { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 1023px) {
    .services { padding: 32px 0 80px; }

    .service__top,
    .service--reverse .service__top { flex-direction: column-reverse; align-items: stretch; }

    .service__media {
        flex-basis: auto;
        width:      100%;
    }

    .service__button { align-self: flex-start; }
}

@media (max-width: 767px) {
    .services .container { gap: 24px; }

    .service {
        gap:           24px;
        padding:       20px;
        border-radius: 24px;
    }

    .service__text { gap: 16px; }

    .service__title {
        font-size:   28px;
        line-height: 34px;
    }

    .service__lead {
        font-size:   16px;
        line-height: 24px;
    }

    .service__button { align-self: stretch; }

    .service__media { border-radius: 16px; }

    .service__items { grid-template-columns: 1fr; gap: 12px; }

    .service-item {
        padding:       20px;
        border-radius: 20px;
    }
}