.project-page h2 {
  margin-bottom: var(--heading_gap);
}

.cover-section {
  display: flex;
  /* justify-content: center; */
  overflow: hidden;
  gap: var(--masonry_gap);
  margin-bottom: var(--heading_gap);
  flex-wrap: nowrap;
  flex-direction: row;
}

aside {
  margin-left: auto;
  max-height: calc(
    var(--content_height) - var(--heading_gap) * 2 - var(--h2_font_size)
  );
  width: 30vw;
  /* min-width: 30vw; */
}

.infos {
  margin-top: var(--heading_gap);
  margin-bottom: var(--heading_gap);
}

.infos * {
  font-size: var(--p_font_size) * 0.7;
  line-height: 1;
  color: var(--grey_color);
}

.cover-section img {
  height: calc(
    var(--content_height) - var(--heading_gap) * 2 - var(--h2_font_size)
  );
  width: 60vw;

  object-fit: contain;
}

.images-section {
  display: grid;
  grid-template-columns: repeat(auto-fit, 10vw);
  gap: calc(var(--masonry_gap) / 3);
}

.image-item img {
  width: 100%;
  height: auto;
  display: block;
  cursor: pointer;
  opacity: 0.6;
}
.image-item img.active {
  opacity: 1;
}

body.mobile .cover-section {
  flex-wrap: wrap;
  justify-content: center;
}

body.mobile aside {
  max-height: none;
  width: 100%;
  margin: 0;
}
body.mobile .cover-section img {
  max-width: 100%;
  max-height: none;
  height: auto;
  width: auto;
}

body.mobile .images-section {
  grid-template-columns: repeat(auto-fit, minmax(40vw, 1fr));
}
body.mobile {
  /* overflow: hidden; */
}