.case-top {
  /*margin-top: 7rem;*/
  padding: 58px 58px 20px 58px;
}

/* Container: horizontal, wraps to new lines */
.bubble-list{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top: 2rem;
}

/* Core pill */
.bubble{
  text-decoration: none;
  appearance:none;
  border:0;
  display: inline-flex;
  cursor:pointer;
  padding:13px 30px;
  border-radius:12px;
  background:#F8F9FF;             /* base */
  color:#1B5EC9;                   /* text */
  font:500 14px/1.2 "Onest", system-ui, sans-serif;
  transition:background-color .2s ease, box-shadow .2s ease, transform .08s ease;
  /*white-space:nowrap;*/
  text-overflow: ellipsis;
  min-width: 0;
  flex: 0 1 auto;
}

/* Hover: a touch darker than base */
.bubble:hover{
  background:#EEF1FF;              /* hover */
  box-shadow:0 1px 4px rgba(27,94,201,.08);
}

/* Press feedback (optional) */
.bubble:active{
  transform:translateY(1px);
}

/* Keyboard focus */
.bubble:focus-visible{
  outline:2px solid #1B5EC9;
  outline-offset:2px;
}

/* Selected state */
.bubble.is-active{
  background:#D9DEFB;              /* selected */
  box-shadow:0 2px 8px rgba(27,94,201,.12);
}

.case-main {
  padding: 58px;
}

.problem {
  padding: 30px;
  width: 50%;
  border-radius: 20px;
  background: #FAFAFA;
}

.top-title-problem, .top-title-solution {
  color: #1E1E1E;
  font-family: "Onest";
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 150%; /* 24px */
}

/* Layout variables */
.gallery{ --gap:20px; --radius:16px; --per-view:2; }
@media (max-width: 800px){ .gallery{ --per-view:1; } }
@media (min-width: 1200px){ .gallery{ --per-view:3; } }

/* Viewport with snap scrolling */
.viewport{
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch;
  padding-bottom: 8px;              /* room above controls */
}

.viewport{
  scroll-padding-left: var(--gap);
  scroll-padding-right: var(--gap);
}

/* Hide scrollbar (keeps scrollability) */
.viewport::-webkit-scrollbar{ display:none; }
.viewport{ scrollbar-width: none; }

/* Track & slides */
.track{
  display:flex;
  gap:var(--gap);
  padding: 0;
}

.slide{
  scroll-snap-align:start;
  flex:0 0 calc((100% - (var(--gap) * (var(--per-view) - 1))) / var(--per-view));
  border-radius:var(--radius);
  /*aspect-ratio: 16/10;              !* nice card ratio *!*/
  width:auto;
  height:auto;
  object-fit:contain;
  background:#ddd;                  /* placeholder while loading */
  box-shadow:0 2px 12px rgba(0,0,0,.06);
  max-height: 300px;
}

/* Controls */
.controls{
  display:flex;
  gap:10px;
  position:relative;
  margin:10px var(--gap) 0;
}

.nav{
  width:36px; height:36px;
  border-radius:999px;
  border:0;
  background:#f2f2f2;
  font-size:18px; line-height:36px;
  cursor:pointer;
  box-shadow:0 1px 3px rgba(0,0,0,.08);
  transition:background .2s ease, transform .06s ease, opacity .2s ease;
}
.nav:hover{ background:#e9e9e9; }
.nav:active{ transform:translateY(1px); }
.nav[disabled]{ opacity:.45; cursor:default; }




@media (min-width: 0px) and (max-width: 500px) {
  .case-top {
    /*margin-top: 7rem;*/
    padding: 15px 5px 20px 5px;
  }

  .case-main {
    padding: 15px 5px;
  }

  .track {
    flex-direction: column;
  }

  .controls {
    display: none;
  }

  .con
}