@use '../../_global/styles/mixins' as *;
@use '../../_global/styles/vars' as *;

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

  @media(max-width: 767px) {
    margin-top: 24px;
  }
  .text-box{
    background-color: var(--swatches-neutrals-white) !important;
  }
  h2, .like-h2 {
    margin-top: var(--section-headline-margin);
    margin-bottom:10px;
    + p {
      max-width:700px;
    }
  }

  .row {
    flex-wrap: wrap;
    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%;
      &:nth-child(odd):last-child {
        flex: 1 1 100%;
        max-width: 100%;
      }
    }
    @media(max-width: 767px) {

    }
    @media(max-width: 567px) {
      flex: 1 1 100%;
      max-width: 100%;

      &:last-child {
        display:block;
      }
    }
    @media(max-width: 359px) {

    }
  }

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