/* -------------- 1-1.css -------------- */
/* สไลด์สี่เหลี่ยมจัตุรัส (ใช้ aspect-ratio) */

.slide-box{
  position:relative;
  aspect-ratio:1/1;          /* ← 1:1 */
  overflow:hidden;
  border-radius:1rem;
  box-shadow:0 6px 18px rgba(0,0,0,.10);
  background:#f1f1f1;
}

.slide-box img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .35s ease;
}

.slide-box:hover img{ transform:scale(1.08); }

.slide-caption{
  position:absolute;bottom:0;left:0;right:0;
  padding:.9rem 1.2rem;
  font-size:1.1rem;
  color:#fff;
  background:linear-gradient(0deg,rgba(0,0,0,.7) 0%,transparent 100%);
}