/* components/tips-tricks-teaser/src/scss/tips-tricks-teaser.scss */
.c-tips-tricks-teaser {
  position: relative;
  color: #FFFFFF;
}
a.c-tips-tricks-teaser {
  -webkit-transition: all 0.3s cubic-bezier(0.92, 0.13, 0, 0.09);
  transition: all 0.3s cubic-bezier(0.92, 0.13, 0, 0.09);
  display: block;
}
.trigger-hover:focus a.c-tips-tricks-teaser,
.trigger-hover:hover a.c-tips-tricks-teaser,
a.c-tips-tricks-teaser:hover,
a.c-tips-tricks-teaser:focus,
a.c-tips-tricks-teaser:active {
  color: #FFFFFF;
  -webkit-transform: scale(1.01);
  transform: scale(1.01);
}
.trigger-hover:focus a.c-tips-tricks-teaser .c-tips-tricks-teaser__media,
.trigger-hover:hover a.c-tips-tricks-teaser .c-tips-tricks-teaser__media,
a.c-tips-tricks-teaser:hover .c-tips-tricks-teaser__media,
a.c-tips-tricks-teaser:focus .c-tips-tricks-teaser__media,
a.c-tips-tricks-teaser:active .c-tips-tricks-teaser__media {
  -webkit-filter: drop-shadow(0 8px 8px rgba(0, 0, 0, 0.1));
  filter: drop-shadow(0 8px 8px rgba(0, 0, 0, 0.1));
}
.trigger-hover:focus a.c-tips-tricks-teaser .c-button,
.trigger-hover:hover a.c-tips-tricks-teaser .c-button,
a.c-tips-tricks-teaser:hover .c-button,
a.c-tips-tricks-teaser:focus .c-button,
a.c-tips-tricks-teaser:active .c-button {
  color: #FFFFFF;
}
.trigger-hover:focus a.c-tips-tricks-teaser .c-button::after,
.trigger-hover:hover a.c-tips-tricks-teaser .c-button::after,
a.c-tips-tricks-teaser:hover .c-button::after,
a.c-tips-tricks-teaser:focus .c-button::after,
a.c-tips-tricks-teaser:active .c-button::after {
  color: #FFFFFF;
}
.c-tips-tricks-teaser__media {
  position: relative;
  -webkit-transition: all 0.3s cubic-bezier(0.92, 0.13, 0, 0.09);
  transition: all 0.3s cubic-bezier(0.92, 0.13, 0, 0.09);
  -webkit-filter: drop-shadow(0 5px 5px rgba(0, 0, 0, 0.05));
  filter: drop-shadow(0 5px 5px rgba(0, 0, 0, 0.05));
}
.c-tips-tricks-teaser__media img {
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-image: url(./img/mask-mobile.svg);
  mask-image: url(./img/mask-mobile.svg);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center center;
  mask-position: center center;
}
@media (min-width: 768px) {
  .c-tips-tricks-teaser__media img {
    -webkit-mask-image: url(./img/mask.svg);
    mask-image: url(./img/mask.svg);
  }
}
.c-tips-tricks-teaser__media::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 6;
  background: -webkit-gradient(linear, left top, left bottom, color-stop(20%, rgba(0, 0, 0, 0)), to(#000000));
  background:
    linear-gradient(
      180deg,
      rgba(0, 0, 0, 0) 20%,
      #000000 100%);
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-image: url(./img/mask-mobile.svg);
  mask-image: url(./img/mask-mobile.svg);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center center;
  mask-position: center center;
  -webkit-transition: all 0.3s cubic-bezier(0.92, 0.13, 0, 0.09);
  transition: all 0.3s cubic-bezier(0.92, 0.13, 0, 0.09);
}
@media (min-width: 768px) {
  .c-tips-tricks-teaser__media::after {
    -webkit-mask-image: url(./img/mask.svg);
    mask-image: url(./img/mask.svg);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(30%, rgba(0, 0, 0, 0)), to(#000000));
    background:
      linear-gradient(
        180deg,
        rgba(0, 0, 0, 0) 30%,
        #000000 100%);
  }
}
@media (min-width: 1200px) {
  .c-tips-tricks-teaser__media::after {
    background: -webkit-gradient(linear, left top, left bottom, color-stop(40%, rgba(0, 0, 0, 0)), to(#000000));
    background:
      linear-gradient(
        180deg,
        rgba(0, 0, 0, 0) 40%,
        #000000 100%);
  }
}
.c-tips-tricks-teaser__content {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
  padding: 0 2.1875rem 3.4375rem;
}
@media (min-width: 576px) {
  .c-tips-tricks-teaser__content {
    padding: 0 2.8125rem 4.375rem;
  }
}
@media (min-width: 1200px) {
  .c-tips-tricks-teaser__content {
    padding: 0 3.75rem 4.375rem;
  }
}
.c-tips-tricks-teaser__title h3 {
  color: #FFFFFF;
}
@media (min-width: 768px) {
  .c-tips-tricks-teaser__intro {
    display: none;
    font-size: 14px;
    line-height: 1.7142857143;
  }
}
@media (min-width: 992px) {
  .c-tips-tricks-teaser__intro {
    display: block;
  }
}
/*# sourceMappingURL=tips-tricks-teaser.css.map */