ihk24/gfi-ihk-2024/stories/components/mini-teaser/miniteaser.scss

@import '../../_global/styles/mixins';
@import '../../_global/styles/vars';

.mini-teaser {
  position: relative;
  background-color: white;
  overflow: hidden;
  width: 100%;
  //max-width: 420px;
  border-radius: 4px;
  padding: 16px 12px;
  transition: 0.25s ease;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  background-color: var(--theme-grey-light);
  display: block;
  .title{
    font-size: 22px;
  }
  &.standard::before {
    content: "";
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background-color: var(--theme-color-secondary);
    transition: 0.2s ease;
  }
  &.standard:hover::before {
    height: 8px;
  }
  h4{
    font-size: 22px;
  }
  &.infoteaser{
    background: linear-gradient(161deg, rgba(var(--theme-color-primary-rgb), 1) 0%, rgba(var(--theme-color-primary-rgb), 0.2) 100%);
    &:after{
      content:"";
      position:absolute;
      left:0;
      right:0;
      top:0;
      bottom:0;
      z-index:-1;
      background: linear-gradient(161deg, var(--theme-color-gradient-01) 40%, var(--theme-color-gradient-02) 80%, var(--theme-color-gradient-03) 120%);
    }
    .title, .category, .btn{
      color:white;
    }
    .title{
      margin-top: 0;
      padding-left: 54px;
      min-height: 48px;
      text-align: left;
      line-height: 24px;
      margin-bottom: 19px;
    }
    .btn{
      background-color: transparent;
      border: 1px solid white;
      margin-left: 54px;
      display: inline-block;
      padding:8px 10px;
      line-height: 22px;
      border-radius:16px;
      --button-padding: 8px 10px;
      min-height: 0;
      font-size: 22px;
    }
    .icon-box{
      margin-bottom: 19px;
      margin-top: 0;
      padding-top: 0;
      position: absolute;
      top: 16px;
      left: 12px;
    }
    .text-box{
      padding: 0;
      display: flex;
      flex-wrap: wrap;
    }
  }

  .icon-box {
    font-family: 'Pictograms', sans-serif;
    line-height: 1;
    color: white;
    font-size:48px
  }
  .category{
    text-align: left;
    padding:0;
    margin:0;
    margin-bottom:8px;
    font-size:16px;
    text-transform: uppercase;
    line-height: 18px;
  }
  .title{
    text-align: left;
    padding:0;
    margin:0;
  }
}