$case-tile-teaser-sm-height: ms(32);

.static-tile-teaser-bg-color {
  background-color: $podcast-teaser-overlay-color;
  background-position: center;
  color: $static-tile-teaser-text-color;

  &--security {
    background-color: $podcast-teaser-overlay-color-sec;
    color: $brand-gray;

    .static-tile-teaser__headline {
      color: $brand-gray;
    }
  }
}

.static-tile-teaser {
  @extend %block-link;

  display: flex;
  flex-direction: column;
  background-size: cover;
  padding: $spacer-sm;
}

.static-tile-teaser__content {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  justify-content: space-between;
  background-color: $case-tile-teaser-body-bg-color;
  padding: $spacer-md;
}

.static-tile-teaser__body {
  text-align: center;
}

.static-tile-teaser__caption {
  @extend %teaser-caption;
  margin: 0;
}

.static-tile-teaser__headline {
  margin: $spacer-xs 0;
}

.static-tile-teaser__text {
  @extend %teaser-text-italic;
}

.static-tile-teaser__goto {
  text-align: center;
}

//
// case-tile-teaser--sm
//
.static-tile-teaser--sm {
  margin-bottom: $spacer-xxl;
  padding: $spacer-md;
  min-height: $case-tile-teaser-sm-height;
}

.static-tile-teaser__content--sm {
  position: relative;
  top: $spacer-xxl;
  justify-content: space-between;
  padding: $spacer-sm;
}

.static-tile-teaser__headline--sm {
  font-size: $font-size-sm;
}

.static-tile-teaser__text--sm {
  margin-bottom: $spacer-xs;
  font-size: $font-size-base;
}

//
// Breakpoints
//
@media screen and (min-width: $grid-breakpoint-md) {
  .static-tile-teaser {
    padding: $spacer-md;
  }

  .static-tile-teaser__content {
    padding: $spacer-lg;
  }
}