/**
 * @file
 * Generic Block: Image list
 *
 * Styles for Generic Block: Image list object.
 */

@use '_helper' as *;

.genimglist {
  &__wrap {
    display: flex;
    flex-direction: column;
    gap: 20px;

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

  &__item {
    position: relative;

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

  &__img {
    margin-bottom: 30px;
    flex: 0 0 42.5%;

    @media screen and (min-width: $break-large) {
      margin: 0;
    }

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

  &__content {
  }

  &__title {
    margin-bottom: 12px;

    @media screen and (min-width: $break-medium) {
      margin-bottom: 10px;
    }

    @media screen and (min-width: $break-large) {
      margin-bottom: 15px;
    }

    h3 {
      margin: 0;
    }

    a {
      @include arrowCircle(30px, 25px, 30px, true);
    }

    h3,
    a {
      @include h4;
    }
  }

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

    @media screen and (min-width: $break-medium) {
      margin-bottom: 10px;
    }

    @media screen and (min-width: $break-large) {
      margin-bottom: 15px;
    }
  }

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