<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Aesthetic Movie Gallery</title>
  <style>
    body {
      font-family: 'Poppins', sans-serif;
      background: linear-gradient(135deg, #cce7ff, #fdf5e6); /* pastel blue + cream */
      margin: 0;
      padding: 30px;
      color: #333;
    }

    h1 {
      text-align: center;
      font-size: 3em;
      color: #2c3e50;
      margin-bottom: 40px;
      letter-spacing: 2px;
      font-weight: 600;
    }

    .movie-list {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
      gap: 30px;
      max-width: 1200px;
      margin: 0 auto;
    }

    .movie {
      background: #ffffff;
      border-radius: 20px;
      box-shadow: 0 8px 20px rgba(0,0,0,0.1);
      overflow: hidden;
      transition: transform 0.3s ease, box-shadow 0.3s ease;
    }

    .movie:hover {
      transform: translateY(-10px);
      box-shadow: 0 12px 25px rgba(0,0,0,0.2);
    }

    .movie img {
      width: 100%;
      height: auto;
      display: block;
      border-bottom: 4px solid #cce7ff;
    }

    .movie h2 {
      font-size: 22px;
      margin: 15px 0 10px;
      color: #2c3e50;
      text-align: center;
      font-weight: 500;
    }

    .movie p {
      font-size: 15px;
      color: #555;
      padding: 0 20px 20px;
      text-align: center;
      line-height: 1.6;
    }

    /* Add subtle hover glow */
    .movie:hover h2 {
      color: #1a73e8;
      text-shadow: 0 0 8px rgba(26,115,232,0.4);
    }

    /* Footer */
    footer {
      text-align: center;
      margin-top: 50px;
      font-size: 14px;
      color: #666;
    }
  </style>
</head>
<body>
  <h1>✨ My Aesthetic Movie Gallery ✨</h1>
  <div class="movie-list">
    <div class="movie">
      <img src="https://via.placeholder.com/280x400?text=Inception" alt="Inception Poster">
      <h2>Inception</h2>
      <p>A mind-bending thriller directed by Christopher Nolan about dreams within dreams.</p>
    </div>
    <div class="movie">
      <img src="https://via.placeholder.com/280x400?text=The+Matrix" alt="The Matrix Poster">
      <h2>The Matrix</h2>
      <p>A sci-fi classic exploring reality, technology, and freedom starring Keanu Reeves.</p>
    </div>
    <div class="movie">
      <img src="https://via.placeholder.com/280x400?text=Interstellar" alt="Interstellar Poster">
      <h2>Interstellar</h2>
      <p>An epic journey through space and time, directed by Christopher Nolan.</p>
    </div>
  </div>

  <footer>
    Made with 🎬 & 💙 | Your Aesthetic Movie Page
  </footer>
</body>
</html>