/*

######################################
### MOLECULE: teaser-guide-tuorial ###
######################################

### INFO:

*/

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

@import 'components/atoms/_icon.scss';

@import 'teaser';

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

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

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

  .#{molecule('teaser')} {
    &-tags {
      @include teaser-tag-zero;
    }

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

    &-content {
      @include teaser-content;
      padding-top: 39px;
    }

    &-video-length {
      @include video-length;
    }

    &-image {
      @include teaser-image;
    }

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

    &-copy {
      @include teaser-copy;
    }

    &-icon {
      @include box-shadow;
      display: flex;
      align-items: center;
      justify-content: center;
      left: 0;
      top: 0;
      min-height: 100px;
      width: 100%;
      z-index: 2;
      background: linear-gradient(225deg, color('charade') 0%, color('river-bed') 75%);

      .#{atom('ico')} {
        @include ico-10;
        fill: color('white');

        svg {
          padding: 1.75rem 0;
        }
      }
    }
  }
}
