<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Village Home</title>

  <style>
    :root{
      --black:#0b0b0b;
      --white:#ffffff;
      --lightblue:#bfe6ff;
      --gold:#d4af37;
      --card:#111;
    }

    * { box-sizing: border-box; }
    body {
      margin: 0;
      font-family: Arial, Helvetica, sans-serif;
      color: var(--white);
      background: var(--black);
      line-height: 1.5;
    }

    /* ====== TOP HEADER (full width) ====== */
    .topbar{
      width: 100%;
      background: linear-gradient(90deg, #000, #0a2233);
      border-bottom: 2px solid var(--gold);
    }
    .topbar-inner{
      max-width: 1100px;
      margin: 0 auto;
      padding: 14px 16px;
      display: flex;
      align-items: center;
      gap: 14px;
    }
    .logo{
      width: 56px;
      height: 56px;
      border-radius: 12px;
      border: 2px solid var(--gold);
      background: #0d2a3d;
      display: grid;
      place-items: center;
      font-weight: 700;
      color: var(--lightblue);
      flex: 0 0 auto;
    }
    .site-title{
      display: flex;
      flex-direction: column;
      gap: 2px;
    }
    .site-title h1{
     color: white;
      margin: 0;
      font-size: 22px;
      letter-spacing: .4px;
    }
    .site-title small{
      color: white;
    }

    /* ====== MAIN CONTENT ====== */
    .wrap{
      max-width: 1100px;
      margin: 0 auto;
      padding: 18px 16px 26px;
    }

    .main-copy{
      background: rgba(255,255,255,0.04);
      border: 1px solid rgba(191,230,255,0.25);
      border-left: 4px solid var(--gold);
      border-radius: 14px;
      padding: 14px 14px;
      margin: 16px 0 18px;
    }
    .main-copy h2{
      margin: 0 0 8px 0;
      font-size: 18px;
      color: var(--lightblue);
    }

    /* ====== IMAGE GRID ======
       Desktop: 4 across if space allows.
       Tablet: 2 across.
       Mobile: 1 per row.
    */
    .grid{
      display: grid;
      gap: 16px;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      align-items: start;
    }

    /* Each frame is 260x260 on wider screens */
    .frame{
      border: 2px solid var(--gold);
      border-radius: 16px;
      background: var(--card);
      padding: 10px;
      box-shadow: 0 10px 22px rgba(0,0,0,0.35);

      /* key: fixed-ish on desktop, flexible on mobile */
      aspect-ratio: 1 / 1;   /* keeps the frame square */
      max-width: 260px;      /* “260px x 260px” target on desktop */
      width: 100%;           /* but can shrink */
      margin: 0 auto;        /* centers inside its grid cell */
    }

    /* The image scales responsively inside the frame */
    .frame img{
      width: 100%;
      height: 100%;
      display: block;
      object-fit: cover;     /* crops to fill square without distortion */
      border-radius: 12px;
      border: 1px solid rgba(191,230,255,0.25);
    }

    .caption{
      margin-top: 8px;
      text-align: center;
      color: var(--lightblue);
      font-size: 13px;
    }

    /* ====== RESPONSIVE BREAKPOINTS ====== */
    @media (max-width: 980px){
      .grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
    }
    @media (max-width: 560px){
      .topbar-inner{ flex-direction: row; }
      .site-title h1{ font-size: 18px; }
      .grid{ grid-template-columns: 1fr; }
      .frame{ max-width: 360px; } /* a bit larger on small screens if you want */
    }

    /* ====== FOOTER (full width) ====== */
    footer{
      width: 100%;
      margin-top: 22px;
      background: #071621;
      border-top: 2px solid var(--gold);
    }
    .footer-inner{
      max-width: 1100px;
      margin: 0 auto;
      padding: 14px 16px;
      color: rgba(255,255,255,0.85);
      font-size: 14px;
      display: flex;
      flex-wrap: wrap;
      gap: 10px 18px;
      justify-content: space-between;
    }
    .footer-inner a{
      color: var(--lightblue);
      text-decoration: none;
      border-bottom: 1px dotted rgba(191,230,255,0.6);
    }
    .footer-inner a:hover{ border-bottom-style: solid; }
  </style>
</head>

<body>

  <!-- Full width top area -->
  <header class="topbar">
    <div class="topbar-inner">
      <!-- Replace this with your logo image if you want -->
      <div class="logo">VH</div>

      <div class="site-title">
        <h1>Village Home</h1>
        <small>Welcome to Village Home</small>
      </div>
    </div>
  </header>

  <main class="wrap">
    <section class="main-copy">
      <h2>Main Body Text</h2>
      this is the main body text. Yada yada yada.
    </section>

    <!-- Images -->
    <section class="grid" aria-label="Photo gallery">
      <div>
        <div class="frame">
          <img src="image1.jpg" alt="Village Home image 1">
        </div>
        <div class="caption">Image 1</div>
      </div>

      <div>
        <div class="frame">
          <img src="image2.jpg" alt="Village Home image 2">
        </div>
        <div class="caption">Image 2</div>
      </div>

      <div>
        <div class="frame">
          <img src="image3.jpg" alt="Village Home image 3">
        </div>
        <div class="caption">Image 3</div>
      </div>

      <div>
        <div class="frame">
          <img src="image4.jpg" alt="Village Home image 4">
        </div>
        <div class="caption">Image 4</div>
      </div>
    </section>
  </main>

  <!-- Full width footer area -->
  <footer>
    <div class="footer-inner">
      <div>© 2025 Village Home</div>
      <div>
        <a href="#">Contact</a> • <a href="#">Privacy</a> • <a href="#">About</a>
      </div>
    </div>
  </footer>

</body>
</html>
