a[data-rating]{white-space:nowrap;&::after { color:var(--color-bg-subtle); }}a[data-rating='1']::after{content:'★★★★'}a[data-rating='2']::after{content:'★★★'}a[data-rating='3']::after{content:'★★'}a[data-rating='4']::after{content:'★'}section.reviews{--stars-width:calc(5 * var(--base-font-size));--cover-width:var(--stars-width);hgroup { margin: var(--space-l) 0 var(--space-m); h2 { color: var(--color-text-subtle); line-height: var(--base-line-height); margin: 0; } } dl.stats { color: var(--color-text-subtle); display: inline-flex; flex-direction: row-reverse; flex-wrap: wrap; font-size: var(--font-size-sm); font-variant: all-small-caps; padding: 0; margin: 0 auto 0 0; dt, dd { display: inline; margin: 0; padding: 0; white-space: nowrap; } dd { padding-right: var(--space-xs); } dt:not(:first-of-type)::after { content: '•'; margin: 0 var(--space-xs); pointer-events: none; } } .review { margin-block: var(--space-m); & + .review, hgroup + .review { border-top: 1px solid var(--color-bg-subtle); padding-top: var(--space-m); } h3, p { margin: 0; } .title cite { font-style: normal; } a:not(:hover) { color: inherit; } .cover { border-radius: var(--space-xs); display: grid; max-width: var(--cover-width); overflow: hidden; img { width: 100%; object-fit: cover; } } a.rating { color: var(--color-text-subtle); text-align: center; } .title { display: inline; font-size: inherit; line-height: var(--base-line-height); } .authors { color: var(--color-text-subtle); display: inline; &::before { content: 'by '; } a:not(:hover) { color: inherit; } } .summary { color: var(--color-text-subtle); max-width: 600px; } } @media (max-width: 600px) { &::after { content: ''; display: table; clear: both; } hgroup { clear: right; } .review { clear: right; .cover { float: right; margin-left: var(--space-m); } &:not([data-rating]) .cover { margin-bottom: var(--space-m); } .rating-title-authors { .rating { clear: right; float: right; font-size: var(--base-font-size); margin-left: var(--space-s); margin-bottom: var(--space-m); pointer-events: none; } } } } @media (min-width: 601px) { .review { display: grid; gap: 0 var(--space-m); grid-template-columns: var(--stars-width) 1fr var(--cover-width); grid-template-rows: auto auto 1fr; .cover { grid-column: 3; grid-row: 1 / span 2; } .rating-title-authors, .title-authors { display: contents; } .rating { grid-column: 1; grid-row: 1; } .title-authors { display: block; grid-column: 2; grid-row: 1; margin-bottom: var(--space-m); } .authors { display: inline-block; } .summary { grid-column: 2; grid-row: 2 / span 2; } } } @media (min-width: 800px) { --cover-width: calc(8 * var(--base-font-size)); hgroup h2 { font-size: var(--font-size-xxl); } .review { padding-top: var(--space-m); margin-block: var(--space-m); } }}table.ratings{th, td { border-color: var(--color-bg-subtle); border-width: 0 0 1px; } tr:last-of-type { th, td { border-bottom: 0; } } caption { caption-side: top; color: var(--color-text-subtle); font-size: var(--font-size-sm); font-variant: small-caps; } a:not(:hover) { color: var(--color-text-subtle); } @media (max-width: 480px) { width: 100%; }}article.single-review{--cover-width:calc(16 * var(--base-font-size));picture.main { display: grid; grid-template-columns: var(--cover-width); place-content: center; img { border-radius: var(--space-xs); object-fit: cover; overflow: hidden; width: 100%; } } @media (min-width: 800px) { align-items: start; display: grid; gap: 0 var(--space-l); grid-template-columns: 1fr var(--cover-width); grid-template-rows: auto auto 1fr auto auto; picture.main { grid-column: 2; grid-row: 1 / span 2; } .content { grid-column: 1; grid-row: 2 / span 3; } .summary { font-size: var(--font-size-md); strong { font-weight: inherit; } } .meta { grid-column: 2; grid-row: 3 / span 2; } .related { grid-column: 1; } &.no-content { .meta { grid-column: 1; grid-row: 2 / span 3; } } }}table.meta{margin:var(--space-l)auto;tr:last-of-type { th,td { border-bottom:0; } } th,td { border-color:var(--color-bg-subtle); border-width:0 0 1px; } th { font-size:var(--font-size-sm); font-variant:all-small-caps; padding-left:0; } a:not(:hover) { color:var(--color-text-subtle); } .subtitle { display:inline-block; font-style:italic; } @media (max-width:480px) { width:100%; } small { white-space:nowrap; }}footer{margin-top:var(--space-xl)}