.example-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem;margin-top:1.5rem}
.example-card{display:flex;flex-direction:column;overflow:hidden;border:1px solid #dce8ea;border-radius:16px;background:#fff}
.example-card .design-scene{border-radius:0}
.example-media{display:block;width:100%;aspect-ratio:2/1;object-fit:cover}
.example-guide{aspect-ratio:2/1;background:#e8f4f5;display:grid;place-items:center;padding:.65rem;color:#194352}
.example-guide div{background:#fff;border-radius:10px;padding:.55rem .8rem;width:min(85%,14rem);font-size:.75rem;box-shadow:0 4px 15px #19435218}
.example-guide span{display:block;border-top:1px solid #e5eeee;margin-top:.24rem;padding-top:.24rem}
.example-copy{padding:1rem;display:flex;flex-direction:column;align-items:flex-start;flex:1}
.example-copy small{color:#48616d;font-weight:700}
.example-copy h3{margin:.4rem 0}
.example-copy p{margin:0 0 .85rem}
.example-copy a{margin-top:auto}
@media(max-width:960px){.example-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.example-grid{grid-template-columns:1fr}}

.example-copy .button {
  min-height: 44px;
  padding: 12px 16px;
  gap: 12px;
}

.example-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin-top: 12px;
}

@media (max-width: 600px) {
  .example-copy .button { width: 100%; }
  .example-links a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
}