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

.teasers {
  .row {
    align-items: flex-start;
    margin: calc(var(--col-padding) * -1);
  }

  h2 {
    margin-top: var(--section-headline-margin);
  }

  &[data-background] {
    margin: 0;
    padding: var(--section-margin) 0;
  }

  &[data-background='lightblue'] {
    background-color: var(--theme-color-primary-dimmed-04);
  }

  &[data-items='2'] {
    .row {
      justify-content: space-between;
    }

    .col {
      flex: 1 1 50%;
      max-width: calc(630px + var(--col-padding) * 2);
    }
  }

  &[data-items='3'] .col {
    flex: 1 1 33.333333%;
    max-width: 33.333333%;
  }

  &[data-type='masonry'] {
    .row, .column {
      flex: 1 1 100%;
      flex-wrap: nowrap;
    }
  }

  .button-wrapper {
    text-align: center;
    padding: calc(20px + 1%) 0 0;
  }

  &[data-items="2"] {
    @media(max-width: 567px) {
      .row {
        flex-wrap: wrap;
      }
      .col {
        flex: 1 1 100%;
        max-width: 100%;
      }
    }
  }

  &[data-items="3"] {
    @media(max-width: 767px) {
      .row {
        flex-wrap: wrap;
      }
      .col {
        flex: 1 1 100%;
        max-width: 100%;
      }
    }
  }
}

.magazine-article .teasers, .magazine-start .teasers, .teasers.magazine-style {
  h2 {
    text-transform: uppercase;
    font-size: var(--font-size-h4);
    margin-bottom: 1.2em;
    line-height: 1.2;
    margin-top: 0;

    &::before {
      content: "";
      position: relative;
      display: block;
      background: linear-gradient(90deg, var(--theme-color-gradient-01) 10%, var(--theme-color-gradient-02) 55%, var(--theme-color-gradient-03) 90%);
      height: calc(var(--border-width) / 2);
      margin: 0 0.05em 0.5em;
    }
  }
}