.impala-project {
  border-top: 1px solid var(--line);
  background: linear-gradient(180deg, #11100e 0%, #181510 100%);
}

.impala-heading {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: end;
  margin-bottom: 38px;
}

.impala-heading h2 {
  margin-bottom: 0;
}

.impala-heading > div:last-child {
  max-width: 460px;
  justify-self: end;
}

.impala-heading p {
  font-size: 15px;
}

.impala-hero {
  margin: 0 0 18px;
}

.impala-hero img,
.impala-gallery img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 1px solid var(--line);
  border-radius: 3px;
}

.impala-hero img {
  aspect-ratio: 16 / 9;
}

.impala-hero figcaption,
.impala-gallery figcaption {
  color: var(--muted);
  font-size: 12px;
  padding-top: 10px;
}

.impala-gallery {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 18px;
}

.impala-gallery figure {
  grid-column: span 4;
  margin: 0;
}

.impala-gallery figure:nth-child(1),
.impala-gallery figure:nth-child(2) {
  grid-column: span 6;
}

.impala-gallery img {
  aspect-ratio: 4 / 3;
}

.impala-gallery figure:nth-child(n + 3) img {
  aspect-ratio: 1 / 1;
}

.camaro-project {
  background: linear-gradient(180deg, #181510 0%, #11100e 100%);
}

.camaro-project .impala-gallery figure:last-child {
  grid-column: span 12;
}

.camaro-project .impala-gallery figure:last-child img {
  aspect-ratio: 16 / 9;
}

@media (max-width: 800px) {
  .impala-heading {
    grid-template-columns: 1fr;
    gap: 22px;
  }

  .impala-heading > div:last-child {
    justify-self: start;
  }

  .impala-gallery figure,
  .impala-gallery figure:nth-child(1),
  .impala-gallery figure:nth-child(2) {
    grid-column: span 6;
  }

  .camaro-project .impala-gallery figure:last-child {
    grid-column: span 12;
  }
}

@media (max-width: 600px) {
  .impala-gallery {
    grid-template-columns: 1fr;
  }

  .impala-gallery figure,
  .impala-gallery figure:nth-child(1),
  .impala-gallery figure:nth-child(2) {
    grid-column: auto;
  }

  .camaro-project .impala-gallery figure:last-child {
    grid-column: auto;
  }
}
