@import "_functions";
@import "_mixins";
@import "_variables";

.block.featured-articles {
  margin-bottom: 60px;

  h2 {
    font-size: 50px;
    font-family:  var(--ylb-font-family-cachet, Verdana), sans-serif;
    line-height: 60px;
    margin-bottom: 28px;

    @include media-breakpoint-up(lg) {
      margin-bottom: 30px;
    }
  }

  .node--view-mode-featured {
    border-radius: unset;
    box-shadow: unset;
    padding: 0;
    height: 100%;
    margin-bottom: 30px;
    margin-top: 0;

    & > div {
      display: flex;
      flex-wrap: wrap;
      align-self: center;

      .image {
        width: 100%;

        @include media-breakpoint-up(lg) {
          max-width: 67%;
        }

        .field-header-image {
          margin: 0;
          height: 100%;

          & > article {
            height: 100%;

            .field-media-image {
              height: 100%;

              img {
                height: 100%;
                border-radius: unset;
              }
            }
          }
        }
      }

      .description {
        width: 100%;
        padding: 20px;

        @include media-breakpoint-up(lg) {
          max-width: 33%;
          padding: 20px 40px 0 40px;
        }

        .changed {
          color: var(--ylb-color-dark-grey-1, darkgray);
          font-size: 16px;
          font-family: var(--ylb-font-family-verdana, Verdana), sans-serif;
          line-height: 20px;
          margin: 15px 0;
          padding-top: 0;

          .field-published-date {
            margin: 0;
            font-size: 18px;
            line-height: 26px;
            font-family: var(--ylb-font-family-verdana, Verdana), sans-serif;
            text-transform: none;
          }
        }

        h3 {
          font-size: 26px;
          font-family:  var(--ylb-font-family-cachet, Verdana), sans-serif;
          line-height: 32px;

          @include media-breakpoint-up(lg) {
            font-size: 30px;
          }

          a {
            color: var(--wsPartnerColor, black)
          }
        }

        .wrapper-field-tags {
          display: flex;
          gap: 20px;
          margin-bottom: 20px;
          justify-content: flex-start;

          .field-tags {
            font-family: var(--ylb-font-family-verdana, Verdana), sans-serif;
            font-weight: 400;
            color: var(--wsPartnerColor, black);
            font-size: 14px;
            background: unset;
            line-height: 20px;
          }
        }
      }
    }
  }
}
