.container {
  > div {
    > div:last-child {
      .teaser-post {
        @apply border-b-0;
      }
    }
  }

  .teaser-post {
    @apply flex
      h-full
      max-w-2xl
      px-4
      flex-col
      border-b-0
      border-gray-200
      mb-6;

    .teaser-content {
      .teaser-info {
        > :not(:first-child) {
          &::before {
            content: " | ";
          }
        }
      }
    }

    &.teaser-single-column {
      @apply flex-col
        max-w-full;

      @screen md {
        @apply flex-row;
      }

      .teaser-content {
        width: 100%;

        @screen md {
          width: 55%;
        }
      }

      .figure-wrapper {
        @screen md {
          @apply pr-16;
        }
      }

      h2 {
        @apply text-4xl
          font-medium;
      }
    }

    &.teaser-multi-column {
      @apply mb-16;
    }

    .entry-summary {
      @apply mt-6
        mb-4
        max-w-xl;
    }

    h2 {
      @apply text-2xl
        font-medium;
    }

    .updated {
      @apply text-sm
        italic
        text-gray-500;
    }

    figure {
      @apply mb-6
        bg-gray-100
        overflow-hidden
        w-full;

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

body.single-post {
  .heading-bold {
    h1 {
      font-weight: 700;
    }
  }

  .headings-bold {
    h2,
    h3,
    h4,
    h5 {
      font-weight: 700 !important;
    }
  }

  .single-post-wrapper {
    .single-post-inner {
      @apply mx-auto;

      figure.main-image {
        @apply mb-6
          ml-4
          float-right
          w-1/2;

        img {
          @apply w-full;
        }
      }
    }

    .container {
      @apply w-full;

      margin: 0 auto;
    }

    .container.width-sm {
      max-width: 758px !important;
    }

    .container.width-md {
      max-width: 900px !important;
    }

    .container.width-standard {
      max-width: 1024px !important;
    }

    .container.width-big {
      max-width: 1280px !important;
    }
  }
}

.post-content-wrapper.text-sm {
  p {
    @apply text-sm;
  }
}

.post-content-wrapper.text-base {
  p {
    @apply text-base;
  }
}

.post-content-wrapper.text-lg {
  p {
    @apply text-lg;
  }
}

.post-content-wrapper.text-xl {
  p {
    @apply text-xl;
  }
}

.single-post {
  .heading-base {
    h1 {
      @apply text-base;
    }
  }

  .heading-lg {
    h1 {
      @apply text-lg;
    }
  }

  .heading-xl {
    h1 {
      @apply text-xl;
    }
  }

  .heading-2xl {
    h1 {
      @apply text-2xl;
    }
  }

  .heading-3xl {
    h1 {
      @apply text-3xl;
    }
  }

  .heading-4xl {
    h1 {
      @apply text-4xl;
    }
  }

  .heading-5xl {
    h1 {
      @apply text-5xl;
    }
  }
}
