.ocf-compare-roofing-materials { padding-block: clamp(16px, 2.5vw, 28px); }

.ocf-compare-roofing-materials { background: var(--ocf-bg); }
.ocf-compare-roofing-materials .ocf-materials-heading { margin-bottom: calc(var(--ocf-grid-gap) * 0.75); }
.ocf-compare-roofing-materials .ocf-materials-heading .heading-2 { margin: 0; }
.ocf-compare-roofing-materials .ocf-materials-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--ocf-grid-gap); align-items: stretch; }
.ocf-compare-roofing-materials .ocf-material-card { display: flex; flex-direction: column; min-width: 0; height: 100%; overflow: hidden; background: var(--ocf-bg-alt); border: var(--card-border-width) solid var(--ocf-border-light); }
.ocf-compare-roofing-materials .ocf-material-card__image { aspect-ratio: 16 / 8; overflow: hidden; background: var(--ocf-bg-alt); }
.ocf-compare-roofing-materials .ocf-material-card__image img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ocf-compare-roofing-materials .ocf-material-card__body { display: flex; flex: 1; flex-direction: column; align-items: flex-start; gap: calc(var(--ocf-space-unit) * 0.5); padding: calc(var(--ocf-space-unit) * 1); }
.ocf-compare-roofing-materials .ocf-material-card__body h3 { margin: 0; color: var(--ocf-heading); font-family: var(--font-heading); font-size: var(--font-h3-size); line-height: 1.2; }
.ocf-compare-roofing-materials .ocf-material-card__body p { margin: 0; color: var(--ocf-body); }
.ocf-compare-roofing-materials .ocf-material-card__body .ocf-text-link { margin-top: auto; padding-top: calc(var(--ocf-space-unit) * 0.25); color: var(--ocf-primary); font-weight: 700; }
.ocf-compare-roofing-materials .ocf-text-link:hover { color: var(--ocf-secondary-hover); }
.ocf-compare-roofing-materials .ocf-materials-guide-link { margin: calc(var(--ocf-grid-gap) * 0.75) 0 0; text-align: center; }
.ocf-compare-roofing-materials .ocf-materials-guide-link .ocf-text-link { color: var(--ocf-primary); font-weight: 700; }
@media (max-width: 720px) { .ocf-compare-roofing-materials .ocf-materials-grid { grid-template-columns: 1fr; gap: calc(var(--ocf-grid-gap) * 0.75); } .ocf-compare-roofing-materials .ocf-material-card { display: grid; grid-template-columns: minmax(112px, 34%) minmax(0, 1fr); } .ocf-compare-roofing-materials .ocf-material-card__image { aspect-ratio: 1 / 1; height: 100%; min-height: 132px; } .ocf-compare-roofing-materials .ocf-material-card__body { padding: calc(var(--ocf-space-unit) * 0.75); } .ocf-compare-roofing-materials .ocf-material-card__body h3 { font-size: 1.125rem; } }
@media (max-width: 420px) { .ocf-compare-roofing-materials .ocf-material-card { grid-template-columns: 104px minmax(0, 1fr); } .ocf-compare-roofing-materials .ocf-material-card__image { min-height: 148px; } }

/* OCF_AGENT_BLOCK:mobile-material-cards START */
@media (max-width: 720px) {
  .ocf-compare-roofing-materials .ocf-material-card {
    display: flex;
    flex-direction: column;
  }
  .ocf-compare-roofing-materials .ocf-material-card__image {
    width: 100%;
    aspect-ratio: auto;
    height: clamp(150px, 48vw, 220px);
    min-height: 0;
  }
  .ocf-compare-roofing-materials .ocf-material-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .ocf-compare-roofing-materials .ocf-material-card__body {
    min-height: 0;
    padding: calc(var(--ocf-space-unit) * 0.75);
  }
  .ocf-compare-roofing-materials .ocf-materials-guide-link {
    margin-bottom: calc(var(--ocf-section-compact-pad) + 88px);
  }
}
/* OCF_AGENT_BLOCK:mobile-material-cards END */