/**
 * @file
 * Columns
 *
 * Base styles for all column layouts.
 */

.column {
  @media (min-width: $break-medium) {
    display: flex;
  }

  &__col {
    margin: 0 0 1.25rem;

    @media (min-width: $break-medium) {
      margin: 0;
      flex: 0;
    }
  }

  &__img {
    a {
      display: block;

      &:focus {
        outline-color: $color-white;
        outline-offset: -6px;
      }
    }
    img {
      width: 100%;
      border-radius: 8px;
    }
  }

  &__subtitle {
    margin: 0 0 0.75rem;
    font-weight: 700;
    line-height: 1.5;
    text-transform: capitalize;
  }
}

.column--two {
  @media (min-width: $break-medium) {
    justify-content: space-between;
    gap: 1.25rem;
  }

  .column__col {
    @media (min-width: $break-medium) {
      flex-basis: 50%;
    }

    @media (min-width: $break-large) {
      flex-basis: 50%;
    }
  }
}

.column--three {
  @media (min-width: $break-medium) {
    justify-content: space-between;
    gap: 1.25rem;
  }

  .column__col {
    @media (min-width: $break-medium) {
      flex-basis: calc((100% / 3) - (20px / 3)); // 33.33% - 1/3 container gutter
    }

    @media (min-width: $break-large) {
      flex-basis: calc((100% / 3) - (50px / 3)); // 33.33% - 1/3 container gutter
    }
  }

  &.slick-slider {
    display: block;
  }
}