diff --git a/views/blocks/services-list/services-list.css b/views/blocks/services-list/services-list.css new file mode 100644 index 0000000..64ba3fd --- /dev/null +++ b/views/blocks/services-list/services-list.css @@ -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; + } +}