/*
 * Guide essentials (sections/guide-essentials.liquid).
 *
 * A strip of short cards: icon, title, one sentence. Three across from
 * tablet up, one column on a phone. Cards are quiet - a hairline and a tint,
 * not a lifted panel - because nothing here is for sale; they are the
 * reasons, and the products are elsewhere on the page.
 */

.guide-essentials__head {
  max-width: 62ch;
  margin-bottom: var(--space-6);
}

.guide-essentials__heading {
  margin: 0 0 var(--space-3);
}

.guide-essentials__intro {
  color: var(--color-muted);
}

.guide-essentials__intro > p {
  margin: 0;
}

.guide-essentials {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

@media screen and (min-width: 750px) {
  .guide-essentials {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media screen and (min-width: 990px) {
  .guide-essentials {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-5);
  }
}

.guide-essential {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-5);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-m);
  background-color: color-mix(in srgb, var(--color-ink) 3%, transparent);
}

.guide-essential__icon {
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-m);
  background-color: color-mix(in srgb, var(--color-brand) 12%, transparent);
  color: var(--color-brand);
}

.guide-essential__title {
  margin: 0;
}

.guide-essential__text {
  margin: 0;
  color: var(--color-muted);
}