#services-section {
    row-gap: var(--size_xs);
    padding: var(--size_l) 0;
}

.services_s-item .--figure {transition: height 1000ms;}
.services_s-item .--figure[data-status="hide"] {height: 0;}

.services_s-item .--thumbnail {
    width: 100%;
    max-width: fit-content;
    height: auto;
    max-height: 100vw;
    margin: var(--size_s) auto;
}

@media only screen and (min-width: 1096px) {
    .services_s-item .--thumbnail {max-height: 50dvh;}
}

@media (hover: hover) {
    .services_s-item {transition: opacity 200ms ease-in-out;}

    #services-section:hover .services_s-item {opacity: var(--alpha);}
    #services-section .services_s-item:hover {opacity: 1 !important;}
}