.srv.v7 {
    --v7-hover-base: var(--black);
    --v7-icn-path-1: var(--white);
    --v7-icn-path-2: var(--buttons);

    &[data-colors$="-light"] {
        --v7-hover-base: var(--white);
        --v7-icn-path-1: var(--buttons);
        --v7-icn-path-2: var(--white);
    }

    /* -- Column layout ------------------------------------- */

    .srv-v7-list {
        column-gap: var(--flx-gap);
        @container (width >= 50rem) {
            &.mx-2 {
                --itm-val: 47;
            }
        }
    }

    /* -- Service items ------------------------------------- */

    .srv-v7-item {
        padding: .22rem .44rem;
        text-decoration: none;
        color: var(--text-color);
        transition: background var(--g-trn-sp) var(--g-trn-tf);

        li:nth-child(n+3) > & {
            margin-top: .44rem;
        }

        strong {
            font-weight: 700;
        }

        svg:not(.srv-v7-dot) {
            font-size: 1.22rem;
            opacity: 0;
            transition-property: opacity;
            transition-duration: inherit;
            transition-timing-function: inherit;

            > path:first-child {
                fill: var(--v7-icn-path-1);
                opacity: 1;
            }

            > path:nth-child(2) {
                fill: var(--v7-icn-path-2);
            }
        }

        &:hover {
            background: hsl(from var(--v7-hover-base) h s l / 0.5);

            svg:not(.srv-v7-dot) {
                opacity: 1;
            }
        }
    }

    .srv-v7-dot {
        flex-shrink: 0;
        width: 1.0625rem;
        height: 0.9375rem;
        path {
            stroke: var(--buttons);
        }
    }
}