:root {
    --font-default: "Open Sans", sans-serif;
    --font-headline: "Bariol", sans-serif;
    --grid-columns: 12;
    --grid-width-max: 1680px;
    --grid-gutter: 10px;
    --grid-color: 190, 100%, 50%;
    --color-black: #000;
    --color-white: #fff;
    --color-grey-1: #f5f5f5;
    --color-grey-2: #EFEFEF;
    --color-grey-3: #F3F6FA;
    --color-grey-4: #4E4E4E;
    --color-grey-5: #E9ECF0;
    --color-blue-1: #3396FE;
    --color-blue-2: #1674D8;
    --color-blue-3: #07488C;
    --color-green-1: #0B6021;
    --color-yellow-1: #FFBA00;
    --color-orange-1: #FF5800;
}

:root {
    --grid-offset: 20px;
}

@media only screen and (min-width: 375px) {
    :root {
        --grid-offset: calc(20px + 100 * (100vw - 375px) / (1920 - 375));
    }
}

@media only screen and (min-width: 1920px) {
    :root {
        --grid-offset: 120px;
    }
}

@media (min-width: 768px) {
    :root {
        --grid-gutter: 20px;
    }
}

@media (min-width: 1024px) {
    :root {
        --grid-gutter: 40px;
    }
}

@media (min-width: 1366px) {
    :root {
        --grid-gutter: 60px;
    }
}

.block.block-services {
    padding-left: var(--grid-offset);
    padding-right: var(--grid-offset);
}

.block.block-services .inner {
    max-width: var(--grid-width-max);
    width: 100%;
    margin: 0 auto;
}

.block.block-services .content {
    text-align: center;
}

.block.block-services .content {
    margin-bottom: 32px;
}

@media only screen and (min-width: 375px) {
    .block.block-services .content {
        margin-bottom: calc(32px + 32 * (100vw - 375px) / (1920 - 375));
    }
}

@media only screen and (min-width: 1920px) {
    .block.block-services .content {
        margin-bottom: 64px;
    }
}

.block.block-services .items {
    display: flex;
    flex-flow: row wrap;
    margin-left: calc(var(--grid-gutter) / 2 * -1);
    margin-right: calc(var(--grid-gutter) / 2 * -1);
}

.block.block-services .items .item {
    position: relative;
    margin-top: 30px;
    text-align: center;
    aspect-ratio: 0.9;
}

.block.block-services .items .item {
    width: 1px;
    min-width: calc(100% / var(--grid-columns) * 6 - var(--grid-gutter) - 0.01px);
    margin-right: calc(var(--grid-gutter) / 2);
    margin-left: calc(var(--grid-gutter) / 2);
}

.block.block-services .items .item .item-background {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    z-index: -1;
    width: 100%;
    aspect-ratio: 1.6;
}

.block.block-services .items .item [class*=item-image-] {
    padding: 12px;
}

@media only screen and (min-width: 375px) {
    .block.block-services .items .item [class*=item-image-] {
        padding: calc(12px + 12 * (100vw - 375px) / (1920 - 375));
    }
}

@media only screen and (min-width: 1920px) {
    .block.block-services .items .item [class*=item-image-] {
        padding: 24px;
    }
}

.block.block-services .items .item [class*=item-image-] img {
    width: 100%;
    height: auto;
}

.block.block-services .items .item .item-image-1 {
    display: block;
}

.block.block-services .items .item .item-image-2 {
    display: none;
}

.block.block-services .items .item .item-button {
    display: none;
}

.block.block-services .items .item .item-title {
    margin-top: auto;
    font-weight: 700;
    font-family: var(--font-headline);
}

.block.block-services .items .item .item-title {
    font-size: 16px;
}

@media only screen and (min-width: 375px) {
    .block.block-services .items .item .item-title {
        font-size: calc(16px + 24 * (100vw - 375px) / (1920 - 375));
    }
}

@media only screen and (min-width: 1920px) {
    .block.block-services .items .item .item-title {
        font-size: 40px;
    }
}

.block.block-services .items .item:hover .item-image-1 {
    display: none;
}

.block.block-services .items .item:hover .item-image-2 {
    display: block;
}

.block.block-services .items .item:hover .item-button {
    display: block;
}

.block.block-services .items .item:hover .item-button a {
    margin-top: 12px;
}

@media only screen and (min-width: 375px) {
    .block.block-services .items .item:hover .item-button a {
        margin-top: calc(12px + 12 * (100vw - 375px) / (1920 - 375));
    }
}

@media only screen and (min-width: 1920px) {
    .block.block-services .items .item:hover .item-button a {
        margin-top: 24px;
    }
}

.block.block-services .items .item.background-color-1 .item-background {
    background-color: var(--color-blue-3);
}

.block.block-services .items .item.background-color-1 .item-title {
    color: var(--color-blue-3);
}

.block.block-services .items .item.background-color-1 .item-button a {
    border-color: var(--color-blue-3);
    color: var(--color-grey-4);
}

.block.block-services .items .item.background-color-1 .item-button a:hover {
    background-color: var(--color-blue-3);
    color: var(--color-white);
}

.block.block-services .items .item.background-color-2 .item-background {
    background-color: var(--color-grey-4);
}

.block.block-services .items .item.background-color-2 .item-title {
    color: var(--color-grey-4);
}

.block.block-services .items .item.background-color-2 .item-button a {
    border-color: var(--color-grey-4);
    color: var(--color-grey-4);
}

.block.block-services .items .item.background-color-2 .item-button a:hover {
    background-color: var(--color-grey-4);
    color: var(--color-white);
}

.block.block-services .items .item.background-color-3 .item-background {
    background-color: var(--color-green-1);
}

.block.block-services .items .item.background-color-3 .item-title {
    color: var(--color-green-1);
}

.block.block-services .items .item.background-color-3 .item-button a {
    border-color: var(--color-green-1);
    color: var(--color-green-1);
}

.block.block-services .items .item.background-color-3 .item-button a:hover {
    background-color: var(--color-green-1);
    color: var(--color-white);
}

.block.block-services .items .item.background-color-4 .item-background {
    background-color: var(--color-orange-1);
}

.block.block-services .items .item.background-color-4 .item-title {
    color: var(--color-orange-1);
}

.block.block-services .items .item.background-color-4 .item-button a {
    border-color: var(--color-orange-1);
    color: var(--color-orange-1);
}

.block.block-services .items .item.background-color-4 .item-button a:hover {
    background-color: var(--color-orange-1);
    color: var(--color-white);
}

@media (min-width: 1024px) {
    .block.block-services .items {
        display: flex;
        flex-flow: row wrap;
        margin-left: calc(var(--grid-gutter) / 2 * -1);
        margin-right: calc(var(--grid-gutter) / 2 * -1);
    }

    .block.block-services .items .item {
        margin-top: 30px;
    }

    .block.block-services .items .item {
        width: 1px;
        min-width: calc(100% / var(--grid-columns) * 3 - var(--grid-gutter) - 0.01px);
        margin-right: calc(var(--grid-gutter) / 2);
        margin-left: calc(var(--grid-gutter) / 2);
    }
}

/*# sourceMappingURL=view.css.map */