.events-and-news {
  padding: 4.375rem 0;

  @media (min-width: $break-large) {
    padding: 10.2rem 0 9.9rem;
    max-width: 1640px;
    margin: 0 auto;
  }

  h3 {
    font-weight: 600;
    font-family: "Acumin Pro", sans-serif;
    color: $color-white;
    @include fontsize(16px);
    line-height: 1.3;
    @include focus-light();

    @media (min-width: $break-medium) {
      @include fontsize(18px);
    }

    @media (min-width: $break-large) {
      @include fontsize(24px);
    }

    a {
      color: $color-white;
      transition: all .3s ease;

      .last-word {
        position: relative;
        margin-right: 30px;
        padding-right: 0;
        &:after {
          content: '';
          position: absolute;
          width: 15px;
          height: 10px;
          right: -20px;
          top: calc(50% - 3px);
          background-image: url("data:image/svg+xml,%3Csvg width='15' height='11' viewBox='0 0 15 11' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10.2468 0.720215L15 5.74402L10.2468 10.7202H8.09713L11.9904 6.62498H0V4.83926H11.9904L8.09713 0.720215H10.2468Z' fill='white'/%3E%3C/svg%3E");
          background-size: contain;
          background-repeat: no-repeat;
        }

        @media (min-width: $break-large) {
          margin-right: 35px;
          &:after {
            width: 20px;
            height: 13px;
            right: -28px;
            top: calc(50% - 4px);
          }
        }
      }

      &:hover {
        color: $color-blue-light;
        .last-word:after {
          background-image: url("data:image/svg+xml,%3Csvg width='15' height='11' viewBox='0 0 15 11' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10.2468 0.720215L15 5.74402L10.2468 10.7202H8.09713L11.9904 6.62498H0V4.83926H11.9904L8.09713 0.720215H10.2468Z' fill='#{str-replace(#{$color-blue-light}, '#', '%23')}'/%3E%3C/svg%3E");
        }
      }

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

  &__header {
    h2 {
      color: $color-green-dark;
      margin: 0 0 6px;

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

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

    span.lined-header {
      font-family: $font-handwriting;
      @include fontsize(18px);
      font-weight: 400;
      line-height: .9;
      color: $color-green-dark;

      @media (min-width: $break-medium) {
        @include fontsize(28px);
      }

      @media (min-width: $break-large) {
        @include fontsize(36px);
      }
    }

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

  .decorative-lines {
    position: relative;
    display: block;
    margin-bottom: 24px;
    &:before {
      content: '';
      position: absolute;
      left: 145px;
      bottom: 50%;
      width:0;
      height: 2px;
      border-radius: 100em 0 0 100em;
      background-color: $color-green-dark;
      transform: scaleX(0);
      transform-origin: left;
      transition: transform 300ms;
      z-index: 0;

      @media (min-width: $break-medium) {
        left: 230px;
      }

      @media (min-width: $break-large) {
        height: 3px;
        left: 300px;
        transition-delay: 600ms;
      }
    }

    @media (min-width: $break-large) {
      margin-bottom: 0;
      &:after {
        content: '';
        position: absolute;
        top: 3px;
        right: 0;
        width: 18px;
        height: 18px;
        border: 3px solid $color-green-dark;
        border-radius: 50%;
        background-color: $color-white;
        transition: opacity 300ms 700ms;
        opacity: 0;
        z-index: 2;
      }
    }
  }

  &.js-active {
    .decorative-lines {
      &:before {
        transform: scaleX(1);
        width: calc(100vw - 47px - 132px); // remove padding and width of sibling span plus extra for spacing

        @media (min-width: $break-medium) {
          width: calc(100% - 27px - 205px);
        }

        @media (min-width: $break-large) {
          width: calc(100% - 100px - 200px);
        }
      }

      @media (min-width: $break-large) {
        &:after {
          opacity: 1;
        }
      }
    }
  }

  .content-holder {
    @media (min-width: $break-large) {
      display: grid;
      gap: 24px;
      grid-template-columns: 1fr 1fr;
    }
  }

  .news-box {
    margin: 0 0 2rem;
    position: relative;

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

    @media (min-width: $break-large) {
      display: flex;
      flex-direction: column;
      flex: 1;
      gap: 0;
      margin-bottom: 0;
    }


    &__news {
      position: relative;
      margin: 0 0 1.5rem;

      @media (min-width: $break-medium) {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-row-gap: 20px;
      }

      @media (min-width: $break-large) {
        margin: 0 0 24px;
        display: block;
      }
      &:hover {
        img {
          transform: scale(1.05);
        }
      }  
    }

    &__image {
      position: relative;
      overflow: hidden;
      border-radius: 8px 8px 0 0;

      @media (min-width: $break-medium) {
        border-radius: 8px 0 0 8px;
      }

      @media (min-width: $break-large) {
        border-radius: 8px 8px 0 0;
      }
        
      img {
        aspect-ratio: 280/147;
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: all 300ms;
      }

      @media (min-width: $break-medium) {
        width: 100%;
        img {
          aspect-ratio: 288/207;  
        }
      }

      @media (min-width: $break-large) {
        img {
          aspect-ratio: 477/312;
        }
      }
    }

    .date {
      color: $color-white;
      .cite {
        color: $color-green-light;
        @include focus-light;
        margin-left: 15px;
        position: relative;
        &:before {
          background-color: $color-green-light;
        }
        &:after {
          content: '';
          display: block;
          position: absolute;
          left: -10px;
          top: 4.5px;
          width: 1px;
          height: 18px;
          background-color: $color-white;
        }

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

      @media (min-width: $break-medium) {
        @include fontsize(16px);
        line-height: 1.6;
      }

      @media (min-width: $break-large) {
        @include fontsize(18px);
      }
    }

    &__title {
      padding: 1.5rem 1.25rem 1.5rem;
      background-color: $color-green-dark;
      border-radius: 0 0 8px 8px;
      border-top: 3px solid $color-green-light;
      @include focus-light();

      @media (min-width: $break-medium) {
        padding: 3rem 1.5rem 3rem;
        margin: 0;
        border-top: none;
        border-left: 3px solid $color-green-light;
        border-radius: 0 8px 8px 0;
        display: flex;
        flex-direction: column;
        justify-content: center;
      }

      @media (min-width: $break-large) {
        padding: 32px 22px 32px 32px;
        border-left: unset;
        border-top: 3px solid $color-green-light;
        border-radius: 0 0 8px 8px;
      }

      h3 {
        margin: 0;
        font-family: $font-acumen;
      }

      .cta--link {
        color: $color-green-light;
        line-height: 1.5;
        @include focus-light();
        transition: color .3s ease;
        margin-bottom: 8px;
        display: block;
        position: static;

        &:before {
          content: "";
          position: absolute;
          width: 100%;
          top: 0;
          height: 100%;
          background-color: transparent;
        }

        .last-word {
          position: relative;
          margin-right: 30px;
          &:after {
            content: '';
            width: 16px;
            height: 11px;
            position: absolute;
            right: -23px;
            top: calc(50% - 4px);
            background-image: url("data:image/svg+xml,%3Csvg width='30' height='20' viewBox='0 0 30 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M19.8418 0.570312L29.0313 10.1156L19.8418 19.5703H15.6858L23.2128 11.7894H0.031311V8.3965H23.2128L15.6858 0.570312H19.8418Z' fill='%23A4FFBF'/%3E%3C/svg%3E");
            background-size: cover;
          }

          @media (min-width: $break-large) {
            margin-right: 35px;
            &:after {
              width: 29px;
              height: 19px;
              right: -35px;
              top: calc(50% - 7px);
            }
          }
        }

        &:hover {
          color: $color-white;

          .last-word {
            &:after {
              background-image: url("data:image/svg+xml,%3Csvg width='30' height='20' viewBox='0 0 30 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M19.8418 0.570312L29.0313 10.1156L19.8418 19.5703H15.6858L23.2128 11.7894H0.031311V8.3965H23.2128L15.6858 0.570312H19.8418Z' fill='#{str-replace(#{$color-white}, '#', '%23')}'/%3E%3C/svg%3E");
            }
          }
        }

        &:after {
          border-top-color: $color-white;
          border-right-color: $color-white;
        }

        @media (min-width: $break-medium) {
          margin-bottom: 1rem;
        }

        @media (min-width: $break-large) {
          @include fontsize(24px);
          line-height: 1.3;
        }
      }
    }
  }

  .events-box {
    .events3up {
      &__item {
        @media (min-width: $break-medium) {
          flex-direction: row;
          margin: 0 0 0.688rem;
        }

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

        &:last-child {
          margin: 0;
        }

        h3 {
          margin: 0 0 0.375rem;
          line-height: 1;
          font-family: $font-acumen;

          @media (min-width: $break-medium) {
            margin: 0 0 0.625rem;
            @include fontsize(18px);
            line-height: 1.3;
          }

          @media (min-width: $break-large) {
            @include fontsize(24px);
            margin-bottom: 0.438rem;
          }
  
          .cta--link {
            margin: 0;
            letter-spacing: 0.04rem;
            color: $color-blue-dark;

            &:hover {
              color: $color-blue-dark;

              &:after {
                border-top-color: $color-blue-dark;
                border-right-color: $color-blue-dark;
              }
            }
  
            &:after {
              border-top-color: $color-blue-dark;
              border-right-color: $color-blue-dark;
            }

            @media (min-width: $break-large) {
              letter-spacing: 0;
            }
          }
        }
      }

      &__month {
        margin: 0 0 0.3rem;
      }
    }

    &__cta {
      margin-top: 10px;

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

    .events__list {
      margin: 0 0 1.5rem;
    }

    @media (min-width: $break-large) {
      flex: 1;
    }
  }

  a.cta--button {
    &:before {
      display: none;
    }
    @include cta-arrow($color-blue-dark, $color-blue-dark, $color-white, $color-blue-light, $color-blue-light, $color-black);
  }

  .events__list {
    .events3up {
      &__item {
        width: 100%;
      }
      &__date {
        margin: unset;

        @media (min-width: $break-medium) {
          width: 25%;
        }

        @media (min-width: $break-large) {
          width: 38%;
          border-radius: 8px 0 0 8px;
        }
      }
      &__data {
        width: unset;
        height: 100%;
        padding: 26px 16px 24px 16px;

        @media (min-width: $break-medium) {
          padding: 30px 40px 28px;
        }

        @media (min-width: $break-large) {
          padding: 30px 35px 30px 40px;
          border-radius: 0 8px 8px 0;
        }
      }
      &__details {
        flex: 1;
      }
    }
  }
}