.Services {
    background-image: radial-gradient(circle at 100vw 100vh, rgba(255,145,0,0.2) 0%, rgba(0,0,0,0) 63%, rgba(0,0,0,0) 100%);
    background-color: var(--color-orange-black);
    background-repeat: no-repeat;

    .service-list {
        display: flex;
        flex-wrap: wrap;
        align-items: stretch;

        & article {
            flex-grow: 1;
            flex-shrink: 0;
            flex-basis: clamp(350px, calc(33% - 3rem), 500px);
            position: relative;

            & .chip {
                position: absolute;
                right: -1rem;
                top: calc(-1rem - 3px);
            }

            & header {
                display: flex;
            }

            & ul {
                gap: 1rem;

                & li {
                    display: flex;
                    align-items: center;
                    gap: 1rem;
                }
            }

            & .extra {
                margin-top: auto;
            }
        }
    }

    .network-list {
        display: flex;
        flex-wrap: wrap;
    }
}

@media (width < 600px) {
    .Services {
        & .service-list {
            width: 80vw;

            & article {
                flex-basis: 100%;
            }
        }

        & .network-list {
            --height: 380px;
            & article {
                flex-basis: 80vw;
            }
        }
    }
}