#observablehq-main {
  container-type: inline-size;
}

.grid {
  margin: 1rem 0;
  display: grid;
  gap: 1rem;
  grid-auto-rows: 1fr;
}

.grid svg {
  overflow: visible;
}

.grid figure {
  margin: 0;
}

.grid > * > p:first-child {
  margin-top: 0;
}

.grid > * > p:last-child {
  margin-bottom: 0;
}

@container (min-width: 640px) {
  .grid-cols-2,
  .grid-cols-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .grid-cols-2 .grid-colspan-2,
  .grid-cols-2 .grid-colspan-3,
  .grid-cols-2 .grid-colspan-4,
  .grid-cols-4 .grid-colspan-2,
  .grid-cols-4 .grid-colspan-3,
  .grid-cols-4 .grid-colspan-4 {
    grid-column: span 2;
  }
}

@container (min-width: 720px) {
  .grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .grid-cols-3 .grid-colspan-2 {
    grid-column: span 2;
  }
  .grid-cols-3 .grid-colspan-3 {
    grid-column: span 3;
  }
}

@container (min-width: 1080px) {
  .grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .grid-cols-4 .grid-colspan-3 {
    grid-column: span 3;
  }
  .grid-cols-4 .grid-colspan-4 {
    grid-column: span 4;
  }
}

.grid-rowspan-2 {
  grid-row: span 2;
}
.grid-rowspan-3 {
  grid-row: span 3;
}
.grid-rowspan-4 {
  grid-row: span 4;
}
