.service-icon {
    aspect-ratio: 1/1;
    height: 120px;
    margin: 0 auto 25px auto;
}
.service-icon svg {
    height: 120px;
    transition: transform 0.3s;
}
.service-icon svg * {
    transition: all 0.3s;
}

.service:active .service-icon[data-service="2"] .battery,
.service:focus .service-icon[data-service="2"] .battery,
.service:hover .service-icon[data-service="2"] .battery {
    height: 89px;
    transform: translatey(-74px);
    fill: #5fc77b;
}
.service:active .service-icon[data-service="1"] .stroke,
.service:focus .service-icon[data-service="1"] .stroke,
.service:hover .service-icon[data-service="1"] .stroke {
    stroke-dashoffset: 115;
}
.service:active .service-icon[data-service="22"] .stroke,
.service:focus .service-icon[data-service="22"] .stroke,
.service:hover .service-icon[data-service="22"] .stroke {
    stroke-dashoffset: 115;
}

.service:active .service-icon[data-service="28"] svg,
.service:focus .service-icon[data-service="28"] svg,
.service:hover .service-icon[data-service="28"] svg {
    transform: scale(1.15);
}
.service:active .service-icon svg#default-service,
.service:focus .service-icon svg#default-service,
.service:hover .service-icon svg#default-service {
    transform: rotate(20deg);
}
.service:active .service-icon[data-service="29"] svg,
.service:focus .service-icon[data-service="29"] svg,
.service:hover .service-icon[data-service="29"] svg {
    transform: rotate(180deg);
}