.portfolio {
    display: flex;
    flex-direction: column;
}

/*
  5 column tracks (gaps encoded as fixed tracks, content tracks in fr):
  [220fr] [32px] [56fr] [32px] [220fr]   total = 496fr + 64px

  Card widths:
    portrait  = track 1 alone (220fr) OR track 5 alone (220fr)
    landscape = tracks 1+2+3 (220fr+32px+56fr = 308px-equivalent)
             OR tracks 3+4+5 (56fr+32px+220fr = 308px-equivalent)

  Row tracks (vertical stagger, gaps encoded):
  [216px] [32px] [52px] [32px] [216px]   total = 548px

  Cell placement:
    1 portrait  TL  rows 1-3 / col 1        → h=300  w=220fr
    2 landscape TR  row  1   / cols 3-5     → h=216  w=308-equiv
    3 landscape BL  row  5   / cols 1-3     → h=216  w=308-equiv
    4 portrait  BR  rows 3-5 / col 5        → h=300  w=220fr

  Row 2 starts at y=248, which is 52px before top portrait ends (y=300)
  → bottom-right portrait fills the gap left by top-right landscape
*/

.portfolio__grid {
    display: grid;
    grid-template-columns: 220fr 32px 56fr 32px 220fr;
    grid-template-rows: 216px 32px 52px 32px 216px;
    row-gap: 0;
    column-gap: 0;
}

.portfolio__thumb:nth-child(1) { grid-area: 1 / 1 / 4 / 2; } /* portrait  TL */
.portfolio__thumb:nth-child(2) { grid-area: 1 / 3 / 2 / 6; } /* landscape TR */
.portfolio__thumb:nth-child(3) { grid-area: 5 / 1 / 6 / 4; } /* landscape BL */
.portfolio__thumb:nth-child(4) { grid-area: 3 / 5 / 6 / 6; } /* portrait  BR */

.portfolio__thumb {
    display: block;
    border-radius: var(--radius-default);
    overflow: hidden;
    text-decoration: none;
}

.portfolio__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.25s;
}

.portfolio__thumb:hover img {
    transform: scale(1.04);
}

.portfolio__footer {
    margin-top: auto;
    padding-top: var(--space-lg);
    display: flex;
    justify-content: flex-start;
}

@media (max-width: 767px) {
    .portfolio__grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto auto;
        gap: var(--space-md);
    }

    /* Reset desktop explicit placements */
    .portfolio__thumb:nth-child(1),
    .portfolio__thumb:nth-child(2),
    .portfolio__thumb:nth-child(3),
    .portfolio__thumb:nth-child(4) {
        grid-area: auto;
    }

    /* DOM order: portrait[0], landscape[0], landscape[1], portrait[1]
       Reorder to: portrait[0], portrait[1] (row 1) then landscape[0], landscape[1] (row 2) */
    .portfolio__thumb:nth-child(1) { order: 1; }
    .portfolio__thumb:nth-child(4) { order: 2; }
    .portfolio__thumb:nth-child(2) { order: 3; }
    .portfolio__thumb:nth-child(3) { order: 4; }

    /* A6 portrait (105×148 mm) — top row */
    .portfolio__thumb:nth-child(1),
    .portfolio__thumb:nth-child(4) {
        aspect-ratio: 105 / 148;
    }

    /* A6 landscape (148×105 mm) — bottom row */
    .portfolio__thumb:nth-child(2),
    .portfolio__thumb:nth-child(3) {
        aspect-ratio: 148 / 105;
    }

    .portfolio__thumb img {
        height: 100%;
    }
}