:host {
  display: block;
  height: 100.5%;
}

.hy-link-box {
  $border-color: var(--brand-main);
  @include border-without-corners($border-color, 1px);

  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: center;
  position: relative;
  text-decoration: none;

  &__image-container {
    border-left: 1px solid var(--brand-main);
    border-right: 1px solid var(--brand-main);
    border-top: 1px solid var(--brand-main);
    display: flex;
    justify-content: stretch;
    margin-bottom: 0;
    min-height: 10rem;
    position: relative;

    &:before {
      content: "";
      display: block;
      padding-top: (10 / 16) * 100%;
      width: 100%;
    }

    > img {
      bottom: 0;
      height: 100%;
      left: 0;
      object-fit: cover;
      position: absolute;
      right: 0;
      top: 0;
      width: 100%;
    }
  }

  &--with-image {
    justify-content: flex-start;

    .hy-link-box__text-container {
      margin: 0 1px 2rem -1px;
      padding: 1.25rem .5rem 1.25rem 0;
      
      @include breakpoint($medium) {
        padding: 1.25rem .5rem 1.25rem 0;  
      }
    }
  }

  &__text-container {
    background: var(--grayscale-white);
    margin: 3rem 1px 3rem -1px;
    padding: 1.5rem .5rem 1.5rem 0;

    @include breakpoint($medium) {
      margin: 1px 1px 1px -1px;
      padding: 2.5rem .5rem 2.5rem 0;    
    }

    &__title {
      color: var(--brand-main-nearly-black);
      font-family: "Open Sans";
      font-size: 20px;
      font-weight: 600;
      letter-spacing: -0.63px;
      line-height: 26px;
      margin-bottom: 11px;
    }

    &__description {
      color: var(--grayscale-dark);
      font-family: "Open Sans";
      font-size: 14px;
      letter-spacing: -0.2px;
      line-height: 20px;
    }
  }

  &__link-icon {
    bottom: .75rem;
    position: absolute;
    right: .75rem;

    svg {
      fill: var(--brand-main);
    }

    &--external {
      transform: rotate(-45deg);
    }
  }
}