.card {
  &__highlight {
    @apply ring-4 ring-background hover:ring-tertiary rounded flex flex-col md:flex-row hover:cursor-pointer transition;

    &-img {
      @apply w-full md:w-1/2 aspect-video rounded-t md:rounded-t-none md:rounded-l overflow-hidden;

      img {
        @apply w-full h-full object-cover;
      }
    }

    &-text {
      @apply w-full md:w-1/2 flex flex-col p-4 gap-y-2 md:gap-y-4 text-gray-2;
    }

    &:hover &-text h3 {
      @apply underline;
    }
  }

  &__grid {
    @apply flex flex-col ring-4 ring-background hover:ring-tertiary rounded hover:cursor-pointer transition;

    &-grid {
      @apply grid gap-4 md:gap-12 md:grid-cols-2;
    }

    &-home {
      @apply grid gap-4 md:gap-12 md:grid-cols-3;
    }

    &-img {
      @apply aspect-[21/9] rounded-t overflow-hidden;

      img {
        @apply w-full h-full object-cover;
      }
    }

    &-text {
      @apply grow px-4 py-3 flex flex-col gap-y-2 md:gap-y-4 text-gray-2 break-words;
    }

    &:hover &-text h3 {
      @apply underline;
    }
  }

  &__list {
    @apply flex flex-col md:flex-row gap-2.5 md:gap-4 px-4 rounded overflow-hidden border-l-4 border-background hover:border-tertiary focus-visible:border-tertiary focus-visible:outline-none transition;

    &-list {
      @apply space-y-10;
    }

    &-content {
      @apply flex flex-col gap-2.5;
    }

    &-title {
      @apply h4 text-secondary;

      overflow: hidden;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 3;
    }

    &-image {
      @apply w-full md:w-1/5 flex-none rounded overflow-hidden aspect-[1.5] md:-ml-[calc(1rem+4px)];

      img {
        @apply w-full h-full object-cover;
      }
    }

    &-text {
      @apply text-gray-2;

      overflow: hidden;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 3;
    }

    & + & {
      @apply mt-6;
    }

    &:focus &-title,
    &:hover &-title {
      @apply underline;
    }
  }

  &__search {
    @apply flex flex-col gap-2 items-start w-full;

    &-title {
      @apply text-secondary;
    }

    & + & {
      @apply mt-6;
    }

    &:focus &-title,
    &:hover &-title {
      @apply underline;
    }
  }

  &__calendar {
    @apply w-14 flex flex-col justify-start rounded overflow-hidden bg-background text-center;

    /* overwrite defaults */
    &-list__reset {
      @apply border-0 px-0 flex-row items-start first:[&>*]:flex-none;
    }

    &-month {
      @apply bg-primary uppercase text-white text-xs rounded-t md:rounded-tr-none;
    }

    &-day {
      @apply text-black text-2xl font-bold;
    }

    &-time {
      @apply text-black text-xs;
    }

    &-month,
    &-day,
    &-time {
      @apply inline-flex items-center justify-evenly empty:[&>span]:hidden;
    }
  }

  /* shared styles */
  &__search-metadata,
  &__list-metadata {
    @apply mt-auto inline-flex flex-wrap gap-x-4 md:gap-0;

    & > span {
      @apply inline-flex items-center gap-1 px-0 md:px-6 border-gray-3 border-0 md:border-r first:pl-0 last:pr-0 last:border-r-0 text-sm text-gray-2;

      & > svg {
        @apply w-3.5 h-3.5 fill-current text-gray;
      }
    }

    [data-author] + [data-author] {
      @apply -ml-4;
    }
  }

  /* shared styles */
  &__highlight-metadata,
  &__grid-metadata {
    @apply mt-auto flex items-center justify-between flex-wrap text-sm text-gray-2 [&>*]:flex [&>*]:items-center [&>*]:gap-1 first:[&>*]:flex-none;

    svg {
      @apply flex-none text-gray fill-current;
    }
  }

  /* shared styles */
  &__highlight-loader,
  &__grid-loader {
    --color: var(--primary);
    --inner: theme("colors.background.DEFAULT");
    --outer: theme("colors.gray.3");

    @apply w-3.5 h-3.5 mx-auto grid place-items-center rounded-full overflow-hidden bg-[radial-gradient(farthest-side,var(--inner)_60%,transparent_0_100%),conic-gradient(var(--color)_calc(var(--value)*100%),var(--outer)_0)];
  }

  &__placeholder-l {
    @apply top-[calc(100%-10rem)] left-[calc(100%-11.5rem)] absolute w-48 h-44 z-10 fill-primary;
  }

  &__placeholder-g {
    @apply w-full h-full fill-primary;
  }
}