.section{
  gap: var(--halfUnit);
}

.siContainer, .sectionItem{
  aspect-ratio: 1/1.3;
  max-width: calc((var(--elWidth) - 2 * var(--halfUnit)) / 3);
}

.back .contentWrapper > div:last-of-type{
  margin-bottom: min(28cqi, calc(14cqi + var(--sectionItemPadding)));
}

.front h3{
  font-size: 13.5cqi;
}

.back .projectButton{
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: bold;
  color: var(--color1);
  background: var(--color7);
  font-size: 8cqi;
  border: 1px solid var(--color6);
  width: 70cqi;
  height: 14cqi;
}
.back .projectButton:hover{
  background: var(--color8);
}

.back .left{
  text-align: left;
}
.bold.left{
  margin-bottom: 2cqi;
}
span.left{
  margin-top: 2cqi;
}
.spacedBetween{
  display: flex;
  justify-content: space-between;
}

.underline{
  text-decoration-thickness: 2px;
}


.sectionItem.image{
  container-type: inline-size;
}

.sectionItem.image img {
  aspect-ratio: 1/1.3;
  object-fit: cover;
}

.imgCaption{
  padding: calc(var(--sectionItemPadding) / 2);
  overflow: hidden;
  display: none; /* temporary measure while captions are not ready */
}
.imgCaption .contentWrapper{
  font-size: 3.5cqi;
  text-align: justify;
}

.replace{
  display: none;
}

.marginBottom{
  margin-bottom: 8cqi;
}


@media (max-width: 1250px) or (max-aspect-ratio: 1/3){
  .replace{
    display: flex;
  }
  .siContainer, .sectionItem {
    max-width: calc((var(--elWidth) - var(--halfUnit)) / 2); /* 2-column grid */
  }
}


@media (max-width: 700px) or (max-aspect-ratio: 1/3){
  .section{
    gap: var(--unit);
  }
  .siContainer, .sectionItem {
    max-width: var(--elWidth); /* 1-column grid */
  }
}


@media (min-aspect-ratio: 1.75 / 1) and (max-height: 900px) {
  .section:not(#mainTools) {
    gap: var(--halfUnit);
  }

  .multiples {
    display: flex;
  }

  .replace {
    display: none;
  }
}

@media (min-aspect-ratio: 1.75 / 1) and (max-height: 500px) {
  .replace {
    display: flex;
  }
}