:root{
  --bg: #f8f6f1;
  --text: #222;
}
*{ box-sizing: border-box; }
html, body{ margin:0; padding:0; background:var(--bg); color:var(--text); font-family:'Lato', sans-serif; }

.card-section{
  min-height: 100svh;
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
}
.card-wrap{ width:100%; display:flex; justify-content:center; align-items:center; }

.flip-container{
  perspective: 1000px;
  width: clamp(280px, 88vw, 520px);
  margin: 0 auto;
  overflow: visible;
}
.flipper{
  position: relative;
  width: 100%;
  aspect-ratio: 2 / 3;
  transform-style: preserve-3d;
  transition: transform .6s;
}
.front, .back{
  position:absolute; inset:0;
  border-radius: 8px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  backface-visibility: hidden;
}
.front{ background-image: url('front.webp'); transform: rotateY(0deg); }
.back{ background-image: url('back.webp'); transform: rotateY(180deg); }

/* Side flip button for desktop */
.flip-btn{
  position:absolute;
  left:-48px;
  top:50%;
  transform: translateY(-50%);
  width:40px; height:40px;
  border-radius:50%;
  border:none;
  background:#fff;
  box-shadow:0 2px 4px rgba(0,0,0,.2);
  font-size:18px;
  cursor:pointer;
}
.flipped .flipper{ transform: rotateY(180deg); }

/* Mobile: hide button, tap anywhere to flip, centered */
@media (max-width:480px){
  .flip-btn{ display:none; }
  .front, .back{ cursor:pointer; }
  .card-wrap{ padding-left:0; }
  .flip-container{ width: clamp(280px, 92vw, 520px); }
}