main { .inner_col > * { margin: 12px !important; } } /* details { margin: 16px; text-align: left; border: 1px solid white; border-radius: 8px; > * { margin: 0px; padding: 24px; } summary { color: white; font-size: x-large; } } details[open] summary { border-bottom: 1px solid white; } */ .grid { display: grid; grid-template-columns: 1fr 1fr; flex-wrap: wrap; flex-direction: row; justify-items: center; align-content: center; justify-content: space-evenly; .card { margin: 12px; max-width: 344px; color: var(--text_color); /* Give all cards the same width */ min-height: 228px; box-sizing: border-box; border: 1px solid var(--text_color); border-radius: 8px; > * { margin: 0px; padding: 24px; } h2 { border-bottom: 1px solid var(--text_color); } } @media (width < 640px) { grid-template-columns: 1fr; .card { margin-left: 0px; margin-right: 0px; } } @media (prefers-reduced-motion: no-preference) { .card { transition-duration: 0.375s; transition-property: transform, box-shadow; } .card:hover, .card:has(:focus-visible) { transform: translateY(-8px) translateX(2px); box-shadow: -2px 8px 8px rgb(from var(--text_color) r g b / 0.2); } } }