body {
  background-color: #E9E9E9;
  color: #333;
  font-size: 16px;
}

.photo-album {
  font-family: "Lucida handwriting", "Snell Roundhand", "Helvetica Neue", Arial, Helvetica, sans-serif;    
}

.amp {
  font-family: Garamond, Baskerville, Georgia, serif !important;
  font-style: italic;
  font-weight: normal;
  border: none;
}

a.polaroid {
  display: block;
  text-decoration: none;
  color: #333;
  padding: 10px 10px 20px 10px;
  width: 150px;
  border: 1px solid #BFBFBF;
  background-color: white;
  z-index: 2;
  font-size: 0.7em;
  box-shadow: 2px 2px 4px rgba(0,0,0,0.3);
  transition: transform 0.5s ease-in;
}

a.polaroid:hover,
a.polaroid:focus,
a.polaroid:active {
  z-index: 999;
  border-color: #6A6A6A;
  transform: rotate(0deg);
}

.polaroid img {
  margin: 0 0 15px;
  width: 150px;
  height: 150px;
  object-fit: cover;
}

a img {
  border: none;
  display: block;
}

/* =========================
   PHOTO ALBUM (DESKTOP - UNCHANGED)
========================= */

.photo-album {
  position: relative;
  width: 900px;
  height: 450px;

  left: 50%;
  transform: translateX(-50%);
  margin: 5em 0 0 0;
}

.photo-album .polaroid {
  position: absolute;
}

.photo-album h1 {
  position: absolute;
  z-index: 5;
  top: 150px;
  text-align: center;
  width: 100%;
  line-height: 1.9;
}

.photo-album h1 span {
  background-color: white;
  font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
  padding: 0.4em 0.8em 0.3em 0.8em;
  box-shadow: 2px 2px 4px rgba(0,0,0,0.3);
  border: 1px solid #6A6A6A;
}

/* sizes */
.photo-album .small { width: 75px; padding: 6px; font-size: 0.6em; }
.photo-album .small img { width: 75px; height: 75px; }

.photo-album .medium { width: 200px; padding: 13px; font-size: 0.8em; }
.photo-album .medium img { width: 200px; height: 200px; }

.photo-album .large { width: 300px; padding: 20px; font-size: 1em; }
.photo-album .large img { width: 300px; height: 300px; }

/* ALL IMAGE POSITIONS (UNCHANGED) */
.photo-album .img1 { bottom: 10px; right: 365px; transform: rotate(10deg); }
.photo-album .img2 { top: 50px; right: 20px; transform: rotate(-4deg); }
.photo-album .img3 { left: 400px; top: 0; transform: rotate(-5deg); }
.photo-album .img4 { top: 10px; left: 495px; transform: rotate(-20deg); }
.photo-album .img5 { bottom: 0; right: 0; transform: rotate(1deg); }
.photo-album .img6 { bottom: 10px; right: 156px; transform: rotate(6deg); }
.photo-album .img7 { bottom: 0; left: 400px; transform: rotate(-10deg); }
.photo-album .img8 { bottom: -20px; left: 700px; transform: rotate(-8deg); }
.photo-album .img9 { bottom: 0; left: 0; transform: rotate(-8deg); }
.photo-album .img10 { top: 0; left: 20px; transform: rotate(8deg); }
.photo-album .img11 { top: 0; right: 0; transform: rotate(-8deg); }
.photo-album .img12 { top: 0; left: 680px; transform: rotate(18deg); }
.photo-album .img13 { bottom: -20px; right: 630px; transform: rotate(4deg); }
.photo-album .img14 { top: 90px; left: 430px; transform: rotate(15deg); }
.photo-album .img15 { left: 176px; top: 20px; transform: rotate(-8deg); }

a:hover,
a:focus {
  z-index: 5;
}

/* =========================
   MOBILE FIX (NO GAP ISSUE)
========================= */

@media (max-width: 768px) {

  body {
    overflow-x: hidden;
  }

  .photo-album {
    width: 900px;
    height: 450px;

    left: 50%;
    transform: translateX(-50%) scale(0.55);
    transform-origin: top center;

    margin: 1.2em 0 0 0;

    /* 🔥 FIX: removes large invisible bottom space */
    margin-bottom: -140px;
  }
}

/* =========================
   PORTRAIT FIX (MATCHED)
========================= */

@media (max-width: 768px) and (orientation: portrait) {

  .photo-album {
    width: 900px;
    height: 450px;

    left: 50%;
    transform: translateX(-50%) scale(0.45);
    transform-origin: top center;

    margin: 1.2em 0 0 0;

    /* 🔥 stronger fix for portrait */
    margin-bottom: -230px;
  }
}