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

// Variables
@import "variables";

// Fonts
@import "fonts";

// Components
@import "components/wompum";

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

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

.narrator-image-container {
  @apply relative;

  .wompum-radial-grid {
    @apply absolute inset-0 w-full h-full;
  }
}

.narrator-headshot {
  @apply w-full rounded-full object-cover relative z-10 border-2 border-white;
  aspect-ratio: 1;
}

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

// Narrator Image Component
.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;
  }
}