.services-block{gap:var(--space-04);}
.services-block .services{display:grid;grid-template-columns: 1fr;gap:var(--space-04) var(--space-05);align-items: start;}
.services-block .service-wrap{padding-left:var(--space-03);position: relative;margin-right:var(--space-04);}
.services-block .service-wrap a{display:flex;flex-direction:column;gap:var(--space-04);text-decoration: none;}
.services-block .service-wrap::before{
    content:'';
    position:absolute;
    height:100%;
    width:100%;
    left:0;
    top:0;
    transition:height 200ms;
    border-left:var(--border-01);
    pointer-events: none;
}
.services-block .service-wrap::after{
    content:"";
    width:40px;
    height:40px;
    position:absolute;
    right:0;
    bottom:-40px;
    opacity:0;
    transition: opacity 200ms;
    pointer-events: none;
}
.services-block .service-wrap:hover::before, .services-block .service-wrap:focus::before{height:calc(100% + 40px);}
.services-block .service-wrap:hover::after, .services-block .service-wrap:focus::after{opacity:1;pointer-events: unset;}
.services-block .service-wrap:hover, .services-block .service-wrap:focus{margin-bottom:40px;}


@media screen and (min-width: 1024px) {
    .services-block .services{grid-template-columns: 1fr 1fr 1fr;}
    .services-block.col_4 .services{grid-template-columns:repeat(4,1fr);}
    .services-block .service-wrap{margin-right:0;}
}

.service-wrap .name{
    color: var(--txt-color);
    font-family:var(--font-head);
    font-size:32px;
    line-height: 1.2em;
}

.service-wrap img, .service-wrap svg{width:60px;height:60px;}
.services-block .service-wrap svg{flex-shrink:0;fill:transparent;}
.services-block .service-wrap:hover svg, .services-block .service-wrap:focus svg{flex-shrink:0;fill:var(--txt-color);}
@media screen and (min-width: 1024px) {
    .service-wrap img, .service-wrap svg{width:120px;height:120px;}
}