.grid-4cells, .grid-4cells-l {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--gap);
  font-size: var(--fs-large);
  grid-template-areas: "a b b" "c c d";
}
.grid-4cells > *, .grid-4cells-l > * {
  position: relative;
}
.grid-4cells > *:nth-child(1), .grid-4cells-l > *:nth-child(1) {
  grid-area: a;
}
.grid-4cells > *:nth-child(2), .grid-4cells-l > *:nth-child(2) {
  grid-area: b;
}
.grid-4cells > *:nth-child(3), .grid-4cells-l > *:nth-child(3) {
  grid-area: c;
}
.grid-4cells > *:nth-child(4), .grid-4cells-l > *:nth-child(4) {
  grid-area: d;
}
@media (max-width: 959px) {
  .grid-4cells img, .grid-4cells-l img {
    min-height: 200px;
    object-fit: none;
  }
}

@media (max-width: 959px) {
  .grid-4cells {
    --fs-h2: 20px;
    font-size: var(--fs-xsmall);
  }
}
@media (max-width: 759px) {
  .grid-4cells {
    grid-template-columns: 1fr;
    grid-template-areas: "a" "b" "c" "d";
  }
}

@media (max-width: 1399px) {
  .grid-4cells-l {
    font-size: var(--fs-base);
  }
}
@media (max-width: 1279px) {
  .grid-4cells-l {
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "a b" "c d";
  }
}
@media (max-width: 959px) {
  .grid-4cells-l {
    --fs-h2: 22px;
    gap: var(--gap-xs);
    font-size: var(--fs-small);
  }
}
@media (max-width: 759px) {
  .grid-4cells-l {
    grid-template-columns: 1fr;
    grid-template-areas: "a" "b" "c" "d";
  }
}