.hero-feature-themes{
    margin: 14px 0 18px;
  }

  .hero-feature-head{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:12px;
    margin-bottom:10px;
  }

  .hero-feature-copy{
    margin:0;
    font-size:13px;
    line-height:1.6;
    color:#667085;
  }

  .hero-feature-scroll{
    display:flex;
    gap:14px;
    overflow-x:auto;
    padding:4px 2px 10px;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
  }

  .hero-feature-scroll::-webkit-scrollbar{
    height:8px;
  }

  .hero-feature-scroll::-webkit-scrollbar-thumb{
    background:rgba(148,163,184,.45);
    border-radius:999px;
  }

  .hero-feature-card{
    position:relative;
    flex:0 0 min(78vw, 280px);
    min-width:240px;
    background:#fff;
    border:1px solid #e7ebf2;
    border-radius:20px;
    overflow:hidden;
    text-decoration:none;
    box-shadow:0 10px 28px rgba(15,23,42,.08);
    scroll-snap-align:start;
    transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  }

  .hero-feature-card:hover{
    transform:translateY(-2px);
    box-shadow:0 14px 34px rgba(15,23,42,.12);
    border-color:#d7deea;
  }

  .hero-feature-image-wrap{
    position:relative;
    aspect-ratio: 16 / 10;
    background:#f5f7fb;
  }

  .hero-feature-image{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
  }

  .hero-feature-badge{
    position:absolute;
    left:12px;
    top:12px;
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:6px 10px;
    border-radius:999px;
    font-size:12px;
    font-weight:700;
    color:#fff;
    background:rgba(15,23,42,.62);
    backdrop-filter:blur(6px);
  }

  .hero-feature-body{
    padding:14px 14px 16px;
  }

  .hero-feature-title{
    margin:0 0 6px;
    font-size:16px;
    line-height:1.45;
    font-weight:800;
    color:#101828;
  }

  .hero-feature-desc{
    margin:0;
    font-size:13px;
    line-height:1.65;
    color:#667085;
  }

  .hero-feature-arrow{
    display:inline-flex;
    align-items:center;
    gap:6px;
    margin-top:10px;
    font-size:12px;
    font-weight:700;
    color:#1976D2;
  }

  @media (min-width: 900px){
    .hero-feature-card{
      flex:0 0 280px;
    }
  }