.workstations { display: grid; margin-inline: auto; padding-inline: var(--space-large); position: relative; width: min(100%, 90em); } .workstations__images { column-gap: 1.5em; column-width: 16em; margin-top: calc(-1 * 1.5em); } button.workstations__image { cursor: zoom-in; } .workstations__image { display: inline-flex; margin-top: 1.5em; user-select: none; -webkit-user-select: none; vertical-align: top; } .workstations__image figure { border-radius: 0.2em; overflow: hidden; position: relative; } .workstations__image figure img { background: var(--color-background-storm); border-radius: 0.2em; box-shadow: 0 0 0 1px rgba(var(--rgb-black), 0.3), 0 0.3em 2.0em -1.2em rgba(var(--rgb-black), 0.1), 0 0.6em 2.4em -1.6em rgba(var(--rgb-black), 0.2), 0 0.9em 2.8em -2.0em rgba(var(--rgb-black), 0.3), 0 1.2em 3.2em -2.4em rgba(var(--rgb-black), 0.4), 0 1.5em 3.6em -2.8em rgba(var(--rgb-black), 0.5) ; } .workstations__image figure figcaption { background: rgba(var(--rgb-white), 0.9); border-top-right-radius: 0.2em; bottom: 0; color: var(--color-terminal-black); font-size: var(--font-size-small); font-weight: 500; left: 0; padding: 0.15em 0.4em; position: absolute; } .workstations__image--modal { cursor: zoom-out; display: initial; margin: initial; } .workstations__modal { align-items: center; background: none; border: none; display: none; height: 100%; left: 0; margin: 0; overflow: auto; padding: var(--space-large); position: fixed; top: 0; width: 100%; z-index: 1000; } .workstations__backdrop { backdrop-filter: blur(0.7em); -webkit-backdrop-filter: blur(0.7em); background: rgba(var(--rgb-background-night), 0.9); inset: 0; position: fixed; user-select: none; -webkit-user-select: none; } .workstations__container { display: grid; justify-content: center; justify-self: center; position: relative; } .workstations__modal[open] { display: grid; } .workstations__modal:modal { max-height: none; max-width: none; } .workstations__modal::backdrop { background: none; } @media(hover: hover) { button.workstations__image figure { outline: 0.1em solid transparent; outline-offset: 0.2em; transition: outline-color var(--transition); } button.workstations__image figure:focus, button.workstations__image figure:hover { outline-color: var(--color-turquoise); } } @supports(font: -apple-system-body) { .workstations__images { margin-bottom: -3.7em; } } @media(min-width: 48em) { .workstations__images { column-width: 18em; } } @media(min-width: 64em) { .workstations { padding-inline: var(--space-xx-large); } .workstations__modal { padding: var(--space-xx-large); } }