/* ==========================================================================
   Work grid: slot shapes derived from the Figma card geometry (see ps_grid_pattern()).
   Mobile-first: 1 column -> 2 columns -> the designed three-column composition from 1200px.
   Shared by the frontend and the admin "Layout preview".
   ========================================================================== */
.ps-grid { display: grid; grid-template-columns: 1fr; gap: 10px; }
.ps-grid__row { display: contents; }
.ps-card { position: relative; overflow: hidden; background: #d9d9d9; aspect-ratio: 363 / 365; }
.ps-card--tall, .ps-card--tall-right { aspect-ratio: 417 / 505; }
.ps-card--half-top, .ps-card--half-bottom { aspect-ratio: 390 / 254; }
.ps-card--short { aspect-ratio: 416 / 304; }

/* Tablet: two columns without holes. Single-span cards keep their aspect ratio (they size the rows), the large
   poster-like cards span two rows, and every card stretches to fill its cell. */
@media (min-width: 600px) {
	.ps-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: dense; }
	.ps-card { align-self: stretch; }
	.ps-card--tall, .ps-card--tall-right { grid-row: span 2; aspect-ratio: auto; }
}

/* Figma composition. Row group A: 417x505 | 390x254 + 388x239 | 292x505.  B: 416 | 388 | 294 x 304.  C: 363x365 x3. */
@media (min-width: 1200px) {
	.ps-grid { display: block; }
	.ps-grid__row { display: grid; column-gap: 0.8%; }
	.ps-grid__row .ps-card { aspect-ratio: auto; align-self: stretch; }
	.ps-grid__row--feature { grid-template-columns: 417fr 390fr 292fr; grid-template-rows: 254fr 239fr; row-gap: 12px; aspect-ratio: 1118 / 505; }
	.ps-card--tall { grid-column: 1; grid-row: 1 / 3; }
	.ps-card--half-top { grid-column: 2; grid-row: 1; }
	.ps-card--half-bottom { grid-column: 2; grid-row: 2; }
	.ps-card--tall-right { grid-column: 3; grid-row: 1 / 3; }
	.ps-grid__row--short { grid-template-columns: 416fr 388fr 294fr; aspect-ratio: 1118 / 304; }
	.ps-grid__row--square { grid-template-columns: repeat(3, 363fr); aspect-ratio: 1118 / 365; }
	.ps-grid__row + .ps-grid__row { margin-top: 10px; }
	.ps-grid__row--feature + .ps-grid__row--short { margin-top: 9px; }
	.ps-grid__row--short + .ps-grid__row--square { margin-top: 51px; }
}