.wp-block-image>a, .wp-block-image>figure>a { display: inline-block } .wp-block-image img { box-sizing: border-box; height: auto; max-width: 100%; vertical-align: bottom } @media not (prefers-reduced-motion) { .wp-block-image img.hide { visibility: hidden } .wp-block-image img.show { animation: show-content-image .4s } } .wp-block-image[style*=border-radius] img, .wp-block-image[style*=border-radius]>a { border-radius: inherit } .wp-block-image.has-custom-border img { box-sizing: border-box } .wp-block-image.aligncenter { text-align: center } .wp-block-image.alignfull>a, .wp-block-image.alignwide>a { width: 100% } .wp-block-image.alignfull img, .wp-block-image.alignwide img { height: auto; width: 100% } .wp-block-image .aligncenter, .wp-block-image .alignleft, .wp-block-image .alignright, .wp-block-image.aligncenter, .wp-block-image.alignleft, .wp-block-image.alignright { display: table } .wp-block-image .aligncenter>figcaption, .wp-block-image .alignleft>figcaption, .wp-block-image .alignright>figcaption, .wp-block-image.aligncenter>figcaption, .wp-block-image.alignleft>figcaption, .wp-block-image.alignright>figcaption { caption-side: bottom; display: table-caption } .wp-block-image .alignleft { float: left; margin: .5em 1em .5em 0 } .wp-block-image .alignright { float: right; margin: .5em 0 .5em 1em } .wp-block-image .aligncenter { margin-left: auto; margin-right: auto } .wp-block-image :where(figcaption) { margin-bottom: 1em; margin-top: .5em } .wp-block-image.is-style-circle-mask img { border-radius: 9999px } @supports ((-webkit-mask-image:none) or (mask-image:none)) or (-webkit-mask-image:none) { .wp-block-image.is-style-circle-mask img { border-radius: 0; -webkit-mask-image: url('data:image/svg+xml;utf8,'); mask-image: url('data:image/svg+xml;utf8,'); mask-mode: alpha; -webkit-mask-position: center; mask-position: center; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: contain; mask-size: contain } } :root :where(.wp-block-image.is-style-rounded img, .wp-block-image .is-style-rounded img) { border-radius: 9999px } .wp-block-image figure { margin: 0 } .wp-lightbox-container { display: flex; flex-direction: column; position: relative } .wp-lightbox-container img { cursor: zoom-in } .wp-lightbox-container img:hover+button { opacity: 1 } .wp-lightbox-container button { align-items: center; backdrop-filter: blur(16px) saturate(180%); background-color: #5a5a5a40; border: none; border-radius: 4px; cursor: zoom-in; display: flex; height: 20px; justify-content: center; opacity: 0; padding: 0; position: absolute; right: 16px; text-align: center; top: 16px; width: 20px; z-index: 100 } @media not (prefers-reduced-motion) { .wp-lightbox-container button { transition: opacity .2s ease } } .wp-lightbox-container button:focus-visible { outline: 3px auto #5a5a5a40; outline: 3px auto -webkit-focus-ring-color; outline-offset: 3px } .wp-lightbox-container button:hover { cursor: pointer; opacity: 1 } .wp-lightbox-container button:focus { opacity: 1 } .wp-lightbox-container button:focus, .wp-lightbox-container button:hover, .wp-lightbox-container button:not(:hover):not(:active):not(.has-background) { background-color: #5a5a5a40; border: none } .wp-lightbox-overlay { box-sizing: border-box; cursor: zoom-out; height: 100vh; left: 0; overflow: hidden; position: fixed; top: 0; visibility: hidden; width: 100%; z-index: 100000 } .wp-lightbox-overlay .close-button { align-items: center; cursor: pointer; display: flex; justify-content: center; min-height: 40px; min-width: 40px; padding: 0; position: absolute; right: calc(env(safe-area-inset-right) + 16px); top: calc(env(safe-area-inset-top) + 16px); z-index: 5000000 } .wp-lightbox-overlay .close-button:focus, .wp-lightbox-overlay .close-button:hover, .wp-lightbox-overlay .close-button:not(:hover):not(:active):not(.has-background) { background: none; border: none } .wp-lightbox-overlay .lightbox-image-container { height: var(--wp--lightbox-container-height); left: 50%; overflow: hidden; position: absolute; top: 50%; transform: translate(-50%, -50%); transform-origin: top left; width: var(--wp--lightbox-container-width); z-index: 9999999999 } .wp-lightbox-overlay .wp-block-image { align-items: center; box-sizing: border-box; display: flex; height: 100%; justify-content: center; margin: 0; position: relative; transform-origin: 0 0; width: 100%; z-index: 3000000 } .wp-lightbox-overlay .wp-block-image img { height: var(--wp--lightbox-image-height); min-height: var(--wp--lightbox-image-height); min-width: var(--wp--lightbox-image-width); width: var(--wp--lightbox-image-width) } .wp-lightbox-overlay .wp-block-image figcaption { display: none } .wp-lightbox-overlay button { background: none; border: none } .wp-lightbox-overlay .scrim { background-color: #fff; height: 100%; opacity: .9; position: absolute; width: 100%; z-index: 2000000 } .wp-lightbox-overlay.active { visibility: visible } @media not (prefers-reduced-motion) { .wp-lightbox-overlay.active { animation: turn-on-visibility .25s both } .wp-lightbox-overlay.active img { animation: turn-on-visibility .35s both } .wp-lightbox-overlay.show-closing-animation:not(.active) { animation: turn-off-visibility .35s both } .wp-lightbox-overlay.show-closing-animation:not(.active) img { animation: turn-off-visibility .25s both } .wp-lightbox-overlay.zoom.active { animation: none; opacity: 1; visibility: visible } .wp-lightbox-overlay.zoom.active .lightbox-image-container { animation: lightbox-zoom-in .4s } .wp-lightbox-overlay.zoom.active .lightbox-image-container img { animation: none } .wp-lightbox-overlay.zoom.active .scrim { animation: turn-on-visibility .4s forwards } .wp-lightbox-overlay.zoom.show-closing-animation:not(.active) { animation: none } .wp-lightbox-overlay.zoom.show-closing-animation:not(.active) .lightbox-image-container { animation: lightbox-zoom-out .4s } .wp-lightbox-overlay.zoom.show-closing-animation:not(.active) .lightbox-image-container img { animation: none } .wp-lightbox-overlay.zoom.show-closing-animation:not(.active) .scrim { animation: turn-off-visibility .4s forwards } } @keyframes show-content-image { 0% { visibility: hidden } 99% { visibility: hidden } to { visibility: visible } } @keyframes turn-on-visibility { 0% { opacity: 0 } to { opacity: 1 } } @keyframes turn-off-visibility { 0% { opacity: 1; visibility: visible } 99% { opacity: 0; visibility: visible } to { opacity: 0; visibility: hidden } } @keyframes lightbox-zoom-in { 0% { transform: translate(calc((-100vw + var(--wp--lightbox-scrollbar-width))/2 + var(--wp--lightbox-initial-left-position)), calc(-50vh + var(--wp--lightbox-initial-top-position))) scale(var(--wp--lightbox-scale)) } to { transform: translate(-50%, -50%) scale(1) } } @keyframes lightbox-zoom-out { 0% { transform: translate(-50%, -50%) scale(1); visibility: visible } 99% { visibility: visible } to { transform: translate(calc((-100vw + var(--wp--lightbox-scrollbar-width))/2 + var(--wp--lightbox-initial-left-position)), calc(-50vh + var(--wp--lightbox-initial-top-position))) scale(var(--wp--lightbox-scale)); visibility: hidden } }