.typical-groups{
  display:flex;
  flex-direction:column;
  gap:14px;
}

.typical-groups__card{
  background:linear-gradient(180deg,#ffffff 0%,#fbfcfe 100%);
  border:1px solid var(--border);
  border-radius:20px;
  box-shadow:var(--shadow-1);
  padding:14px;
  overflow:hidden;
}

.typical-groups__rail{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
}

.typical-groups__folder{
  width:100%;
  border:1px solid var(--border);
  border-radius:18px;
  background:linear-gradient(180deg,#ffffff 0%,#fbfcfe 100%);
  box-shadow:var(--shadow-1);
  padding:12px;
  text-align:left;
  transition:border-color .16s ease, box-shadow .16s ease, background-color .16s ease, transform .16s ease;
}

.typical-groups__folder:hover{
  border-color:#c8d7e8;
  box-shadow:0 8px 24px rgba(16,24,40,.08);
  transform:translateY(-1px);
}

.typical-groups__folder.is-active{
  border-color:#d3e0f0 !important;
  background:#eef4fb !important;
  box-shadow:0 10px 28px rgba(16,24,40,.08) !important;
}

.typical-groups__album{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  grid-template-rows:repeat(2,1fr);
  gap:6px;
  aspect-ratio:3 / 2;
  border-radius:14px;
  overflow:hidden;
  background:#f4f7fb;
  margin-bottom:12px;
}

.typical-groups__tile{
  background:#fff;
  border:1px solid #edf2f7;
  overflow:hidden;
  aspect-ratio:1 / 1;
}

.typical-groups__tile img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.typical-groups__meta{
  display:flex;
  flex-direction:column;
  gap:4px;
}

.typical-groups__name{
  color:var(--text);
  font-size:.96rem;
  line-height:1.1;
  font-weight:800;
}

.typical-groups__range{
  color:var(--muted);
  font-size:.82rem;
  line-height:1.15;
  font-weight:700;
}

/* desktop zoom-out stability */
.typical-groups__folder,
.typical-groups__album,
.typical-groups__tile{
  min-width:0;
}

@media (max-width: 900px){
  .typical-groups__rail{
    display:flex;
    flex-wrap:nowrap;
    gap:12px;
    overflow-x:auto;
    overflow-y:hidden;
    padding:2px 2px 10px;
    -webkit-overflow-scrolling:touch;
    scroll-snap-type:x proximity;
    scrollbar-width:thin;
    scrollbar-color:#c3cedc transparent;
  }

  .typical-groups__rail::-webkit-scrollbar{
    height:8px;
    display:block;
  }

  .typical-groups__rail::-webkit-scrollbar-track{
    background:transparent;
  }

  .typical-groups__rail::-webkit-scrollbar-thumb{
    background:#c3cedc;
    border-radius:999px;
  }

  .typical-groups__folder{
    flex:0 0 260px;
    max-width:260px;
    scroll-snap-align:start;
  }
}

@media (max-width: 767.98px){
  .typical-groups__card{
    padding:12px;
    border-radius:18px;
  }

  .typical-groups__rail{
    gap:10px;
    padding-bottom:10px;
  }

  .typical-groups__folder{
    flex:0 0 232px;
    max-width:232px;
    padding:10px;
    border-radius:16px;
  }

  .typical-groups__album{
    gap:5px;
    margin-bottom:10px;
    border-radius:12px;
  }

  .typical-groups__name{
    font-size:.9rem;
  }

  .typical-groups__range{
    font-size:.78rem;
  }
}