.service-icon {
    display: block;
    flex: 0 0 auto;
    width: 72px;
    height: 72px;
    object-fit: contain;
    pointer-events: none;
    user-select: none;
}

.home-motion-page .motion-service-symbol {
    top: 18px;
    right: 22px;
    transform: none;
    transition: transform 200ms ease;
}

.home-motion-page .motion-service-symbol .service-icon {
    width: 136px;
    height: 136px;
}

@media (min-width: 1101px) {
    .home-motion-page .motion-service:nth-child(-n+2) .service-icon {
        width: 152px;
        height: 152px;
    }
}

@media (hover: hover) and (pointer: fine) {
    .home-motion-page .motion-service:hover .motion-service-symbol {
        transform: translateY(-4px) rotate(3deg);
    }
}

.service-row-title .service-icon {
    width: 64px;
    height: 64px;
}

.big-icon .service-icon {
    width: 152px;
    height: 152px;
    margin-bottom: 24px;
}

@media (max-width: 1100px) {
    .home-motion-page .motion-service-symbol .service-icon {
        width: 100px;
        height: 100px;
    }

    .service-row-title {
        gap: 12px;
    }

    .service-row-title .service-icon {
        width: 52px;
        height: 52px;
    }
}

@media (max-width: 760px) {
    .home-motion-page .motion-service p {
        overflow-wrap: anywhere;
    }

    .home-motion-page .motion-service-symbol {
        top: 12px;
        right: 12px;
    }

    .home-motion-page .motion-service-symbol .service-icon {
        width: 88px;
        height: 88px;
    }

    .service-row-title .service-icon {
        width: 56px;
        height: 56px;
    }

    .big-icon .service-icon {
        width: 128px;
        height: 128px;
        margin-bottom: 20px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .home-motion-page .motion-service .motion-service-symbol,
    .home-motion-page .motion-service:hover .motion-service-symbol {
        transform: none;
        transition: none;
    }
}