.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: grid;
        grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
        grid-template-rows: repeat(4, auto);

        & article {
            grid-row: span 4;
            display: grid;
            grid-template-rows: subgrid;
            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 {
        width: 100%;
        overflow-x: auto;
        padding-top: 4px;

        & .scroll-container {
            display: flex;
            padding-bottom: 3rem;
        }
    }
}

@media (width < 1640px) {
    .Services {
        & .service-list article:last-child {
            grid-column: 1/-1;
        }
    }
}

@media (width < 600px) {
    .Services {
        & .network-list {
            --height: 380px;
            & article {
                flex-basis: 70vw;
            }
        }
    }
}