@use 'sass:math';
@use '@cfpb/cfpb-design-system/src/abstracts' as *;
@use '@cfpb/cfpb-design-system/src/utilities' as *;

.o-post-preview {
  border-bottom: 1px solid var(--gray-40);
  padding-bottom: math.div(
      math.div($grid-gutter-width, 2),
      $base-font-size-px
    ) +
    em;
  display: grid;
  grid-template-rows: auto;
  grid-template-columns: auto;
  grid-template-areas:
    'header header'
    'content image';

  // Mobile only.
  @include respond-to-max($bp-xs-max) {
    grid-template-areas:
      'header'
      'image'
      'content';
  }

  + .o-post-preview {
    margin-top: math.div($grid-gutter-width, $base-font-size-px) + em;
  }

  &__content {
    grid-area: content;
    padding-right: math.div($grid-gutter-width, $base-font-size-px) + em;

    > .calendar-icon {
      float: left;
      margin-right: math.div(
          math.div($grid-gutter-width, 2),
          $base-font-size-px
        ) +
        em;
      margin-bottom: math.div(
          math.div($grid-gutter-width, 2),
          $base-font-size-px
        ) +
        em;
    }
  }

  &__description {
    margin-bottom: math.div(
        math.div($grid-gutter-width, 2),
        $base-font-size-px
      ) +
      em;
  }

  &__image-container {
    position: relative;
    grid-area: image;

    // Tablet and below.
    @include respond-to-max($bp-sm-max) {
      margin-bottom: math.div(
          math.div($grid-gutter-width, 2),
          $base-font-size-px
        ) +
        em;
    }

    // Desktop and above.
    @include respond-to-min($bp-med-min) {
      width: math.div(270px, $base-font-size-px) + em;
    }
  }

  &__image {
    display: block;
    width: 100%;
  }

  &__title a {
    @include u-link-colors(var(--black), var(--pacific-80));
  }

  &__subtitle {
    clear: both;

    @include heading-6;
  }

  &__byline-group,
  .m-tags {
    display: block;
    margin-bottom: math.div(
        math.div($grid-gutter-width, 2),
        $base-font-size-px
      ) +
      em;
  }
}
