/* .node.node--type-service.clearfix::after {
    display: none;
} */
.view.view-services.view-id-services .view-content { counter-reset: block-counter; }
.view.view-services.view-id-services .view-content > * { counter-increment: block-counter; }


/*============================== TEASER ==============================*/
.node.node--type-service.node--view-mode-teaser {
    width: 100%;
    border-radius: 20px;
    border: 2px solid var(--primary-color);
    background: #fff;
    font: 700 20px var(--font-family);
    color: #000;
    height: 100%;
    cursor: pointer;
    overflow: hidden;

    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 30px;
    padding-top: 80px;
    position: relative;
}
.node.node--type-service.node--view-mode-teaser::after { content: ''; position: absolute; width: 100%; height: 100%; top: 0; left: 0; background-color: #0772b062; opacity: 0; transition: opacity 0.3s ease; }
.node.node--type-service.node--view-mode-teaser:hover::after { opacity: 1; }
.node.node--type-service.node--view-mode-teaser::before {
    content: counter(block-counter, decimal-leading-zero);
    position: absolute;
    top: 20px;
    right: 20px;
    font: 600 50px var(--font-family);
    color: rgba(7, 115, 176, 0.5);;
}

@media screen and (max-width: 767px) {
    .node.node--type-service.node--view-mode-teaser {
        font-size: 16px;
    }
}
/*====================================================================*/

/*============================== VIEW BLOCK 1 ==============================*/
.view.view-services.view-id-services.view-display-id-block_1 .view-content {
    display: grid;
    grid-template-columns: repeat(12, 8.333333333333%);
    grid-template-rows: 202px 202px;
    row-gap: 30px;
    margin: 0 -15px;
}
.view.view-services.view-id-services.view-display-id-block_1 .view-content > * { padding: 0 15px; }
.view.view-services.view-id-services.view-display-id-block_1 .view-content > * .node.node--type-service.node--view-mode-teaser { position: relative; min-height: 202px; }
.view.view-services.view-id-services.view-display-id-block_1 .view-content > * .node.node--type-service.node--view-mode-teaser .field.field--name-node-title { max-width: 90%; }

.view.view-services.view-id-services.view-display-id-block_1 .views-row:nth-child(6n+1) { grid-column: 1 / span 4; }
.view.view-services.view-id-services.view-display-id-block_1 .views-row:nth-child(6n+1) .node.node--type-service.node--view-mode-teaser { background: var(--secondary-color); border: none; color: #fff; }
.view.view-services.view-id-services.view-display-id-block_1 .views-row:nth-child(6n+1) .node.node--type-service.node--view-mode-teaser::before { color: rgba(255, 255, 255, 0.2); }
.view.view-services.view-id-services.view-display-id-block_1 .views-row:nth-child(6n+2) { grid-column: 5 / span 5; }
.view.view-services.view-id-services.view-display-id-block_1 .views-row:nth-child(6n+2) .node.node--type-service.node--view-mode-teaser { background: var(--primary-color); border: none; color: #fff; }
.view.view-services.view-id-services.view-display-id-block_1 .views-row:nth-child(6n+2) .node.node--type-service.node--view-mode-teaser::before { color: rgba(255, 255, 255, 0.2); }
.view.view-services.view-id-services.view-display-id-block_1 .views-row:nth-child(6n+3) { grid-column: 10 / span 3; }
.view.view-services.view-id-services.view-display-id-block_1 .views-row:nth-child(6n+4) { grid-column: 1 / span 3; }
.view.view-services.view-id-services.view-display-id-block_1 .views-row:nth-child(6n+5) { grid-column: 4 / span 5; }
.view.view-services.view-id-services.view-display-id-block_1 .views-row:nth-child(6n) { grid-column: 9 / span 4; }
.view.view-services.view-id-services.view-display-id-block_1 .views-row:nth-child(6n) .node.node--type-service.node--view-mode-teaser { background: var(--secondary-color); border: none; color: #fff; }
.view.view-services.view-id-services.view-display-id-block_1 .views-row:nth-child(6n) .node.node--type-service.node--view-mode-teaser::before { color: rgba(255, 255, 255, 0.2); }

@media screen and (max-width: 1199px) {
    .view.view-services.view-id-services.view-display-id-block_1 .view-content { grid-template-rows: auto auto; row-gap: 24px; margin: 0 -12px; }
    .view.view-services.view-id-services.view-display-id-block_1 .view-content > * { padding: 0 12px; }
}
@media screen and (max-width: 991px) {
    .view.view-services.view-id-services.view-display-id-block_1 .views-row:nth-child(4n+1) { grid-column: 1 / span 7; }
    .view.view-services.view-id-services.view-display-id-block_1 .views-row:nth-child(4n+2) { grid-column: 8 / span 5; }
    .view.view-services.view-id-services.view-display-id-block_1 .views-row:nth-child(4n+3) { grid-column: 1 / span 5; }
    .view.view-services.view-id-services.view-display-id-block_1 .views-row:nth-child(4n) { grid-column: 6 / span 7; }
}
@media screen and (max-width: 767px) {
}
@media screen and (max-width: 575px) {
    .view.view-services.view-id-services.view-display-id-block_1 .view-content { row-gap: 16px; }
    .view.view-services.view-id-services.view-display-id-block_1 .view-content > * .node.node--type-service.node--view-mode-teaser { min-height: auto; }
    .view.view-services.view-id-services.view-display-id-block_1 .views-row:nth-child(n) { grid-column: 1 / span 12; }
}
/*==========================================================================*/

/*============================== VIEW PAGE 1 ==============================*/
.view.view-services.view-id-services.view-display-id-page_1 .view-content.row { margin: 0 -15px; row-gap:  30px; }
.view.view-services.view-id-services.view-display-id-page_1 .view-content.row .views-row { padding: 0 15px; }

@media screen and (max-width: 991px) {
    .view.view-services.view-id-services.view-display-id-page_1 .view-content.row { margin: 0 -12px; row-gap: 16px; }
    .view.view-services.view-id-services.view-display-id-page_1 .view-content.row .views-row { padding: 0 12px; }
}
/*=========================================================================*/