.map-thumb {
  position: absolute;
  top: 34%;
  left: 14%;
  width: 72%;
  height: 72px;
  overflow: hidden;
  border: 2px solid rgba(21, 25, 20, .8);
  border-radius: 13px;
  background: #fff;
  box-shadow: 4px 5px 0 rgba(21, 25, 20, .85);
  transform: rotate(-2deg);
}

.map-anak .map-thumb { top: 35%; transform: rotate(2deg); }
.map-python .map-thumb { top: 31%; height: 78px; }
.map-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.map-thumb::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 0 1px rgba(255,255,255,.3); pointer-events: none; }

.media-stack { position: relative; min-height: 420px; margin: 8px 0 8px 10px; }
.media-stack figure, .class-collage figure, .python-collage figure { margin: 0; }
.media-stack img, .class-collage img, .python-collage img { display: block; width: 100%; height: 100%; object-fit: cover; }
.media-main { position: absolute; z-index: 1; inset: 18px 12px 72px 38px; overflow: hidden; border: 8px solid #1c2324; border-radius: 24px; background: #fff; box-shadow: 0 26px 60px rgba(7,61,86,.23); transform: rotate(2deg); }
.media-main img { object-position: center; }
.media-main figcaption { position: absolute; left: 14px; right: 14px; bottom: 14px; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 13px; border-radius: 12px; background: rgba(20,26,25,.88); color: white; backdrop-filter: blur(8px); }
.media-main figcaption span { color: #80d8ff; font-size: 8px; font-weight: 900; letter-spacing: .11em; }
.media-main figcaption strong { font-size: 11px; }
.media-float { position: absolute; z-index: 2; width: 39%; overflow: hidden; border: 5px solid white; border-radius: 16px; background: white; box-shadow: 0 14px 30px rgba(21,25,20,.22); }
.media-float img { aspect-ratio: 16 / 9; }
.media-float figcaption { padding: 7px 9px 8px; color: #343b35; font-size: 8px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.media-float-a { left: 0; bottom: 18px; transform: rotate(-5deg); }
.media-float-b { right: -7px; bottom: 3px; transform: rotate(5deg); }

.class-collage { position: relative; width: 100%; min-height: 250px; margin: 22px 0 12px; }
.class-photo { position: absolute; overflow: hidden; border: 4px solid #fff; border-radius: 18px; background: #fff; box-shadow: 0 14px 28px rgba(86,27,19,.2); }
.class-photo img { min-height: 0; }
.class-photo figcaption { position: absolute; left: 8px; right: 8px; bottom: 8px; padding: 8px 10px; border-radius: 10px; background: rgba(255,255,255,.9); color: #241c19; font-size: 10px; font-weight: 900; backdrop-filter: blur(6px); }
.class-photo figcaption strong, .class-photo figcaption span { display: block; }.class-photo figcaption span { color: #765c54; font-size: 8px; margin-top: 2px; }
.class-photo-main { z-index: 2; left: 2%; top: 3px; width: 43%; height: 225px; transform: rotate(-4deg); }.class-photo-main img { object-position: center 20%; }
.class-photo-story { z-index: 3; right: 1%; top: 2px; width: 54%; height: 124px; transform: rotate(3deg); }.class-photo-story img { object-position: center 28%; }
.class-photo-animation { z-index: 4; right: 3%; bottom: 2px; width: 49%; height: 118px; transform: rotate(-2deg); }.class-photo-animation img { object-position: center 25%; }

.python-collage { position: relative; width: 100%; min-height: 255px; margin: 25px 0 18px; }
.python-slide, .python-book { position: absolute; overflow: hidden; border: 4px solid #fff; border-radius: 15px; background: #fff; box-shadow: 0 16px 30px rgba(0,0,0,.3); }
.python-slide-main { z-index: 1; left: 0; top: 0; width: 76%; height: 142px; transform: rotate(-2deg); }.python-slide-main img, .python-slide-install img { object-fit: cover; }
.python-slide-install { z-index: 2; right: 0; bottom: 0; width: 73%; height: 132px; transform: rotate(3deg); }
.python-book { z-index: 3; left: 2%; bottom: -2px; width: 27%; height: 150px; transform: rotate(-6deg); }.python-book img { object-fit: cover; object-position: top; }

@media (max-width: 1050px) {
  .media-stack { min-height: 500px; margin-top: 36px; }
  .media-main { inset: 10px 25px 82px 45px; }
  .class-collage, .python-collage { max-width: 620px; }
}

@media (max-width: 720px) {
  .map-thumb { left: 12%; width: 76%; height: 59px; border-radius: 10px; box-shadow: 3px 4px 0 rgba(21,25,20,.8); }
  .map-python .map-thumb { height: 61px; }
  .media-stack { min-height: 360px; margin: 24px 0 0; }
  .media-main { inset: 10px 7px 75px 24px; border-width: 5px; border-radius: 17px; transform: none; }
  .media-main figcaption { left: 8px; right: 8px; bottom: 8px; padding: 8px; }.media-main figcaption strong { font-size: 8px; }
  .media-float { width: 42%; border-width: 3px; border-radius: 12px; }.media-float-a { left: -2px; }.media-float-b { right: -3px; }
  .class-collage { min-height: 235px; }.class-photo-main { height: 210px; }.class-photo-story { height: 113px; }.class-photo-animation { height: 108px; }
  .python-collage { min-height: 235px; }.python-slide-main { height: 125px; }.python-slide-install { height: 118px; }.python-book { height: 136px; }
}