Ltouroumov (talk | contribs) No edit summary |
Ltouroumov (talk | contribs) No edit summary |
||
Line 77: | Line 77: | ||
} | } | ||
.object .scores .score { | .object .scores .score { | ||
min-width: max-content; | |||
} | |||
.object .requirements { | |||
display: flex; | |||
flex-direction: column; | |||
align-items: center; | |||
row-gap: 0.15rem; | |||
margin: 0.25rem 0; | |||
font-size: 0.75rem; | |||
} | |||
.object .requirements .requirement { | |||
min-width: max-content; | min-width: max-content; | ||
} | } |
Revision as of 22:11, 5 December 2023
.section-grid { display: grid; grid-auto-rows: auto; gap: 0.75rem; } .section-grid.col-1 { grid-template-columns: 1fr; } .section-grid.col-2 { grid-template-columns: 1fr 1fr; } .section-grid.col-3 { grid-template-columns: 1fr 1fr 1fr; } .section-grid.col-4 { grid-template-columns: 1fr 1fr 1fr 1fr; } .section-grid.col-5 { grid-template-columns: 1fr 1fr 1fr 1fr 1fr; } .section-grid .cell { display: flex; align-items: stretch; } .section-grid .cell .object { flex-grow: 1; } .object-wrapper { display: flex; justify-content: center; } .object { border: 1px solid white; border-radius: 10px; padding: 0.5rem; max-width: 50rem; display: flex; flex-direction: column; align-items: stretch; justify-content: start; } .object h2 { margin-top: 0; text-align: center; } .object .image { display: flex; flex-direction: column; align-items: stretch; } .object .image img { width: 100%; aspect-ratio: 5/3; object-fit: cover; object-position: top center; } .object .scores { display: flex; flex-direction: column; align-items: center; row-gap: 0.15rem; margin: 0.25rem 0; font-size: 0.75rem; } .object .scores .score { min-width: max-content; } .object .requirements { display: flex; flex-direction: column; align-items: center; row-gap: 0.15rem; margin: 0.25rem 0; font-size: 0.75rem; } .object .requirements .requirement { min-width: max-content; } .object .text { overflow-x: hidden; } .index-grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: auto; gap: 0.75rem; } .index-card { border: 1px solid white; border-radius: 10px; padding: 0.5rem; max-width: 50rem; } .index-card h2 { margin: 0; }