/* Shared responsive grid utilities for repeated card/rail patterns */

.hc-grid-fit-220 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.hc-grid-fit-240 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.hc-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--hc-sp-3);
}

.hc-grid-4-3-2-1 {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.hc-util-autofit-240 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--hc-sp-3, 14px);
}

.hc-util-mt-3 { margin-top: var(--hc-sp-3, 14px); }
.hc-util-my-3 { margin: var(--hc-sp-3, 14px) 0; }
.hc-util-pad-4 { padding: var(--hc-sp-4, 20px); }
.hc-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hc-link-accent { color: var(--hc-accent-dark, #7a6548); }
.hc-link-accent:hover { text-decoration: underline; text-underline-offset: 2px; }
.hc-link-underline { text-decoration: underline; text-underline-offset: 2px; }

@media (max-width: 1440px) {
  .hc-grid-4-3-2-1 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 1024px) {
  .hc-grid-4-3-2-1 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .hc-grid-2 { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  .hc-grid-4-3-2-1 {
    grid-template-columns: 1fr;
  }
}


/* ---- folded from 033-g2.css ---- */
/* =================== g2.css =================== */
.g2 {display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 20px}

.page-delivery .g2 {
align-items: stretch
}