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

@use '_helper' as *;

.column {
  @media screen and (min-width: $break-medium) {
    display: flex;
    justify-content: space-between;
    gap: $spacing-horizontal-column-gap-md;
  }

  @media screen and (min-width: $break-large) {
    gap: $spacing-horizontal-column-gap-lg;
  }

  &__col {
    margin-bottom: 20px;
    position: relative;

    @media screen and (min-width: $break-medium) {
      margin: 0;
      flex-basis: calc(50% - ($spacing-horizontal-column-gap-md / 2));
    }

    @media screen and (min-width: $break-large) {
      flex-basis: calc(50% - ($spacing-horizontal-column-gap-lg / 2));
    }

    &:last-child {
      margin: 0;
    }
  }

  &__img {
    margin-bottom: 20px;

    img {
      width: 100%;
      border-radius: 15px;
    }
  }

  &__title {
    margin-bottom: 8px;

    h3 {
      margin: 0;
      color: $color-black
    }

    a {
      @include arrowCircle(20px, 25px, 30px, true);
      color: $color-blue-dark;

      &:hover {
        color: $color-black;
      }

      .last-word {
        gap: 6px;

        @media screen and (min-width: $break-large) {
          gap: 10px;
        }
      }
    }

    h3, a {
      @include h6;
    }
  }

  &__subtitle {
    @include body(true);
    margin-bottom: 8px;
    font-weight: 700;
  }

  &__body {
    a {
      position: relative;
      z-index: 2;
    }
  }
}

.column--three {
  @media screen and (min-width: $break-medium) and (max-width: ($break-large - 1)) {
    flex-wrap: wrap;
  }

  .column__col {
    @media screen and (min-width: $break-large) {
      flex-basis: calc((100% / 3) - (($spacing-vertical-text-lg * 2) / 3));
    }
  }

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