.service-component {
    margin-block-start: var(--margin-large);
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
}


.service-component__item {
    background: var(--stone);
    padding: 1.7rem;
}

.service-component__icon {
    --icon-size: 3rem;
    display: block;
    margin-block-end: var(--margin-small);
}

.service-component__title {
    margin-block-end: var(--margin-small);
}

.service-component__caption {
    margin-block-end: var(--margin-medium);
}

@media (min-width: 1024px) {
    .service-component__item {
        padding: 2rem;
    }
}


@media (min-width: 1024px) {
    .service-component__item {
        padding: 3.5rem;
    }

    .service-component {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }
}