✨ feat: Add services-list block CSS

2026-07-24 23:32:06 -05:00
parent a628973ed8
commit 8c52946340
1 changed files with 58 additions and 0 deletions
@@ -0,0 +1,58 @@
+/* Services List block */
+
+.services-list {
+    --services-line-top: 25%;
+
+    &__line {
+        position: absolute;
+        inset-inline: 0;
+        top: var(--services-line-top);
+        height: 8px;
+        pointer-events: none;
+        z-index: 1;
+        background-image: url('/wp-content/themes/community-works-collaborative/static/img/services-list-line.svg');
+        background-repeat: no-repeat;
+        background-position: center center;
+        background-size: 100% 100%;
+    }
+
+    &__grid {
+        position: relative;
+        z-index: 2;
+    }
+
+    &__card {
+        @apply flex flex-col;
+    }
+
+    &__media {
+        @apply overflow-hidden rounded-md bg-gray-100;
+    }
+
+    &__img {
+        @apply w-full h-full object-cover;
+    }
+
+    &__heading {
+        @apply text-cwc-blue-01 text-25px font-bold leading-none mt-6 mb-4;
+
+        &::after {
+            background: var(--color-secondary);
+            content: "";
+            display: block;
+            height: 4px;
+            margin-top: 0.45rem;
+            width: 3rem;
+        }
+    }
+
+    &__desc {
+        @apply text-gray-600 text-16px font-light leading-snug;
+    }
+}
+
+@media (max-width: 1023px) {
+    .services-list__line {
+        display: none;
+    }
+}