/* Place the main poster on the left and the introduction on the right. */
.hero{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr)}
.hero-copy{padding-left:30px;padding-right:0}
.hero-portrait--poster{transform:translateX(-48px)}
.hero-portrait--poster img{object-position:left center}

/* Give the second poster a centered, uncropped presentation. */
.club-content{display:flex;flex-direction:column;gap:38px}
.club-visual{width:min(100%,640px);max-width:none;align-self:center;margin-inline:auto}
.club-visual img{display:block;width:100%;height:auto;max-height:none;aspect-ratio:auto;object-fit:contain;object-position:center}
.club-visual figcaption{text-align:center}
.principles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:48px}
.principles article,.principles article:first-child{padding-block:23px}
.principles article:nth-last-child(-n+2){border-bottom:0}
.principles p{max-width:460px}

@media(max-width:1100px){
  .hero-copy{padding-left:24px}
  .hero-portrait--poster{transform:translateX(-32px)}
  .club-visual{width:min(100%,600px)}
}
@media(max-width:620px){
  .hero-copy{padding-left:0;padding-top:30px;padding-bottom:30px}
  .hero-portrait--poster{transform:none;margin-top:0;margin-left:0;margin-right:auto}
  .club-content{gap:28px}
  .club-visual{width:100%;align-self:center}
  .principles{grid-template-columns:1fr}
  .principles article,.principles article:first-child{padding-block:21px}
  .principles article:nth-last-child(2){border-bottom:1px solid var(--line)}
}