/* Mio Decor 8.64.4 — benefits component. Only this file owns benefit cards. */
#benefits.benefits-section {
  height: auto;
  min-height: 0;
  overflow: visible;
  padding-block: var(--mio-space-section);
}
#benefits .section-title {
  margin: 0 0 var(--mio-space-heading);
  text-align: center;
}
#benefits .section-title > span { display: block; }
#benefits .section-title > span:first-child { color: var(--mio-text); }
#benefits .section-title > .accent { color: var(--mio-primary); }
#benefits .benefit-grid {
  display: grid;
  width: 100%;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 18px;
  align-items: stretch;
}
#benefits .benefit-card {
  display: flex;
  min-width: 0;
  min-height: 128px;
  height: auto;
  padding: 16px 10px;
  margin: 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border-radius: 8px;
  background: #4084bb;
  color: #fff;
  text-align: center;
}
#benefits .benefit-card > .mio-icon {
  display: block;
  flex: 0 0 auto;
  width: 17px;
  height: 17px;
  stroke-width: 1.55;
}
#benefits .benefit-card__content { width: 100%; min-width: 0; }
#benefits .benefit-card h3 {
  margin: 0;
  color: inherit;
  font: 600 11px/1.3 var(--mio-font-body);
  overflow-wrap: break-word;
}
#benefits .benefit-card p {
  margin: 4px 0 0;
  color: rgba(255,255,255,.96);
  font: 400 10.5px/1.4 var(--mio-font-body);
  overflow-wrap: break-word;
}
/* The additional Figma tile is mobile-only. Desktop still has seven saved tiles. */
#benefits .benefit-card--mobile-extra { display: none; }
@media (min-width: 761px) and (max-width: 1200px) {
  #benefits .benefit-grid { grid-template-columns: repeat(4, minmax(0,1fr)); gap: 14px; }
}
@media (max-width: 760px) {
  #benefits.benefits-section {
    padding-block: 36px 42px;
  }
  #benefits .section-title {
    margin-bottom: 17px;
    font-size: clamp(20px, 5.6vw, 22px);
    line-height: 1.2;
    letter-spacing: -.35px;
  }
  #benefits .benefit-grid {
    width: min(100%, 300px);
    margin-inline: auto;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 20px;
    row-gap: 15px;
  }
  #benefits .benefit-card,
  #benefits .benefit-card--mobile-extra {
    display: flex;
    min-height: 94px;
    height: auto;
    padding: 12px 8px;
    gap: 5px;
    border-radius: 11px;
    background: #4088bd;
  }
  #benefits .benefit-card > .mio-icon { width: 15px; height: 15px; }
  #benefits .benefit-card h3 { font-size: 10.5px; line-height: 1.28; }
  #benefits .benefit-card p { font-size: 9.8px; line-height: 1.34; margin-top: 3px; }
}
@media (max-width: 359px) {
  #benefits .benefit-grid { column-gap: 12px; row-gap: 12px; }
  #benefits .benefit-card { padding-inline: 7px; }
}