/*  COMPONENT: SERVICE 
//////////////////////////////////////////////////////////////////////////////*/

@layer components {
    .component--service {
        padding-top: var(--spacing-l);
        padding-bottom: var(--spacing-m);
    }
    .service {
        display: grid;
        grid-template-columns: 1fr;
        gap: var(--size-gap);
    }
    @media (min-width: 980px) {
        .service {
            grid-template-columns: 1fr 1fr 1fr;
        }
    }
    .service > .block:first-of-type {
        grid-column: 1 /2;
    }
    .service > .block {
        display: grid;
        grid-template-columns: var(--size-column) 1fr;
        grid-template-rows: min-content 1fr;
        column-gap: var(--size-gap);
    }
    @media (max-width: 980px) {
        .service > .block {
            padding-right: var(--spacing-l);
        }
    }
    .service > .block * {
        grid-column: 2;
    }
    .service > .block .image_container {
        grid-column: 1;
        grid-row: 1;
        grid-row: 1/3;
    }
    .service > .block .block__hl * {
        margin: 0;
        font-size: var(--font-size-m);
        line-height: var(--line-height-m);
    }
}