.teaser-inspiration {
  figure {
    @apply
      aspect-[1.7/1];
  }
}

.teaser-post,
.teaser-inspiration {
  @apply
    mx-auto;

  figure {
    @apply
      relative;

    &:hover {
      img.hover {
        @apply
          opacity-100;
      }
    }

    img.hover {
      @apply
        transition-all
        duration-200;
    }

    video,
    img.hover {
      @apply
        absolute
        opacity-0
        w-full
        h-full
        object-cover
        inset-0;
    }
  }
}

.teaser-property {
  figure {
    @apply
      bg-transparent
      aspect-[unset];

    img {
      @apply
        object-contain
        w-auto;
    }
  }
}

.teaser-sheet {
  h3 {
    @apply
      mt-4;
  }
}

.teaser-decor {
  @apply
    px-0;

  h2 {
    @extend .has-base-font-size;
    @apply
      mt-0;
  }

  figure {
    @apply
      w-full
      mb-3
      relative
      overflow-hidden
      h-full
      aspect-[1.43/1];

    &:hover {
      img {
        @apply
          opacity-50;
      }

      .archive-category {
        @apply
          opacity-100;
      }
    }

    .labels {
      @apply
        absolute
        flex-wrap
        gap-x-4
        gap-y-2
        z-[4]
        flex
        py-[2px]
        top-2
        left-2
        whitespace-nowrap
        rounded-md

        lg:top-3
        lg:left-3;
    }

    .new {
      @apply
        opacity-100
        uppercase
        transition-all;
    }

    .archive-category {
      @apply
        opacity-0;
    }

    .new,
    .archive-category {
      @extend .has-xs-font-size;
      @apply
        inline-block
        z-[4]
        duration-200
        transition-all
        px-1.5
        shadow-md
        py-[2px]
        rounded-md
        bg-white;
    }

    img {
      @apply
        transition-all
        duration-300
        w-full
        h-full;
    }
  }
}

article.teaser {
  &:not(.teaser-sheet) {
    figure {
      @apply
        block
        mb-4
        bg-primary-50
        aspect-[1.5/1];

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

  .category {
    @extend .has-xs-font-size;
    @apply
      mb-2.5
      inline-block
      font-mono;
  }

  h2 {
    @extend .has-base-font-size;
    @apply
      mt-2;
  }

  .time {
    @extend .has-xs-font-size;
    @apply
      font-mono;
  }
}

.related {
  @apply
    py-15
    mt-15
    bg-primary-50;

  &.white {
    @apply
      mt-4
      bg-white;
  }

  h3 {
    @extend .has-alt-xl-font-size;
    @apply
      text-center
      mb-15
      uppercase;
  }
}

.is-highlighted {
  @apply
    lg:col-span-3
    lg:my-4;

  article {
    @apply
      max-w-4xl
      mx-auto;
  }
}
