/* ---------- perfect for ---------- */
.uses {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr));
}
.use {
  display: flex; /* a column, so the link's margin-top: auto can push it to the bottom of the card */
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: 20px 20px 18px;
  min-height: 196px;
}
.use:nth-child(odd) {
  transform: rotate(-0.8deg);
}
.use:nth-child(even) {
  transform: rotate(0.8deg);
}
.use .i {
  width: 34px;
  height: 34px;
  stroke-width: 1.8;
}
.use h3 {
  font-size: 1.45rem;
}
.use p {
  font-weight: 500;
}
.use-go {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: auto;
  padding-top: 6px;
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
@media (max-width: 640px) {
  /* phones: the cards sit in one row you swipe through, with the next card peeking in */
  .uses {
    position: relative;
    display: flex;
    gap: 14px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter);
    scrollbar-width: none;
    touch-action: pan-y; /* sideways drags are handled by js/swipe-rows.js */
    margin: -14px calc(-1 * var(--gutter)) 0;
    padding: 14px var(--gutter) 22px;
  }
  .uses::-webkit-scrollbar {
    display: none;
  }
  .use {
    flex: 0 0 80%;
    scroll-snap-align: start;
    min-height: 210px;
    display: flex;
    flex-direction: column;
  }
}
/* the big bold title, like Visit us and FAQ (.big-title, css/page/02-sections.css) */
#perfect-h {
  --big: clamp(min(72px, 22.5vw), 19vw, 140px);
}