.card { border-radius: 36px; overflow: hidden; padding: 36px; background-color: var(--background); display: flex; flex-direction: column; } .textWrapper { position: relative; z-index: 1; } .title { color: var(--on-background); font-size: 1.8rem; max-width: 500px; font-weight: 800; z-index: 1; } .subtitle { color: var(--on-background-secondary); font-size: 1.125rem; font-weight: 600; max-width: 500px; margin-top: 6px; z-index: 1; } .backdropOnText { background-color: var(--background); padding: 0.5rem 8px; box-decoration-break: clone; -webkit-box-decoration-break: clone; } .backdropOnText { background-color: var(--background); padding: 0 8px; box-decoration-break: clone; -webkit-box-decoration-break: clone; z-index: 1 !important; position: relative; box-shadow: 0px 5px 0px var(--background); } .backdropTextHelper { position: absolute; top: 0; z-index: 0 !important; pointer-events: none; user-select: none; } .backdropTextHelper .backdropOnText { box-shadow: 00px -5px 0px var(--background); } .content { display: flex; flex-direction: column; flex-grow: 1; margin-top: 48px; justify-content: flex-end; } .cardLinkWrapper { margin-top: 16px; width: 100%; z-index: 1; position: relative; max-width: 360px; } .cardLink { border-radius: 16px; background-color: var(--background); a { cursor: none !important; } } .cardLink:first-child { margin-top: auto; } .cardLinkContent { padding: 16px; padding-right: 48px; } .icon { position: absolute; top: 16px; right: 16px; color: var(--on-background); } .cardLink .title { color: var(--on-background); font-size: 1.2rem; font-weight: 600; line-height: 100%; } .cardLink .subtitle { color: var(--on-background-secondary); font-size: 0.75rem; margin-top: 4px; } @media screen and (max-width: 800px) { .title { font-size: 1.5rem; } .subtitle { font-size: 0.85rem; } } @media screen and (max-width: 620px) { .cardLink { width: 100%; max-width: unset; } }