/* Stessi margini dell'About */
.works-page {
  padding: 12rem 10% 8rem;
  max-width: 1800px;
  margin: 0 auto;
}

/* 1 */
/* Hero */
.works-hero {
  text-align: center;
  margin-top: 10rem;
  margin-bottom: 5rem;
  display: flex;
  justify-content: center;
}

.works-hero h1 {
  font-weight: 200;
  font-size: clamp(1.5rem, 4vw + 1rem, 3.5rem);
  max-width: 30ch;
  margin: 0;
}

/* PROJECTS */
.playground-list {
  display: flex;
  flex-direction: column;
}
/* Project Row */
.playground-row {
  display: grid;
  grid-template-columns: 1fr; /* Stacks text and images on mobile */
  gap: 0.5rem;
  padding: 1rem 0 2rem 0;
}

/* Left Column: Info */
.row-info {
  display: flex;
  flex-direction: column;
}

.row-info h4 {
  margin-bottom: 0.25rem;
  color: #111;
}

.row-info p {
  font-size: clamp(
    0.875rem,
    1vw + 0.5rem,
    1rem
  ); /* Standard body copy scale[cite: 9] */
  line-height: 1.4;
  color: #111;
  margin: 0;
}

/* Right Column: Image Gallery */
.row-gallery {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 2 columns on mobile */
  gap: 0.5rem; /* Strict 0.5rem gap matching Works page[cite: 10] */
}

/* =========================================
   IMAGE SHAPES (Reusing your 5:7 / 7:5 logic)
========================================= */
.gallery-item {
  background-color: #e5e5e5;
  border-radius: 4px;
  overflow: hidden;
  position: relative;
}

.gallery-item img,
.gallery-item video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Your exact aspect ratio utility classes[cite: 4] */
.gallery-item.vertical {
  aspect-ratio: 5 / 7;
}

.gallery-item.horizontal {
  aspect-ratio: 7 / 5;
}

/* DESKTOP GRID ADJUSTMENTS */
@media (min-width: 1024px) {
  .playground-row {
    /* Splits the row asymmetrically: 1 fraction for text, 4 fractions for images */
    grid-template-columns: 1fr 4fr;
    gap: 0.5rem;
  }

  .row-gallery {
    /* Allows up to 4 images to sit perfectly in a single line */
    grid-template-columns: repeat(4, 1fr);
  }
}

/* RESPONSIVE*/
/* TABLET & MOBILE  */
@media (max-width: 1023px) {
  .playground-page {
    padding-bottom: 4rem !important;
  }

  .playground-row:last-child {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
  }
}

/* STRICTLY MOBILE (Phones only) */
@media (max-width: 767px) {
  .works-page {
    padding-top: 6rem;
  }

  .about-hero {
    margin-top: 10rem;
    margin-bottom: 10rem;
  }

  /* images */
  .row-gallery {
    grid-template-columns: repeat(2, 1fr);
  }
  .gallery-item.horizontal {
    grid-column: span 2;
    aspect-ratio: 10 / 7;
  }
}