:host {
  display: block;
}

.hy-list-item {
  display: flex;
  font-family: var(--main-font-family);
  margin-bottom: 28px;
  text-decoration: none;

  @include breakpoint($wide) {
    margin-bottom: 32px;
  }

  &__info-container {
    &__header {
      @include font-size(12px, 14px);
      color: var(--grayscale-dark);
      letter-spacing: 0;
      margin-bottom: 4px;

      @include breakpoint($narrow) {
        @include font-size(14px, 18px);
        margin-bottom: 2px;
      }
    }

    &__title {
      @include font-size(18px, 22px);
      @include font-weight($bold);
      color: var(--brand-main-light);
      letter-spacing: -0.56px;
      margin-bottom: 6px;

      @include breakpoint($narrow) {
        @include font-size(22px, 28px);
        letter-spacing: -0.69px;
        margin-bottom: 10px;
      }
      @include breakpoint($fullhd) {
        @include font-size(26px, 32px);
        letter-spacing: -0.8px;
        margin-bottom: 8px;
      }
    }

    &__link-container {
      align-items: center;
      display: flex;
      margin-bottom: 6px;

      @include breakpoint($narrow) {
        margin-bottom: 8px;
      }
    }

    &__link {
      @include font-size(12px, 16px);
      color: var(--grayscale-dark);
      letter-spacing: -0.07px;
      margin-left: 4px;

      @include breakpoint($narrow) {
        margin-left: 5px;
      }

      &__icon {
        svg {
          fill: var(--grayscale-dark);
        }
      }
    }

    &__description {
      @include font-size(14px, 20px);
      color: var(--grayscale-black);
      letter-spacing: 0;

      @include breakpoint($narrow) {
        @include font-size(16px, 24px);
      }
    }
  }
}