.news-hero {
  position: relative;

  /* Valori base per diverse lunghezze di titolo */
  &[data-title-length="small"] {
    --gradient-height: 20rem;
  }
  &[data-title-length="medium"] {
    --gradient-height: 24rem;
  }
  &[data-title-length="large"] {
    --gradient-height: 28rem;
  }
  &[data-title-length="xlarge"] {
    --gradient-height: 34rem;
  }

  /* Media query per schermi medi */
  @media screen and (max-width: 64rem) {
    &[data-title-length="small"] {
      --gradient-height: 12rem;
    }
    &[data-title-length="medium"] {
      --gradient-height: 13rem;
    }
    &[data-title-length="large"] {
      --gradient-height: 16rem;
    }
    &[data-title-length="xlarge"] {
      --gradient-height: 20rem;
    }
  }

  /* Media query per schermi piccoli */
  @media screen and (max-width: 48rem) {
    &[data-title-length="small"] {
      --gradient-height: 12rem;
    }
    &[data-title-length="medium"] {
      --gradient-height: 16rem;
    }
    &[data-title-length="large"] {
      --gradient-height: 20rem;
    }
    &[data-title-length="xlarge"] {
      --gradient-height: 22rem;
    }
  }

  /* Media query per schermi molto piccoli */
  @media screen and (max-width: 24rem) {
    &[data-title-length="xlarge"] {
      --gradient-height: 26rem;
    }
  }

  .gradient {
    position: absolute;
    top: -2px;
    left: 0;
    right: 0;
    background: linear-gradient(180deg, #69796e 0%, #908d73 100%),
      lightgray 50% / cover no-repeat;
    background-blend-mode: multiply, normal;
    height: var(--gradient-height);
    z-index: -1;
  }
  .content {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    max-width: var(--max-section-grid-width);
    margin: 0 auto;
    gap: var(--spacing-lg);
    padding-inline: var(--spacing-side);
    min-height: calc(var(--gradient-height) * 1.25);

    @media screen and (max-width: 64rem) {
      overflow: hidden;
      grid-template-columns: 1fr;
      grid-template-rows: auto auto;
      min-height: calc(var(--gradient-height) * 1.05);
    }
    @media screen and (max-width: 48rem) {
      padding-inline: var(--spacing-side-mobile);
    }

    .left-content {
      display: flex;
      flex-direction: column;
      .top {
        display: flex;
        flex-direction: column;
        height: var(--gradient-height);
        gap: var(--spacing-md);
        .news-breadcrumb {
          margin: unset;
          color: var(--white);
          .breadcrumb-item {
            span {
              max-width: 12.5rem;
              @media screen and (max-width: 64rem) {
                max-width: 100%;
              }
              @media screen and (max-width: 48rem) {
                max-width: 10rem;
              }
              @media screen and (max-width: 24rem) {
                max-width: 5rem;
              }
            }
          }
        }
      }
      .text-wrapper {
        display: flex;
        flex-direction: column;
        gap: var(--spacing-xs);
        .news-title {
          max-width: 16ch;
          letter-spacing: normal;
          display: -webkit-box;
          -webkit-line-clamp: 8;
          line-clamp: 8;
          -webkit-box-orient: vertical;
          overflow: hidden;
          text-overflow: ellipsis;

          @media screen and (max-width: 64rem) {
            max-width: 90%;
            font-size: 2.5rem;
          }
          @media screen and (max-width: 48rem) {
            font-size: 2rem;
            line-height: 1.2;
            -webkit-line-clamp: 7;
            line-clamp: 7;
          }
          @media screen and (max-width: 24rem) {
            font-size: 1.5rem;
            line-height: 1;
            -webkit-line-clamp: 12;
            line-clamp: 12;
          }
          /* @media screen and (max-width: 64rem) {
            max-width: 90%;
          } */
        }
      }
      .detail-wrap {
        display: flex;
        flex-direction: column;
        height: fit-content;
        .news-meta {
          padding-block: var(--spacing-md);
        }
      }
    }
    .right-content {
      position: relative;
      min-height: 12rem;
      aspect-ratio: 1.5;
      @media screen and (min-width: 64rem) {
        aspect-ratio: unset;
      }
      .section-image {
        position: absolute;
        top: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        @media screen and (max-width: 64rem) {
          max-width: calc(100dvw - var(--spacing-side-mobile) * 2);
        }
      }
    }
  }
  .divider-wrap {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: var(--max-section-grid-width);
    margin: 0 auto;
    .divider {
      width: 100%;
      margin-inline: var(--spacing-side);
      height: 1px;
      background: #e0e0e0;
      margin-block: var(--spacing-xxl);
      @media screen and (max-width: 64rem) {
        margin-inline: var(--spacing-side-mobile);
      }
    }
  }
}