* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: "Open Sans", sans-serif;
}

.story-screen {
  padding-top: 22px;
}
.brand--top {
  margin-top: 40px;
}

.brand--top img {
  width: 11.625rem;
  height: auto;
  position: absolute;
  /* left: 50%; */
  top: 10px;
}

/* “Pick a story!” circle */
.pick-circle {
  position: absolute;
  right: 2.375rem;
  top: 9rem;
  width: 8.75rem;
  z-index: 1;
  pointer-events: none;
}

/* Card grid (positions matched to your screenshot for 375×667) */
.cards {
  position: relative;
  margin-top: 20px;
  height: 100%;
}
.card {
  position: absolute;
  display: block;
  filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.35));
}
.card img {
  display: block;
  width: 8.5rem;
  height: auto;
}

.c1 {
  left: 0.5rem;
  top: 5.3125rem;
} /* Maya to the Rescue!  */
.c2 {
  right: 0.5rem;
  top: 14.375rem;
} /* Vani’s Zoo Day!      */
.c3 {
  left: 0.5rem;
  top: 24.0625rem;
} /* Captain cleans up…   */
.c4 {
  right: 0.5rem;
  top: 32.8125rem;
} /* Story 4              */

@media (max-width: 360px) {
  .card img {
    width: 8.75rem;
  }
  .c2 {
    top: 200px;
  }
  .c3 {
    top: 360px;
  }
  .c4 {
    top: 500px;
  }
}