// Tailwind
@tailwind base;
@tailwind components;
@tailwind utilities;

// Variables
@import "variables";

// Fonts
@import "fonts";

// Components
@import "components/wompum";

body {
  font-family: $font-garamond;
}

.interviewer-question {
  font-style: italic;
  color: #444;
  margin-left: -1rem;
}

.article-title {
  &--single {
    .article-title__narrator {
      @apply mb-2 block font-light;
    }
    .article-title__subject {
      font-size: 1.5em;
    }
  }

  &--list {
    .article-title__narrator {
      &::after {
        content: ":";
      }
    }
    .article-title__subject {
      @apply font-light;
    }
  }
}

// Narrator Image Component
.wompum-radial-grid {
  @apply absolute w-full h-full top-0 left-0;
}

.narrator {
  &__container {
    @apply relative;
  }

  &__frame {
    @apply relative p-4;
  }

  &__image {
    @apply w-full rounded-full object-cover relative z-10 bg-white text-center border-4 border-white grid place-items-center;
    aspect-ratio: 1;
  }

  &__wompum {
    @apply absolute inset-0 w-full h-full;
  }
}