/* Guide Pretty alignment fix:
   At a Glance + Ripple share the same five-column visual rhythm. */

.guide-glance-grid-five,
.guide-ripple-steps {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

/* Remove the asymmetric edge padding that made the column centers drift. */
.guide-glance-grid-five .guide-glance-item,
.guide-glance-grid-five .guide-glance-item:first-child,
.guide-glance-grid-five .guide-glance-item:last-child {
  padding: 18px 14px 2px;
  text-align: center;
}

/* Keep labels and user-entered values centered in both summary systems. */
.guide-glance-item span,
.guide-glance-item strong,
.guide-ripple-label,
.guide-ripple-step strong {
  text-align: center;
}

.guide-ripple-step {
  padding-left: 14px;
  padding-right: 14px;
}

/* Keep the icon centered over the same column center as its copy. */
.guide-ripple-icon {
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 1100px) {
  .guide-glance-grid-five {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .guide-glance-grid-five .guide-glance-item,
  .guide-glance-grid-five .guide-glance-item:first-child,
  .guide-glance-grid-five .guide-glance-item:last-child {
    padding: 16px 14px;
  }
}

@media (max-width: 760px) {
  .guide-glance-grid-five {
    grid-template-columns: 1fr;
  }

  .guide-glance-grid-five .guide-glance-item,
  .guide-glance-grid-five .guide-glance-item:first-child,
  .guide-glance-grid-five .guide-glance-item:last-child {
    padding: 14px 0;
    text-align: left;
  }

  .guide-glance-item span,
  .guide-glance-item strong {
    text-align: left;
  }

  .guide-ripple-step,
  .guide-ripple-label,
  .guide-ripple-step strong {
    text-align: left;
  }

  .guide-ripple-icon {
    margin-left: 0;
    margin-right: 0;
  }
}