@layer components {
  .card {
    @apply px-6 py-12 sm:px-12 flex flex-col sm:flex-row shadow-lg hover:shadow-xl rounded-xl relative overflow-hidden;
    .content {
      @apply flex flex-col justify-between gap-6 z-5;
      .excerpt {
        @apply h-full flex flex-col justify-between gap-4;
        .title {
          @apply font-mono mb-6 font-semibold transition-colors duration-150;
          line-height: 1.25;
        }
        .summary {
          @apply font-extralight mb-6 tracking-wider;
          line-height: 1.35;
        }
      }
      .drill-down {
        @apply font-mono font-semibold text-right sm:text-left text-nowrap sm:opacity-75 sm:hover:opacity-100 cursor-pointer text-warning transition-all duration-200;
      }
    }
    .image {
      @apply sm:w-1/3 grayscale-30 opacity-60 absolute;
    }
  }
  .card-1 {
    @apply px-8 bg-primary dark:bg-primary-dark text-primary-text dark:text-primary-dark-text;
    .content {
      @apply sm:w-2/3 pb-54 sm:pb-6;
      .excerpt {
        .title {
          @apply text-[26px] sm:text-[40px];
        }
        .summary {
          @apply text-[23px] sm:text-[24px] font-extralight;
        }
      }
      .drill-down {
        @apply text-[32px];
      }
    }
    .image {
      @apply sm:w-1/3 -bottom-20 sm:-right-10 sm:-bottom-10 self-center;
    }
  }
  .card-2 {
    @apply bg-ground-primary dark:bg-ground-primary text-slate-50 dark:text-slate-50;
    .content {
      .excerpt {
        @apply px-2;
        .title {
          @apply text-[22px] sm:text-[34px] font-semibold;
        }
        .summary {
          @apply text-[20px] sm:text-[22px];
        }
      }
      .drill-down {
        @apply text-[21px] sm:text-[32px] text-center px-1.5 rounded-lg bg-ground/50;
      }
    }
    .image {
      @apply w-1/2 -right-6 -bottom-6;
    }
  }
  .card-3 {
    @apply bg-ground-secondary dark:bg-ground-secondary-dark text-ground-secondary-text dark:text-ground-secondary-dark-text px-8 py-8;
    .content {
      @apply w-full;
      .excerpt {
        .title {
          @apply mb-2 text-[21px] sm:text-[23px] text-error;
        }
        .summary {
          @apply text-[18px];
        }
      }
      .drill-down {
        @apply text-[19px] sm:text-[19px] text-inherit text-center px-1.5 rounded-lg bg-ground/60;
      }
    }
    .image {
      @apply w-6/10 -right-6 -bottom-6 grayscale-50 opacity-35;
    }
  }
}