.page-credits .page-canvas { min-height: 0; }
.credits-page { background: #e0dceb; font-stretch: 87.5%; }
.credits-hero { position: relative; aspect-ratio: 2.05 / 1; }
.credits-hero > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.credits-title, .credits-panel { width: 260px; clip-path: polygon(0 0, 100% 0, 92% 78%, 0 100%); }
.credits-title { position: absolute; top: 0; left: 0; margin: 0; padding: 20px 30px 38px 95px; font-size: 25px; line-height: 1.2; font-weight: 700; color: #fff; background: #77668f; }
.credits-content { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 16px; padding: 40px 35px 70px 0; align-items: start; }
.credits-panel { height: 96px; background: #b0a4c4; }
.credits-list { margin: 0; font-size: 23px; line-height: 1.5; color: #51465f; }
.credits-list > div + div { margin-top: 8px; }
.credits-list dt { display: inline; font-weight: 400; }
.credits-list dd { display: inline; margin: 0; font-weight: 700; }
@media (max-width: 1000px) {
    .credits-title, .credits-panel { width: 215px; }
    .credits-title { padding-left: 45px; }
    .credits-content { grid-template-columns: 215px minmax(0, 1fr); padding-right: 24px; }
    .credits-list { font-size: 21px; }
}
@media (max-width: 700px) {
    .credits-hero { aspect-ratio: 1.5 / 1; }
    .credits-title { width: 180px; font-size: 22px; padding: 16px 28px 30px 24px; }
    .credits-content { display: block; padding: 28px 24px 40px; }
    .credits-panel { display: none; }
    .credits-list { font-size: 20px; }
    .credits-list > div + div { margin-top: 15px; }
}