.section.hero-progetti {
  padding: var(--spacing-side);
  max-width: var(--max-section-grid-width);
  margin: 0 auto;

  @media screen and (max-width: 48rem) {
    padding: var(--spacing-side-mobile);
  }

  .hero-progetti-breadcrumbs-container {
    .breadcrumb-item {
      color: var(--black);
    }
  }

  .content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-xxxxl);

    @media screen and (max-width: 48rem) {
      grid-template-columns: 1fr;
    }

    .left-content {
      margin-block-start: var(--spacing-side);
      @media screen and (max-width: 48rem) {
        margin-block-start: var(--spacing-side-mobile);
      }
      .white-card {
        display: flex;
        flex-direction: column;
        .top {
          img {
            width: 100%;
            height: 100%;
            object-fit: cover;
          }
        }
        .bottom {
          display: flex;
          flex-direction: column;
          padding: var(--spacing-xl);
          gap: var(--spacing-xl);
          .tag-wrapper {
            display: flex;
            justify-content: space-between;
          }
        }
      }
    }
    .right-content {
      display: flex;
      flex-direction: column;
      gap: var(--spacing-xxl);

      .gradient-card {
        display: flex;
        flex-direction: column;
        .top {
          img {
            width: 100%;
            height: 100%;
            object-fit: cover;
          }
        }
        .bottom {
          background: var(--fiandre-gradient-2);
          display: flex;
          flex-direction: column;
          padding: var(--spacing-xl);
          gap: var(--spacing-xl);
          .tag-wrapper {
            display: flex;
            justify-content: space-between;
          }
        }
      }
    }
    .grey-card {
      background-color: var(--grey-card-2);
      padding: var(--spacing-lg) var(--spacing-xl);
      display: flex;
      flex-direction: column;
      gap: var(--spacing-xl);
    }
  }
}