/* Pagayo Winkel · blog */

.pw-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.pw-blog { padding-block: var(--space-8) var(--pw-pad); display: flex; flex-direction: column; gap: var(--space-8); }
.pw-post-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(280px, 0.85fr);
  grid-template-areas:
    "head hero"
    "body hero";
  column-gap: var(--space-8);
  row-gap: var(--space-5);
  align-items: start;
}
.pw-post-head { grid-area: head; display: flex; flex-direction: column; gap: var(--space-4); }
.pw-post-hero { grid-area: hero; aspect-ratio: 4 / 3; width: 100%; }
.pw-post-body { grid-area: body; display: flex; flex-direction: column; gap: var(--space-5); max-width: 65ch; }
.pw-post-h { font-size: 20px; line-height: 1.3; font-weight: 700; }
.pw-post-product { font-weight: 600; text-decoration: underline; }
.pw-post-more { display: flex; flex-direction: column; gap: var(--space-4); padding-top: var(--space-6); border-top: 1px solid var(--line); }
.pw-post-more-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6); }
.pw-side-post { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: var(--space-3); align-items: center; color: inherit; text-decoration: none; }
.pw-side-post .pw-media { aspect-ratio: 1; font-size: 11px; }
.pw-side-post > span { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.pw-side-title { font-size: 15px; font-weight: 700; line-height: 1.35; }
.pw-post-more + .pw-link { align-self: flex-start; }

@media (max-width: 760px) {
  .pw-post-grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "head"
      "hero"
      "body";
  }
  .pw-post-more-row { grid-template-columns: minmax(0, 1fr); }
}