.back-button {
    background-color: rgba(251, 117, 117, 0.4); /* translucent grey */
    border: none;
    padding: 10px 20px;
    border-radius: 8px;
    font-size: 1rem;
    cursor: pointer;
    transition: background-color 0.2s ease;
  }
  
  .back-button:hover {
    background-color: rgba(220, 46, 46, 0.6);
  }

  .infopage {
    background-image: url(../images/paper.jpg);
    background-size: cover;
  }

  .infopage {
    max-width: 800px;
    margin: 0 auto;
    padding: 2rem;
    font-size: 1.1rem;
    line-height: 1.6;
  }
  
  .infopage p {
    margin-bottom: 1rem;
  }
  
  .about-images {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 2rem;
  }
  
  .about-images img {
    width: calc(50% - 1rem);
    border-radius: 8px;
    object-fit: cover;
  }
  
  .about-wrapper {
    max-width: 900px;
    margin: 0 auto;
    padding: 2rem;
  }
  
  .about-text {
    max-width: 600px;
    margin-bottom: 2rem;
    font-size: 1.2rem;
    line-height: 1.6;
  }
  
  .about-collage {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    justify-content: center;
  }
  
  .polaroid {
    background: rgba(255, 255, 255, 0.495);
    padding: 0.5rem;
    border-radius: 3px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
    width: 220px;
    transition: transform 0.2s ease;
  }
  
  .polaroid.small {
    width: 160px;
  }
  
  .tilt-left {
    transform: rotate(-3deg);
  }
  
  .tilt-right {
    transform: rotate(3deg);
  }
  
  .polaroid:hover {
    transform: scale(1.05);
    z-index: 2;
  }
  

  /* -------------------------------------- */
/* 📱 MOBILE FIXES FOR ABOUT PAGE         */
/* -------------------------------------- */
@media (max-width: 768px) {

  /* Background fix for iOS */
  .infopage {
    background-size: cover;
    background-attachment: scroll;
    padding: 1.5rem;
    font-size: 1rem;
  }

  /* Back button */
  .back-button {
    padding: 8px 14px;
    font-size: 0.9rem;
    margin-bottom: 20px;
  }

  /* Text block */
  .about-text {
    font-size: 1rem;
    line-height: 1.5;
    margin-bottom: 1.5rem;
  }

  /* Collage layout */
  .about-collage {
    gap: 1rem;
  }

  /* Polaroids scale down */
  .polaroid {
    width: 45vw;       /* responsive width */
    max-width: 180px;  /* prevents huge images */
    padding: 0.4rem;
  }

  .polaroid.small {
    width: 35vw;
    max-width: 140px;
  }

  /* Reduce tilt so images don’t look chaotic on tiny screens */
  .tilt-left {
    transform: rotate(-2deg);
  }

  .tilt-right {
    transform: rotate(2deg);
  }

  /* Hover effect stays the same — mobile users won’t trigger it anyway */
}