.section {
  position: relative;

  width: 100%;

  padding: 4rem 12rem;
  margin: 8rem 0;

  transition: $transition-slow;

  @include respond(phablet) {
    padding: 3rem 6rem;
  }

  @include respond(phone) {
    padding: 3rem;
  }

  &.hidden {
    transform: translateY(48px);
  }

  &:not(:first-of-type) {
    border-top: 1px solid $color-grey-regular;
  }
}

.row {
  @include flex(3rem, center);
  flex-wrap: wrap;

  width: 100%;

  &:not(:only-of-type) {
    margin-bottom: 3rem;
  }

  // @include respond(tab-land) {
  //   gap: 8rem;
  //   flex-direction: column;
  // }
}

.col {
  flex: 1;

  @include respond(tab-land) {
    min-width: 50%;
  }
}

.col-2 {
  flex: 2;
}

.col-3 {
  flex: 3;
}
