/*

##################################
### ORGANISM: teaser component ###
##################################

### INFO:

*/

@import '_extends.scss';
@import '_functions.scss';
@import '_mixins.scss';
@import '_variables.scss';

@import 'teaser';

.#{molecule('teaser-component')} {
  &.#{molecule('teaser')} {
    @include teaser;

    & > a {
      @include teaser-linking;
      height: 100%;

      &:hover {
        @include teaser-linking-hover;

        .#{molecule('teaser')}-card {
          @include teaser-card-hover;
        }
      }
    }
  }

  .#{molecule('teaser')} {
    &-container {
      display: grid;
      grid-template-columns: repeat(12, 1fr);
      align-items: stretch;
      margin-top: 20px;

      @media (min-width: 600px) {
        grid-column-gap: 30px;
      }
    }
    &-tags {
      @include teaser-tag-zero;
    }

    &-card {
      @include teaser-card;
      height: 100%;
      border-radius: 0;
    }

    &-header {
      @include teaser-header;
      height: 90px;

      &-title {
        @include teaser-header-title;
        font-weight: bold;
      }
    }

    &-content {
      @include teaser-content;
    }

    &-image {
      @include teaser-image;
    }

    &-headline {
      @include teaser-headline;
      margin-bottom: 0.65em;
    }

    &-copy {
      @include teaser-copy;
    }
  }
}
