figure {
font-size: 0; // fix whitespace causing percentage issues margin: 2rem 0; position: relative; text-align: center; article & p { max-width: 100%; // Fix Markdown wrapping images in `<p>` and setting max-width } * { margin: 0; max-width: 100%; } img, video { display: inline; transition: transform 250ms ease; vertical-align: middle; &:active, &:focus { outline: none; position: relative; // Fixes z-index issues on transform z-index: 1; } } .highlighter-rouge { font-size: 1rem; margin-bottom: 0; } &.embed { margin-left: auto; margin-right: auto; max-width: 100%; padding-top: 56.25%; // 16:9 position: relative; width: var(--content-width); iframe { border: none; height: 100%; left: 0; position: absolute; top: 0; width: 100%; } } figcaption { font-family: var(--ui-font); font-size: 0.8rem; margin: 1em auto 4em; opacity: 0.67; text-align: center; } &.third { img, video { cursor: zoom-in; margin: 1%; max-width: 31.33%; &:focus { cursor: zoom-out; } &:nth-child(3n+1):active, &:nth-child(3n+1):focus { transform: translateX(100%) scale(3); } &:nth-child(3n+2):active, &:nth-child(3n+2):focus { transform: translateX(0) scale(3); } &:nth-child(3n+3):active, &:nth-child(3n+3):focus { transform: translateX(-100%) scale(3); } } } &.half { img, video { cursor: zoom-in; margin: 1%; max-width: 48%; &:focus { cursor: zoom-out; } &:nth-child(odd):active, &:nth-child(odd):focus { transform: translateX(50%) scale(2); } &:nth-child(even):active, &:nth-child(even):focus { transform: translateX(-50%) scale(2); } } } &.full-bleed { img, video { left: 50%; max-width: 100vw; position: relative; transform: translateX(-50%); width: 100vw; } } &.constrained { img, video { width: var(--content-width); } } &.circle { img, video { border-radius: 50%; } } &.card { img, video { background-color: var(--silver-100); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05), 0 3px 3px rgba(0, 0, 0, 0.22); @media (prefers-color-scheme: dark) { background-color: var(--silver-900); } } }
}