.grid {
  display: flex;
  flex-direction: row;
  gap: 80px;
}
.grid .column.column-3 {
  width: 25%;
}
.grid .column.column-4 {
  width: 33.3333333333%;
}
.grid .column.column-6 {
  width: 50%;
}
.grid .column.column-8 {
  width: 66.6666666667%;
}
.grid .column.column-9 {
  width: 75%;
}
.grid .column.column-12 {
  width: 100%;
}
.grid.align-items-center {
  align-items: center;
}
.grid.justify-content-center {
  justify-content: center;
}

@media (max-width: 1024px) {
  .grid {
    gap: 40px;
  }
}
@media (max-width: 820px) {
  .grid {
    flex-direction: column;
    gap: 0;
  }
  .grid .column.column-3, .grid .column.column-4, .grid .column.column-6, .grid .column.column-8, .grid .column.column-9 {
    width: 100%;
  }
  .grid .column.column-12 {
    width: 100%;
  }
  .grid .column.column-12 > figure.media::before {
    left: -20px;
    bottom: -20px;
    width: 180px;
    height: 180px;
  }
  .grid .column.column-12 > figure.media::after {
    top: 8px;
    right: -20px;
  }
  .grid .column.column-12 > figure.media picture {
    height: 420px;
  }
}