/* Container */
.container {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: clamp(
    var(--container-padding-mob),
    2vw,
    var(--container-padding)
  );
}

.container-projects {
  max-width: 100vw;
}

/* Homepage */
main {
  padding-block: clamp(var(--sp-150), 2vw, var(--sp-300));
}

.page-home main {
  padding-block: 0;
}

/* Project grid */
.project-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(var(--sp-150), 4vw, var(--sp-700));
  padding-bottom: var(--sp-150);
}

@media (min-width: 768px) {
  .project-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Project page layout */
.project-title {
  font-size: clamp(var(--text-h3), 6vw, var(--text-h1));
  margin-bottom: var(--sp-100);
}

.project-layout {
  display: grid;
  place-items: center;
  grid-template-columns: 1fr;
  gap: var(--sp-150);
}

.project-layout img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.span-three,
.span-equal,
.span-three-contain {
  grid-column: 1 / -1;
  display: grid;
  gap: var(--sp-150);
}

.span-mixed,
.span-image-text {
  grid-column: 1 / -1;
  display: grid;
  gap: var(--sp-150);
}

@media (min-width: 768px) {
  .project-layout {
    grid-template-columns: repeat(7, 1fr);
    margin: clamp(var(--sp-100), 3vw, var(--sp-250));
    gap: clamp(var(--sp-200), 7vw, var(--sp-700))
      clamp(var(--sp-100), 4vw, var(--sp-350));
  }

  .span-full,
  .span-full-landscape {
    grid-column: 1 / -1;
  }

  .span-bl {
    grid-column: 1 / 5;
  }

  .span-sr {
    grid-column: 5 / 8;
  }

  .span-sl {
    grid-column: 1 / 4;
  }

  .span-br {
    grid-column: 4 / 8;
  }

  .span-bl,
  .span-br {
    aspect-ratio: 2 / 3;
  }

  .span-sl,
  .span-sr {
    aspect-ratio: 3 / 4;
  }

  .span-full {
    aspect-ratio: 3 / 4;
  }

  .span-three {
    grid-column: 1 / -1;
    grid-template-columns: repeat(3, 1fr);
  }

  .span-three-contain {
    grid-template-columns: 3fr 1fr 3fr;
  }

  .span-mixed {
    grid-column: 1 / -1;
    grid-template-columns: 3fr 4fr;
    align-items: center;
  }

  .span-mixed .portrait {
    aspect-ratio: 3 / 4;
  }

  .span-mixed .landscape {
    aspect-ratio: 4 / 3;
  }

  .span-image-text {
    grid-column: 1 / -1;
    grid-template-columns: 1fr 1fr;
    align-items: center;
  }

  .span-image-text img {
    aspect-ratio: 3 / 4;
  }

  .span-equal {
    grid-column: 1 / -1;
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Press grid */
.press-grid {
  display: grid;
  place-items: center;
  grid-template-columns: 1fr;
  gap: clamp(var(--sp-150), 3vw, var(--sp-500));
  margin-block: var(--sp-300);
}

@media (min-width: 768px) {
  .press-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* About grid */
.about-grid {
  grid-column: 1 / -1;
  display: grid;
  place-items: center;
  grid-template-columns: 1fr;
  gap: clamp(var(--sp-150), 6vw, var(--sp-350));
  margin-block: clamp(var(--sp-100), 5vw, var(--sp-400));
}

@media (min-width: 1024px) {
  .about-grid {
    grid-template-columns: 3fr 4fr;
  }

  .about-info {
    order: 2;
  }

  .about-img {
    order: 1;
  }
}