.sd-dept-cards { --sd-navy-deep: #0d1f2e; --sd-navy: #11314a; --sd-blue: #235C81; --sd-blue-m: #5492B6; --sd-coral: #DB635D; --sd-sand: #F6C893; --sd-cream: #FFF6E8; --sd-ff-display: 'DM Sans', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif; --sd-ff-mono: 'Source Code Pro', ui-monospace, 'SFMono-Regular', Menlo, monospace; box-sizing: border-box; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; width: 100%; max-width: 1320px; margin: 0 auto; padding: 0; list-style: none; } .sd-dept-cards *, .sd-dept-cards *::before, .sd-dept-cards *::after { box-sizing: border-box; } .sd-dept-cards__card { position: relative; display: block; margin: 0; padding: 0; overflow: hidden; border-radius: 6px; border: 1px solid rgba(219, 99, 93, 0.55); background: var(--sd-navy-deep); aspect-ratio: 3 / 2; text-decoration: none; color: inherit; transition: transform 240ms ease, box-shadow 240ms ease, border-color 240ms ease; will-change: transform; } .sd-dept-cards__card:focus-visible { outline: 2px solid var(--sd-sand); outline-offset: 3px; } .sd-dept-cards__card:hover, .sd-dept-cards__card:focus-visible { transform: translateY(-2px); border-color: rgba(219, 99, 93, 0.95); box-shadow: 0 16px 38px -18px rgba(219, 99, 93, 0.55), 0 6px 18px -10px rgba(0, 0, 0, 0.45); } .sd-dept-cards__img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; border: 0; } @media (max-width: 720px) { .sd-dept-cards { grid-template-columns: 1fr; gap: 14px; } }