/* @override 
	https://gorelkine.com/KOLAB/ZERO/css/style.css */

 /* ======================
       Basic Reset & Styling
    ====================== */
    * { margin: 0; padding: 0; box-sizing: border-box; }
    body { font-family: sans-serif; background: #f4f4f4; padding: 12px; }
    h1 { text-align: center; margin-bottom: 20px; }

    /* ------------------------------
       Show/Hide Containers by Viewport
    ------------------------------- */
    .mobile-grid { display: block; }
    .desktop-grid { display: none; }

    /* ======================
       MOBILE LAYOUT (Default)
       2 columns with grid-template-areas
    ====================== */
    .mobile-grid {
      display: grid;
      gap: 12px;
      max-width: 100%;
      margin: 0 auto;
      grid-template-columns: repeat(2, 1fr);
      grid-auto-rows: auto;
      grid-template-areas:
        /* Group 1 (Rows 1-4) */
        "one one"
        "one one"
        "two three"
        "two four"
        /* Group 2 (Rows 5-8) */
        "five five"
        "six six"
        "seven eight"
        "seven eight"
        /* Group 3 (Rows 9-12) */
        "nine nine"
        "ten twelve"
        "ten thirteen"
        "eleven thirteen"
        /* Group 4 (Rows 13-16) */
        "fourteen fourteen"
        "fourteen fourteen"
        "fifteen fifteen"
        "sixteen sixteen";
    }
    /* Assign mobile grid areas */
    .mobile-grid .block1  { grid-area: one; }
    .mobile-grid .block2  { grid-area: two; }
    .mobile-grid .block3  { grid-area: three; }
    .mobile-grid .block4  { grid-area: four; }
    .mobile-grid .block5  { grid-area: five; }
    .mobile-grid .block6  { grid-area: six; }
    .mobile-grid .block7  { grid-area: seven; }
    .mobile-grid .block8  { grid-area: eight; }
    .mobile-grid .block9  { grid-area: nine; }
    .mobile-grid .block10 { grid-area: ten; }
    .mobile-grid .block11 { grid-area: eleven; }
    .mobile-grid .block12 { grid-area: twelve; }
    .mobile-grid .block13 { grid-area: thirteen; }
    .mobile-grid .block14 { grid-area: fourteen; }
    .mobile-grid .block15 { grid-area: fifteen; }
    .mobile-grid .block16 { grid-area: sixteen; }
    /* Mobile Aspect Ratio Helpers */
    .mobile-grid .block-square    { aspect-ratio: 1 / 1; }
    .mobile-grid .block-landscape { aspect-ratio: 1000 / 485; }
    .mobile-grid .block-portrait  { aspect-ratio: 485 / 1000; }

    /* ======================
       Common Block Styling
    ====================== */
    .block {

      overflow: hidden;
      position: relative;
	  border-radius: 12px;
    }
    .block img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }

    /* ======================
       DESKTOP LAYOUT
       Visible when viewport is at least 769px
       Uses a flex container with 4 nested columns.
    ====================== */
    @media (min-width: 769px) {
      .mobile-grid { display: none; }
      .desktop-grid {
        display: flex;
        gap: 12px;
        max-width: 100%;
        margin: 0 auto;
      }
      .desktop-column {
        flex: 1;
        display: grid;
        gap: 12px;
      }
      /* ---------- COLUMN 1 ----------
           - Block 1: 2×2 block (square)
           - Block 2: 1×2 block (portrait)
           - Block 3 & 4: two 1×1 blocks (square)
      ------------------------------- */
      .col1 {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: auto;
        grid-template-areas:
          "a a"
          "a a"
          "b c"
          "b d";
      }
      .col1 .block1 { grid-area: a; }
      .col1 .block2 { grid-area: b; }
      .col1 .block3 { grid-area: c; }
      .col1 .block4 { grid-area: d; }
      /* ---------- COLUMN 2 ----------
           - Block 5 & 6: two 2×1 blocks (landscape)
           - Block 7 & 8: two 1×2 blocks (portrait)
      ------------------------------- */
      .col2 {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: auto;
        grid-template-areas:
          "e e"
          "f f"
          "g h"
          "g h";
      }
      .col2 .block5 { grid-area: e; }
      .col2 .block6 { grid-area: f; }
      .col2 .block7 { grid-area: g; }
      .col2 .block8 { grid-area: h; }
      /* ---------- COLUMN 3 ----------
           - Block 9: 2×1 block (landscape)
           - Blocks 10–13: Two stacks:
             • Left stack: Block 10 (portrait) then Block 11 (square)
             • Right stack: Block 12 (square) then Block 13 (portrait)
      ------------------------------- */
      .col3 {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: auto;
        grid-template-areas:
          "i i"
          "j k"
          "j l"
          "m l";
      }
      .col3 .block9  { grid-area: i; }
      .col3 .block10 { grid-area: j; }
      .col3 .block12 { grid-area: k; }
      .col3 .block13 { grid-area: l; }
      .col3 .block11 { grid-area: m; }
      /* ---------- COLUMN 4 ----------
           - Block 14: 2×2 block (square)
           - Block 15 & 16: two 2×1 blocks (landscape)
      ------------------------------- */
      .col4 {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: auto;
        grid-template-areas:
          "n n"
          "n n"
          "o o"
          "p p";
      }
      .col4 .block14 { grid-area: n; }
      .col4 .block15 { grid-area: o; }
      .col4 .block16 { grid-area: p; }
    }