:root {
      --accent: #222;
      --main-bg: rgba(255,255,255,0.9); 
      --grid-width: 920px;
      --font-head: "Poppins", sans-serif;
      --font-body: "Roboto", sans-serif;
    }

    *, *::before, *::after { box-sizing: border-box; }
    html, body { height: 100%; margin: 0; font-family: var(--font-body); color: #111; }

    body {
      background-color: #f0f0f0;
    }

    main.site-grid {
      max-width: var(--grid-width);
      width: min(96vw, var(--grid-width));
      margin: 20px auto;
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      grid-template-rows: 72px 360px 1fr 60px;
      grid-template-areas:
        "header header header header"
        "hero hero hero hero"
        "c1 c2 c3 c4"
        "footer footer footer footer";
      background: var(--main-bg);
      border: 1px solid var(--accent);
    }

    .site-grid > * {
      padding: 18px 20px;
      background: transparent;
    }

    header.site-header {
      grid-area: header;
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: var(--font-head);
      font-weight: 700;
      font-size: 1.4rem;
      text-align: center;
      border-bottom: 1px solid var(--accent);
    }

    .hero {
      grid-area: hero;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      color: #111;
      font-size: 1.2rem;
      border-bottom: 1px solid var(--accent);
      background: rgba(255,255,255,0.95);
      background-image: url("images/3005647.jpg");
      background-size: cover;
      background-position: center;
    }

    .col1 { grid-area: c1; }
    .col2 { grid-area: c2; }
    .col3 { grid-area: c3; }
    .col4 { grid-area: c4; }

    .col1, .col2, .col3, .col4 {
      background: rgba(255,255,255,0.9);
      padding: 24px 20px;
      font-family: var(--font-body);
      font-size: 0.98rem;
      line-height: 1.45;
      min-height: 260px;
    }

    .col1, .col2, .col3 { border-right: 1px solid var(--accent); }

    footer.site-footer {
      grid-area: footer;
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: var(--font-body);
      font-style: italic; 
      border-top: 1px solid var(--accent);
    }

    @media (max-width: 820px) {
      main.site-grid {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 64px 240px repeat(4, auto) 60px;
        grid-template-areas:
          "header header"
          "hero hero"
          "c1 c2"
          "c3 c4"
          "footer footer";
      }
      .col1, .col2 { border-right: 1px solid var(--accent); }
      .col3, .col4 { border-right: none; }
    }

    @media (max-width: 420px) {
      main.site-grid {
        grid-template-columns: 1fr;
        grid-template-areas:
          "header"
          "hero"
          "c1"
          "c2"
          "c3"
          "c4"
          "footer";
      }
      .col1, .col2, .col3, .col4 { border-right: none; }
    }