/* ============================================== */
/*  PROJEKT PAGE                                  */
/*  Estilos específicos para la página de         */
/*  proyecto individual                           */
/* ============================================== */

.projekt section:not(.hero) {
  padding-block: var(--space-2xl);
}

.projekt h2 {
  --title-weight: 300;
}

.projekt .hero {
  min-height: auto !important;
}

.hero h1 {
  padding-block: var(--space-lg);
}

.projekt .hero-slider-wrapper {
  margin-right: calc(-1 * max(var(--container-padding),
        (100vw - var(--container-max-width)) / 2));

}

.projekt .otros .hero-slider-wrapper {
  margin-right: unset;
}

.projekt .hero-slider-wrapper .project-carousel {
  padding: 0;
}

.hero-slider-wrapper {
  background-color: var(--color-bg-primary);
}

.projekt .info {

  h2 {
    margin-bottom: var(--space-xl);
  }

  .datos-proyecto {
    display: grid;
    gap: var(--space-lg);

    @media (width >=768px) {
      gap: var(--space-sm) var(--space-md);
      grid-template-columns: auto 1fr;
    }

    * {
      margin: 0;
      text-wrap: balance;
    }

    p {
      display: grid;

      @media (width >=768px) {
        grid-template-columns: subgrid;
        grid-column: span 2;
      }
    }

    .description {
      hyphens: auto;
    }
  }

  .tipo-de-dato {
    color: hsl(from currentColor h s l / 60%);
  }
}

.projekt .otros {
  padding-block-end: 0;

  h2 {
    margin-bottom: var(--space-2xl);
  }
}

.projekt .otros .project-carousel {
  scrollbar-color: hsl(from var(--color-contrast) h s l / 20%) transparent;

  & .sketch-card:has(:hover, :focus-within) {
    border-color: transparent;
  }
}