Themed Card

.ThemedCard {
  @apply flex
  flex-col;

  .Card__text {
    @apply flex-grow
      p-5
      xl:p-6
      2xl:py-7;
  }

  .Card__title {
    @apply relative
      mb-0;
  }

  .Card__copy {
    @apply relative
      mt-4
      text-sm
      lg:text-base;
  }

  .Theme__slant {
    &:before {
      @apply top-0
        -left-[20%]
        right-[90px]
        bottom-0
        skew-x-[17deg];
    }
  }


  &:hover {
    .Theme__slant {
      &:before {
        @apply -right-[15%];
      }
    }
  }
}

.Theme:not(.Theme--featured) {
  .ThemedCard {
    .Card__image {
      @apply border
        border-b-0
      border-gray-300;
    }

    .Link {
      &--wrapper {
        @apply flex
          flex-col
          flex-grow;
  
        .Card__text {
          @apply relative
            pr-20
            xl:pr-20;
  
          &:after {
            @apply content-empty 
              absolute
              top-[1rem]
              right-[1rem]
              xl:top-[1.5rem]
              xl:right-[1.25rem]
              size-[45px]
              bg-cover
              bg-arrow-right-circle-white
              bg-no-repeat;
          }
        }
      }
    }
  }
}

.CardsBlock:not(:has(.Card__copy), .Theme--featured) {
  .ThemedCard {
    .Card__text {
      &:after {
        @apply top-[50%]
          translate-y-[-50%];
      }
    }
  }
}

// center text horizontally but only if block has no cards with copy
.CardsBlock__cards:not(:has(.Card__copy)) {
  .Card__text {
    @apply flex;
  }
}