72 lines
1.5 KiB
CSS
72 lines
1.5 KiB
CSS
.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 {
|
|
width: 100%;
|
|
overflow-x: auto;
|
|
padding-top: 4px;
|
|
|
|
& .scroll-container {
|
|
display: flex;
|
|
padding-bottom: 3rem;
|
|
}
|
|
}
|
|
}
|
|
|
|
@media (width < 600px) {
|
|
.Services {
|
|
& .service-list {
|
|
width: 80vw;
|
|
|
|
& article {
|
|
flex-basis: 100%;
|
|
}
|
|
}
|
|
|
|
& .network-list {
|
|
--height: 380px;
|
|
& article {
|
|
flex-basis: 80vw;
|
|
}
|
|
}
|
|
}
|
|
}
|