.alt-iconbox { background: var(--alt-ib-bg); }

.alt-iconbox__header {
  margin-bottom: 40px;
  text-align: center;
}
.alt-iconbox__header h2 { color: var(--alt-ib-heading); }
.alt-iconbox__sub { margin-top: 12px; }

.alt-iconbox__grid {
  display: grid;
  grid-template-columns: repeat(var(--alt-ib-cols-d), minmax(0, 1fr));
  gap: var(--alt-ib-gap);
}

.alt-iconbox__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: var(--alt-ib-align);
}

.alt-iconbox__grid--horizontal .alt-iconbox__item {
  flex-direction: row;
  align-items: flex-start;
  text-align: left;
}

/* Centre alignment should centre the item itself, not just its text. */
.alt-iconbox__item { align-items: var(--alt-ib-align); }
.alt-iconbox__grid--vertical .alt-iconbox__item { align-items: center; }

.alt-iconbox__icon {
  flex: 0 0 auto;
  width: var(--alt-ib-icon);
}
.alt-iconbox__icon-img { width: 100%; height: auto; }

.alt-iconbox__content { flex: 1 1 auto; min-width: 0; }

.alt-iconbox__title {
  margin: 0 0 8px;
  color: var(--alt-ib-heading);
  font-family: var(--alt-font-heading);
  font-size: var(--alt-ib-title-size);
  font-weight: var(--alt-ib-title-weight);
  line-height: var(--alt-lh-h4);
}
.alt-iconbox__title-link { color: inherit; text-decoration: none; }
.alt-iconbox__title-link:hover { color: var(--alt-brand); }

.alt-iconbox__text {
  color: var(--alt-ib-text);
  font-size: var(--alt-ib-text-size);
  line-height: var(--alt-body-lh);
}
.alt-iconbox__text p { margin: 0; }
.alt-iconbox__text p + p { margin-top: 0.7em; }

@media (max-width: 1279px) {
  .alt-iconbox__grid { grid-template-columns: repeat(var(--alt-ib-cols-t), minmax(0, 1fr)); }
  .alt-iconbox__header { margin-bottom: 30px; }
  .alt-iconbox__title { font-size: var(--alt-ib-title-size-t); }
}

@media (max-width: 767px) {
  .alt-iconbox__grid { grid-template-columns: repeat(var(--alt-ib-cols-m), minmax(0, 1fr)); }
  .alt-iconbox__header { margin-bottom: 24px; }
  .alt-iconbox__title { font-size: var(--alt-ib-title-size-m); }
}

/* ---- anchor colour re-assertion (see fix_link_specificity) ---- */
a.alt-iconbox__title-link { color: inherit; }
a.alt-iconbox__title-link:hover { color: var(--alt-brand); }
