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

.event-teasers-large {
  position: relative;
  display: block;
  padding: var(--section-padding) 0;
  margin: 0;
  background-color: var(--theme-color-primary-dimmed-04);

  @media(max-width: 767px) {
    margin-top: 24px;
  }

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

  .row {
    flex-wrap: nowrap;
    margin: calc(var(--col-padding) * -1);
    padding-top: 0.3em;

    @media(max-width: 999px) {
      &::after {
        content: '';
        position: relative;
        display: block;
        min-width: 50px;
      }
    }
    @media(max-width: 767px) {
      margin-left: -6px;
      margin-right: -6px;
    }
  }

  .col {
    position: relative;
    display: flex;
    flex: 1 1 33.3333%;
    max-width: 33.3333%;

    &:first-child {
      margin-left: auto;
    }

    &:last-child {
      margin-right: auto;
    }

    @media(max-width: 999px) {
      flex: 1 1 50%;
      max-width: 50%;
      min-width: 44vw;
    }
    @media(max-width: 767px) {
      padding: 6px;
      min-width: calc(50vw - 30px);
    }
    @media(max-width: 567px) {
      flex: 1 1 100%;
      max-width: 100%;
      min-width: 320px;
    }
    @media(max-width: 359px) {
      min-width: 300px;
    }
  }

  .all-participations {
    text-align: center;
    margin: calc(var(--col-padding) + 1.5em) 0 0;
  }
}