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

.genimglist {
  &__item {
    margin: 0 0 1.25rem;
    background-color: $color-green-dark;
    color: $color-white;
    border-radius: 8px;

    //## Animation triggers

    &.scroll-animate {
      @include slide-fade-in;
    }


    @media (min-width: $break-medium) {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
    }

    @media (min-width: $break-large) {
      position: relative;
      //display: grid;
      //grid-template-columns: repeat( auto-fit, minmax(337px, 1fr) );
      //grid-template-rows: repeat(2, 1fr);
      //grid-column-gap: 0px;
      //grid-row-gap: 0px;
    }
  }

  &__img {
    a {
      display: block;
      overflow: hidden;
      height: 100%;

      &:focus {
        @include focus-light();
        outline-offset: -4px;
      }

      &::before {
        background-color: transparent;
      }
     
    }

    a:hover {
      img {
        transform: scale(1.05);
      }
    }

    img {
      width: 100%;
      border-radius: 8px 8px 0 0;
      aspect-ratio: 280/211;
      object-fit: cover;
      transition: all 300ms;
    }

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

      img {
        border-radius: 8px 0 0 0;
        aspect-ratio: 244/250;
      }
    }

    @media (min-width: $break-large) {
      //grid-area: 1 / 1 / 3 / 2;
      //grid-column-start: none;
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      width: 334px;

      img {
        aspect-ratio: unset;
        height: 100%;
        border-radius: 8px 0 0 8px;
        width: 334px;
      }
    }
  }

  &__content {
    padding: 1.25rem 1.25rem 0;
    @media (min-width: $break-medium) {
      flex: 0;
      flex-basis: 59.5%;
      padding: 32px 32px 0;
    }
    @media (min-width: $break-large) {
      padding: 32px 82px 0 367px;
      flex: unset;
      //grid-area: 1 / 2 / 2 / 3;
      //padding: 2rem 85px 0 368px;
    }
  }

  &__title {
    margin: 0 0 1rem;
    text-transform: capitalize;

    h3 {
      @extend h4;
      margin: 0;
    }

    a {
      position: relative;
      color: $color-green-light;

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

      &:focus {
        @include focus-light();
      }

    @media (min-width: $break-large) {
      h4 {
        @include fontsize(38px);
        line-height: 38px;
        color: white;
        }
      }
    }
  }

  &__subtitle {
    margin: 0 0 1rem;
    font-weight: 700;
    @media (min-width: $break-large) {
      @include fontsize(18px);
      line-height: 1.6;
      margin-bottom: 24px;
    }
  }

  &__body {
    font-weight: 400;
    line-height: 1.52;
    padding: 0 20px 20px;

    a {
      color: $color-green-light;
      white-space: nowrap;

      &:hover {
        color: $color-white;

        &::before {
          background-color: $color-white;
        }
      } 

      &:focus {
        @include focus-light();
      }
      
      &:before {
        background-color: $color-green-light;
      }

      &:hover:after {
        background-color: $color-green-light;
      }
    }

    @media (min-width: $break-medium) {
      font-weight: 500;
      line-height: 1.6;
      padding: 2rem;
      border-top: 1px solid #BEBBBB;
    }

    @media (min-width: $break-large) {
      border-top: none;
      padding: 0 32px 32px 367px;
      //grid-area: 2 / 2 / 3 / 3;
      //border-top: none;
      //padding: 0 2rem 2rem 368px;
    }
  }
}