.about-warehouses {
  display: grid;
  gap: var(--space-xl);
  padding-block: var(--space-2xl);
  background: var(--color-surface-dark);
  color: var(--color-on-accent);
}

.about-warehouses__grid {
  display: grid;
  grid-template-columns: calc((100% - var(--space-warehouse-leading)) / 3 + var(--space-warehouse-leading)) repeat(2, minmax(0, 1fr));
}

.about-warehouses__card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--size-warehouse-image);
  min-block-size: var(--size-warehouse-card-min);
  border: 1px solid var(--color-border-subtle);
  overflow: hidden;
}

.about-warehouses__card--first-column {
  padding-inline-start: var(--space-warehouse-leading);
}

.about-warehouses__card--raised { background: var(--color-surface-raised); }
.about-warehouses__card--text-only { grid-template-columns: minmax(0, 1fr); }

.about-warehouses__copy {
  display: grid;
  align-content: center;
  gap: var(--space-sm);
  min-width: 0;
  padding: var(--space-xl);
}

.about-warehouses__name {
  margin: 0;
  font-size: var(--fs-warehouse-title);
  font-weight: 274;
  line-height: var(--lh-tight);
  letter-spacing: -.015em;
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
  overflow-wrap: anywhere;
}

.about-warehouses__description {
  margin: 0;
  color: var(--color-warehouse-caption);
  font-size: var(--fs-body);
  line-height: var(--lh-tight);
  letter-spacing: -.03em;
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
  overflow-wrap: anywhere;
}

.about-warehouses__visual {
  position: relative;
  min-width: 0;
}

.about-warehouses__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

@media (width <= 80rem) {
  .about-warehouses__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .about-warehouses__card { grid-template-columns: minmax(0, 1fr) 46%; }
  .about-warehouses__card--text-only { grid-template-columns: minmax(0, 1fr); }
  .about-warehouses__card--first-column { padding-inline-start: 0; }
  .about-warehouses__copy { padding: var(--space-lg); }
}

@media (width <= 48rem) {
  .about-warehouses__grid { grid-template-columns: minmax(0, 1fr); }
  .about-warehouses__name { font-size: var(--fs-feature-title); }
  .about-warehouses__card {
    grid-template-columns: minmax(0, 1fr) 48%;
    min-block-size: 10rem;
  }
  .about-warehouses__card--text-only { grid-template-columns: minmax(0, 1fr); }
}