section.topics {
  background-color: var(--theme-color-primary-dimmed-04);
  padding: var(--section-padding) 0;
  margin: var(--section-margin) auto;

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

  + .events, + .topics {
    margin-top: 8px;
  }

  .row {
    margin: calc(var(--col-padding) * -1);
  }

  @media(max-width: 767px) {
    .row {
      margin: 0 -7px;
    }
  }

  .title {
    font-weight: 400;
  }

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

    &.width-half {
      flex: 1 1 50%;
      max-width: 50%;

      &:first-child:last-child {
        flex: 1 1 100%;
        max-width: 100%;
      }
    }

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

      &:nth-child(odd):last-child {
        flex: 1 1 100%;
        max-width: 100%;
      }
    }
    @media(max-width: 767px) {
      padding: 6px;
    }
  }

  &[data-type='list'] .col {
    @media(max-width: 567px) {
      max-width: 100%;
      flex: 1 1 100%;
    }
  }
}