/* Each page is a single illustration with semantic HTML laid directly over it. */
.values-book{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px}
.value-page{display:grid;position:relative;isolation:isolate;container-type:inline-size;overflow:hidden;border-radius:6px;scroll-margin-top:24px;color:var(--color-on-connect);background:var(--color-connect)}
.value-page-art,.value-page-copy{grid-area:1/1;min-width:0}
.value-page-art{aspect-ratio:4/5}
.value-page-art img{display:block;width:100%;height:100%;object-fit:cover}
.value-page-copy{z-index:1;width:80%;align-self:start;margin:7% 10% 0;padding:0}
.value-page-copy h3{font-family:var(--font-display);font-size:var(--type-value-title);font-weight:var(--weight-medium);line-height:1.04;letter-spacing:-.025em;text-wrap:balance;margin:0 0 16px;color:inherit}
.value-page-copy p{font-family:var(--font-display);font-size:var(--type-value-copy);line-height:1.4;max-width:31ch;margin:0;color:inherit}
.book-connect .value-page-copy{transform:rotate(-2deg)}
.book-wonder{color:var(--color-on-wonder);background:var(--color-wonder)}
.book-wonder .value-page-copy{margin-left:14%;width:76%;transform:rotate(2deg)}
.book-good{background:var(--color-good);color:var(--color-on-good)}
.book-good .value-page-copy{transform:rotate(-1deg)}
.book-believe{background:var(--color-believe);color:var(--color-on-believe)}
.book-believe .value-page-copy{margin-left:14%;width:76%}
.book-strive{background:var(--color-strive);color:var(--color-on-strive)}
.book-strive .value-page-copy{transform:rotate(-2deg)}
.book-passion{background:var(--color-passion);color:var(--color-on-passion)}
.book-passion .value-page-copy{transform:rotate(1deg)}
@media(max-width:850px){
 .values-book{grid-template-columns:1fr;gap:28px;max-width:620px;margin-inline:auto}
}
@media(max-width:450px){
 .value-page-art{aspect-ratio:2/3}
 .value-page-copy,.book-wonder .value-page-copy,.book-believe .value-page-copy{width:84%;margin:8% 8% 0}
 .value-page-copy h3{font-size:var(--type-subheading);margin-bottom:12px}
 .value-page-copy p{font-size:var(--type-body-large);line-height:1.4}
}
