/* explainer-card.css: ported 1:1 from foodforjoe.es CSS modules (hash suffixes removed). */

/* ── ExplainerCard ── */
.ExplainerCard_card {
  display:flex;
  flex-direction:row;
  align-items:flex-start;
  width:100%;
  gap:16px;
  padding:16px;
  border-radius:24px;
  background:var(--color-beige);
  color:var(--color-green);
  font-family:var(--font-family-serif-light);
  font-size:16px;
  line-height:1.4;
}

.ExplainerCard_icon {
  flex-shrink:0;
  width:32px;
  height:32px;
}

.ExplainerCard_content {
  flex:1 1;
  min-width:0;
}

.ExplainerCard_content>:first-child {
  margin-top:0;
}

.ExplainerCard_content>:last-child {
  margin-bottom:0;
}

.ExplainerCard_card.ExplainerCard_banner {
  flex-direction:row;
  align-items:center;
  justify-content:center;
  gap:16px;
  max-width:631px;
  padding:16px 24px;
  border-radius:100px;
  background:var(--color-pale-green);
  text-align:center;
}

.ExplainerCard_card.ExplainerCard_banner .ExplainerCard_icon {
  width:52px;
  height:52px;
}

.ExplainerCard_card.ExplainerCard_banner .ExplainerCard_content {
  flex:0 1 auto;
}

@media (min-width:1400px) {
  .ExplainerCard_card {
    flex-direction:column;
    justify-content:center;
    gap:8px;
    max-width:304px;
    font-size:18px;
  }
}

@media (min-width:1400px) {
  .ExplainerCard_icon {
    width:40px;
    height:40px;
  }
}

@media (min-width:960px) {
  .ExplainerCard_card.ExplainerCard_banner {
    flex-direction:row;
    gap:24px;
    padding:16px 24px 16px 32px;
  }
}

@media (min-width:960px) {
  .ExplainerCard_card.ExplainerCard_banner .ExplainerCard_icon {
    width:64px;
    height:64px;
  }
}