.card { display: flex; flex-direction: column; gap: 1rem; padding: 1.5rem; } .header { display: flex; align-items: center; gap: 0.8125rem; } .header svg { flex: none; } .title { margin: 0; font-size: 0.9375rem; font-weight: 700; } .description { margin: 0; font-weight: 600; font-size: 0.9375rem; } .image { margin-left: -1.5rem; margin-right: -1.5rem; width: calc(100% + 3rem); height: auto; } .features { flex-grow: 1; } .feature { display: flex; gap: 0.5em; font-size: 0.9375rem; line-height: 1.5; } .checkmark { flex-shrink: 0; display: inline; /* Make it square */ width: 1em; height: 1em; /* Offset the top half-leading of line-height to (almost) align with the top of the text. */ position: relative; top: 0.25em; color: #66bb6a; } .button { align-self: center; width: 93.75%; }