@charset "UTF-8";

/* -------------------------------- 

File#: _1_menu
Title: Menu
Descr: Application menu that provides access to a set of functionalities
Usage: codyhouse.co/license

-------------------------------- */
.menu {
    --menu-vertical-gap: 4px;
    /* vertical gap between the Menu element and its control */
    --menu-item-padding: var(--space-xxxs) var(--space-xs);
    list-style: none;
    -webkit-user-select: none;
    user-select: none;
    position: fixed;
    /* top/left position set in JS */
    z-index: var(--z-index-popover, 5);
    width: 220px;
    background-color: var(--color-bg-light);
    box-shadow: var(--inner-glow), var(--shadow-md);
    padding: var(--space-xxs) 0;
    border-radius: var(--radius-md);
    margin-top: var(--menu-vertical-gap);
    margin-bottom: var(--menu-vertical-gap);
    overflow: auto;
    font-size: 1rem;
    visibility: hidden;
    opacity: 0;
    transition: visibility 0s 0.2s, opacity 0.2s
}

.menu--is-visible {
    visibility: visible;
    opacity: 1;
    transition: visibility 0s, opacity 0.2s
}

.menu--overlay {
    z-index: var(--z-index-overlay, 15)
}

.menu__content {
    display: flex;
    align-items: center;
    padding: var(--menu-item-padding);
    text-decoration: none;
    /* reset link style */
    color: var(--color-contrast-high);
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: 0.2s
}

.menu__content:hover {
    background-color: hsla(var(--color-contrast-higher-h), var(--color-contrast-higher-s), var(--color-contrast-higher-l), 0.075)
}

.menu__content:focus {
    outline: none;
    background-color: hsla(var(--color-primary-h), var(--color-primary-s), var(--color-primary-l), 0.15)
}

.menu__label {
    padding: var(--menu-item-padding);
    font-size: 0.8125rem;
    color: var(--color-contrast-medium)
}

.menu__separator {
    height: 1px;
    background-color: var(--color-contrast-lower);
    margin: var(--menu-item-padding)
}

.menu__icon {
    color: hsla(var(--color-contrast-higher-h), var(--color-contrast-higher-s), var(--color-contrast-higher-l), 0.5);
    margin-right: var(--space-xxs)
}

/* -------------------------------- 

File#: _2_menu-bar
Title: Menu Bar
Descr: Application menu with a list of common actions that users can perform
Usage: codyhouse.co/license

-------------------------------- */
:root {
    --menu-bar-button-size: 2.5em;
    --menu-bar-icon-size: 1em;
    --menu-bar-horizontal-gap: var(--space-xxs);
    --menu-bar-vertical-gap: 4px;
    --menu-bar-label-size: var(--text-xs)
}

.menu-bar {
    list-style: none;
    display: inline-flex;
    align-items: center
}

.menu-bar__item {
    position: relative;
    display: inline-block;
    display: flex;
    align-items: center;
    justify-content: center;
    height: var(--menu-bar-button-size);
    width: var(--menu-bar-button-size);
    border-radius: 50%;
    cursor: pointer;
    transition: background-color 0.2s
}

.menu-bar__item:not(:last-child) {
    margin-right: var(--menu-bar-horizontal-gap)
}

.menu-bar__item:hover,
.menu-bar__item.menu-control--active {
    background-color: hsla(var(--color-contrast-higher-h), var(--color-contrast-higher-s), var(--color-contrast-higher-l), 0.1)
}

.menu-bar__item:hover>.menu-bar__icon,
.menu-bar__item.menu-control--active>.menu-bar__icon {
    color: var(--color-contrast-higher)
}

.menu-bar__item:hover>.menu-bar__label,
.menu-bar__item.menu-control--active>.menu-bar__label {
    clip: auto;
    -webkit-clip-path: none;
    clip-path: none;
    height: auto;
    width: auto
}

.menu-bar__item:focus {
    outline: none;
    background-color: hsla(var(--color-primary-h), var(--color-primary-s), var(--color-primary-l), 0.1)
}

.menu-bar__item:active {
    background-color: var(--color-contrast-low)
}

.menu-bar__item:focus:active {
    background-color: hsla(var(--color-primary-h), var(--color-primary-s), var(--color-primary-l), 0.2)
}

.menu-bar__item--trigger {
    display: none
}

.menu-bar__icon {
    display: block;
    color: var(--color-contrast-high);
    font-size: var(--menu-bar-icon-size);
    transition: color 0.2s
}

.menu-bar__label {
    position: absolute;
    z-index: var(--z-index-popover, 5);
    clip: rect(1px, 1px, 1px, 1px);
    -webkit-clip-path: inset(50%);
    clip-path: inset(50%);
    width: 1px;
    height: 1px;
    overflow: hidden;
    white-space: nowrap;
    top: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(var(--menu-bar-vertical-gap));
    padding: var(--space-xxs) var(--space-xs);
    color: var(--color-bg);
    background-color: hsla(var(--color-contrast-higher-h), var(--color-contrast-higher-s), var(--color-contrast-higher-l), 0.95);
    border-radius: var(--radius-md);
    font-size: var(--menu-bar-label-size);
    pointer-events: none;
    -webkit-user-select: none;
    user-select: none
}

.menu-bar--collapsed .menu-bar__item--hide {
    display: none
}

.menu-bar--collapsed .menu-bar__item--trigger {
    display: inline-block;
    display: flex
}

.menu-bar {
    opacity: 0
}

.menu-bar::before {
    display: none;
    content: "collapsed"
}

.menu-bar--loaded {
    opacity: 1
}

@media (min-width: 32rem) {
    .menu-bar--expanded\@xs::before {
        content: "expanded"
    }
}

@media (min-width: 48rem) {
    .menu-bar--expanded\@sm::before {
        content: "expanded"
    }
}

@media (min-width: 64rem) {
    .menu-bar--expanded\@md::before {
        content: "expanded"
    }
}

@media (min-width: 80rem) {
    .menu-bar--expanded\@lg::before {
        content: "expanded"
    }
}

@media (min-width: 90rem) {
    .menu-bar--expanded\@xl::before {
        content: "expanded"
    }
}

/* -------------------------------- 

File#: _1_modal-window
Title: Modal Window
Descr: A modal dialog used to display critical information
Usage: codyhouse.co/license

-------------------------------- */
.modal {
    position: fixed;
    z-index: var(--z-index-overlay, 15);
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    opacity: 0;
    visibility: hidden
}

.modal:not(.modal--is-visible) {
    pointer-events: none;
    background-color: transparent
}

.modal--is-visible {
    opacity: 1;
    visibility: visible
}

/* close buttons */
.modal__close-btn {
    display: flex;
    flex-shrink: 0;
    border-radius: 50%;
    transition: 0.2s
}

.modal__close-btn .icon {
    display: block;
    margin: auto
}

.modal__close-btn--outer {
    /* close button - outside the modal__content */
    --size: 48px;
    width: var(--size);
    height: var(--size);
    position: fixed;
    top: var(--space-sm);
    right: var(--space-sm);
    z-index: var(--z-index-fixed-element, 10);
    background-color: hsla(var(--color-black-h), var(--color-black-s), var(--color-black-l), 0.9);
    transition: 0.2s
}

.modal__close-btn--outer .icon {
    color: var(--color-white);
    /* icon color */
    transition: transform 0.3s var(--ease-out-back)
}

.modal__close-btn--outer:hover {
    background-color: hsla(var(--color-black-h), var(--color-black-s), var(--color-black-l), 1)
}

.modal__close-btn--outer:hover .icon {
    transform: scale(1.1)
}

.modal__close-btn--inner {
    /* close button - inside the modal__content */
    --size: 32px;
    width: var(--size);
    height: var(--size);
    background-color: var(--color-bg-light);
    box-shadow: var(--inner-glow), var(--shadow-sm);
    transition: 0.2s
}

.modal__close-btn--inner .icon {
    color: inherit
        /* icon color */
}

.modal__close-btn--inner:hover {
    background-color: var(--color-bg-lighter);
    box-shadow: var(--inner-glow), var(--shadow-md)
}

/* animations */
:root {
    --modal-transition-duration: 0.2s
        /* fallback (i.e., unless specified differently in the variations 👇) */
}

@media (prefers-reduced-motion: no-preference) {
    .modal--animate-fade {
        --modal-transition-duration: 0.2s;
        transition: opacity var(--modal-transition-duration), background-color var(--modal-transition-duration), visibility 0s var(--modal-transition-duration)
    }

    .modal--animate-fade.modal--is-visible {
        transition: opacity var(--modal-transition-duration), background-color var(--modal-transition-duration), visibility 0s
    }

    .modal--animate-scale,
    .modal--animate-translate-up,
    .modal--animate-translate-down,
    .modal--animate-translate-right,
    .modal--animate-translate-left {
        --modal-transition-duration: 0.2s;
        transition: opacity var(--modal-transition-duration), background-color var(--modal-transition-duration), visibility 0s var(--modal-transition-duration)
    }

    .modal--animate-scale .modal__content,
    .modal--animate-translate-up .modal__content,
    .modal--animate-translate-down .modal__content,
    .modal--animate-translate-right .modal__content,
    .modal--animate-translate-left .modal__content {
        will-change: transform;
        transition: transform var(--modal-transition-duration) var(--ease-out)
    }

    .modal--animate-scale.modal--is-visible,
    .modal--animate-translate-up.modal--is-visible,
    .modal--animate-translate-down.modal--is-visible,
    .modal--animate-translate-right.modal--is-visible,
    .modal--animate-translate-left.modal--is-visible {
        transition: opacity var(--modal-transition-duration), background-color var(--modal-transition-duration), visibility 0s
    }

    .modal--animate-scale.modal--is-visible .modal__content,
    .modal--animate-translate-up.modal--is-visible .modal__content,
    .modal--animate-translate-down.modal--is-visible .modal__content,
    .modal--animate-translate-right.modal--is-visible .modal__content,
    .modal--animate-translate-left.modal--is-visible .modal__content {
        transform: scale(1)
            /* reset all transformations */
    }

    .modal--animate-slide-up,
    .modal--animate-slide-down,
    .modal--animate-slide-right,
    .modal--animate-slide-left {
        --modal-transition-duration: 0.3s;
        transition: opacity 0s var(--modal-transition-duration), background-color var(--modal-transition-duration), visibility 0s var(--modal-transition-duration)
    }

    .modal--animate-slide-up .modal__content,
    .modal--animate-slide-down .modal__content,
    .modal--animate-slide-right .modal__content,
    .modal--animate-slide-left .modal__content {
        will-change: transform;
        transition: transform var(--modal-transition-duration) var(--ease-out)
    }

    .modal--animate-slide-up.modal--is-visible,
    .modal--animate-slide-down.modal--is-visible,
    .modal--animate-slide-right.modal--is-visible,
    .modal--animate-slide-left.modal--is-visible {
        transition: background-color var(--modal-transition-duration), visibility 0s
    }

    .modal--animate-slide-up.modal--is-visible .modal__content,
    .modal--animate-slide-down.modal--is-visible .modal__content,
    .modal--animate-slide-right.modal--is-visible .modal__content,
    .modal--animate-slide-left.modal--is-visible .modal__content {
        transform: scale(1)
            /* reset all transformations */
    }

    /* scale */
    .modal--animate-scale .modal__content {
        transform: scale(0.95)
    }

    /* translate */
    .modal--animate-translate-up .modal__content {
        transform: translateY(40px)
    }

    .modal--animate-translate-down .modal__content {
        transform: translateY(-40px)
    }

    .modal--animate-translate-right .modal__content {
        transform: translateX(-40px)
    }

    .modal--animate-translate-left .modal__content {
        transform: translateX(40px)
    }

    /* slide */
    .modal--animate-slide-up .modal__content {
        transform: translateY(100%)
    }

    .modal--animate-slide-down .modal__content {
        transform: translateY(-100%)
    }

    .modal--animate-slide-right .modal__content {
        transform: translateX(-100%)
    }

    .modal--animate-slide-left .modal__content {
        transform: translateX(100%)
    }
}

/* load content - optional */
.modal--is-loading .modal__content {
    visibility: hidden
}

.modal--is-loading .modal__loader {
    display: flex
}

.modal__loader {
    /* loader icon */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
    display: none;
    pointer-events: none
}

/* --image */
.modal-img-btn {
    position: relative;
    cursor: pointer
}

.modal-img-btn::after {
    content: "";
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: hsla(var(--color-black-h), var(--color-black-s), var(--color-black-l), 0);
    transition: background 0.2s
}

.modal-img-btn:hover::after {
    background-color: hsla(var(--color-black-h), var(--color-black-s), var(--color-black-l), 0.7)
}

.modal-img-btn:hover .modal-img-btn__icon-wrapper {
    opacity: 1
}

.modal-img-btn__icon-wrapper {
    position: absolute;
    z-index: 2;
    top: calc(50% - 24px);
    left: calc(50% - 24px);
    width: 48px;
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: hsla(var(--color-black-h), var(--color-black-s), var(--color-black-l), 0.7);
    opacity: 0;
    transition: opacity 0.2s
}

.modal-img-btn__icon-wrapper .icon {
    color: var(--color-white)
}

/* -------------------------------- 

File#: _2_slideshow
Title: Slideshow
Descr: Show a collection of items one at a time
Usage: codyhouse.co/license

-------------------------------- */
:root {
    --slideshow-height: 280px;
    --slideshow-fade-transition-duration: 0.25s;
    --slideshow-slide-transition-duration: 0.35s;
    --slideshow-prx-transition-duration: 0.5s;
    --slideshow-btn-width: 1.6em;
    --slideshow-btn-height: 3.2em;
    --slideshow-btn-icon-size: 1.6em;
    --slideshow-btn-offset: var(--space-xs)
}

@media (min-width: 48rem) {
    :root {
        --slideshow-height: 380px
    }
}

@media (min-width: 64rem) {
    :root {
        --slideshow-height: 480px
    }
}

@media (min-width: 80rem) {
    :root {
        --slideshow-height: 580px
    }
}

.slideshow__item {
    display: flex;
    align-items: center;
    justify-content: center;
    height: var(--slideshow-height);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center
}

.slideshow__item:focus {
    outline: none
}

.slideshow--ratio-16\:9 .slideshow__item {
    height: 0;
    padding-bottom: 56.25%
}

.slideshow--ratio-4\:3 .slideshow__item {
    height: 0;
    padding-bottom: 75%
}

.slideshow--ratio-1\:1 .slideshow__item {
    height: 0;
    padding-bottom: 100%
}

.slideshow {
    position: relative;
    z-index: 1;
    overflow: hidden
}

.slideshow__content {
    overflow: hidden
}

.slideshow__item {
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    width: 100%;
    visibility: hidden
}

.slideshow__item--selected {
    position: relative;
    z-index: 3;
    visibility: visible
}

.slideshow--transition-fade .slideshow__item {
    opacity: 0;
    transition: opacity 0s var(--slideshow-fade-transition-duration), visibility 0s var(--slideshow-fade-transition-duration)
}

.slideshow--transition-fade .slideshow__item--selected {
    opacity: 1;
    transition: opacity var(--slideshow-fade-transition-duration)
}

.slideshow--transition-slide .slideshow__item {
    animation-duration: var(--slideshow-slide-transition-duration);
    animation-fill-mode: forwards;
    animation-timing-function: var(--ease-out)
}

.slideshow--transition-slide .slideshow__item>* {
    visibility: hidden
}

.slideshow--transition-slide .slideshow__item:not(.slideshow__item--selected) * {
    transition: none
}

.slideshow--transition-slide .slideshow__item--selected>* {
    visibility: visible
}

.slideshow--transition-slide .slideshow__item--slide-in-left {
    animation-name: slide-in-left
}

.slideshow--transition-slide .slideshow__item--slide-in-right {
    animation-name: slide-in-right
}

.slideshow--transition-slide .slideshow__item--slide-out-left {
    animation-name: slide-out-left
}

.slideshow--transition-slide .slideshow__item--slide-out-right {
    animation-name: slide-out-right
}

.slideshow--transition-slide .slideshow__item--slide-out-left,
.slideshow--transition-slide .slideshow__item--slide-out-right {
    z-index: 2
}

.slideshow--transition-slide .slideshow__item--slide-out-left.slideshow__item--selected,
.slideshow--transition-slide .slideshow__item--slide-out-right.slideshow__item--selected {
    z-index: 3
}

.slideshow--transition-slide .slideshow__item--slide-out-left>*,
.slideshow--transition-slide .slideshow__item--slide-out-right>* {
    visibility: visible
}

@keyframes slide-in-left {
    0% {
        visibility: visible;
        transform: translateX(-100%)
    }

    100% {
        transform: translateX(0)
    }
}

@keyframes slide-in-right {
    0% {
        visibility: visible;
        transform: translateX(100%)
    }

    100% {
        transform: translateX(0)
    }
}

@keyframes slide-out-left {
    0% {
        visibility: visible;
        transform: translateX(0)
    }

    100% {
        transform: translateX(100%)
    }
}

@keyframes slide-out-right {
    0% {
        visibility: visible;
        transform: translateX(0)
    }

    100% {
        transform: translateX(-100%)
    }
}

.slideshow--transition-prx .slideshow__item {
    animation-duration: var(--slideshow-prx-transition-duration);
    animation-fill-mode: forwards;
    animation-timing-function: var(--ease-out)
}

.slideshow--transition-prx .slideshow__item>* {
    visibility: hidden
}

.slideshow--transition-prx .slideshow__item--selected>* {
    visibility: visible
}

.slideshow--transition-prx .slideshow__item--prx-in-left {
    animation-name: prx-in-left
}

.slideshow--transition-prx .slideshow__item--prx-in-right {
    animation-name: prx-in-right
}

.slideshow--transition-prx .slideshow__item--prx-out-left {
    animation-name: prx-out-left
}

.slideshow--transition-prx .slideshow__item--prx-out-right {
    animation-name: prx-out-right
}

.slideshow--transition-prx .slideshow__item--prx-out-left,
.slideshow--transition-prx .slideshow__item--prx-out-right {
    z-index: 2
}

.slideshow--transition-prx .slideshow__item--prx-out-left.slideshow__item--selected,
.slideshow--transition-prx .slideshow__item--prx-out-right.slideshow__item--selected {
    z-index: 3
}

.slideshow--transition-prx .slideshow__item--prx-out-left>*,
.slideshow--transition-prx .slideshow__item--prx-out-right>* {
    visibility: visible
}

@keyframes prx-in-left {
    0% {
        visibility: visible;
        transform: translateX(-100%)
    }

    100% {
        transform: translateX(0)
    }
}

@keyframes prx-in-right {
    0% {
        visibility: visible;
        transform: translateX(100%)
    }

    100% {
        transform: translateX(0)
    }
}

@keyframes prx-out-left {
    0% {
        opacity: 1;
        visibility: visible;
        transform: translateX(0)
    }

    100% {
        opacity: 0.3;
        transform: translateX(40%)
    }
}

@keyframes prx-out-right {
    0% {
        opacity: 1;
        visibility: visible;
        transform: translateX(0)
    }

    100% {
        opacity: 0.3;
        transform: translateX(-40%)
    }
}

.slideshow[data-swipe=on] .slideshow__content {
    -webkit-user-select: none;
    user-select: none
}

.slideshow[data-swipe=on] .slideshow__content img {
    pointer-events: none
}

.slideshow__control {
    display: none
}

.slideshow[data-controls=hover] .slideshow__control {
    opacity: 0;
    transition: opacity 0.3s
}

.slideshow[data-controls=hover]:hover .slideshow__control {
    opacity: 1
}

.slideshow[data-swipe=on] .slideshow__control {
    display: none
}

.slideshow__control {
    display: block;
    position: absolute;
    z-index: 4;
    top: 50%;
    transform: translateY(-50%)
}

.slideshow__control:first-of-type {
    left: var(--slideshow-btn-offset)
}

.slideshow__control:last-of-type {
    right: var(--slideshow-btn-offset)
}

@media (min-width: 64rem) {
    .slideshow[data-swipe=on] .slideshow__control {
        display: block
    }
}

.slideshow__btn {
    display: block;
    background-color: hsla(var(--color-black-h), var(--color-black-s), var(--color-black-l), 0.75);
    height: var(--slideshow-btn-height);
    width: var(--slideshow-btn-width);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: background 0.2s, transform 0.2s
}

.slideshow__btn:hover {
    background-color: hsla(var(--color-contrast-higher-h), var(--color-contrast-higher-s), var(--color-contrast-higher-l), 0.85)
}

.slideshow__btn:hover .icon {
    color: var(--color-bg)
}

.slideshow:not(.slideshow--is-animating) .slideshow__btn:active {
    transform: translateY(2px)
}

.slideshow__btn .icon {
    display: block;
    width: var(--slideshow-btn-icon-size);
    height: var(--slideshow-btn-icon-size);
    margin: 0 auto;
    transition: color 0.2s;
    color: var(--color-white)
}

@supports (grid-area: auto) {
    .slideshow__btn {
        background-color: transparent
    }

    .slideshow__btn .icon {
        color: var(--color-contrast-higher)
    }
}

.slideshow__navigation {
    position: absolute;
    z-index: 4;
    bottom: 0;
    width: 100%;
    height: 32px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: transparent
}

.slideshow__nav-item {
    display: inline-block;
    margin: 0 var(--space-xxxs)
}

.slideshow__nav-item button {
    display: block;
    position: relative;
    font-size: 8px;
    color: var(--color-contrast-high);
    height: 1em;
    width: 1em;
    border-radius: 50%;
    background-color: currentColor;
    opacity: 0.4;
    cursor: pointer;
    transition: background 0.3s
}

.slideshow__nav-item button::before {
    content: "";
    position: absolute;
    top: calc(50% - 0.5em);
    left: calc(50% - 0.5em);
    height: 1em;
    width: 1em;
    font-size: 14px;
    border-radius: inherit;
    border: 1px solid var(--color-contrast-high);
    opacity: 0;
    transform: scale(0);
    transition: 0.3s
}

.slideshow__nav-item button:focus {
    outline: none
}

.slideshow__nav-item button:focus::before {
    opacity: 1;
    transform: scale(1)
}

.slideshow__nav-item--selected button {
    opacity: 1
}

@media (min-width: 64rem) {
    .slideshow__navigation {
        height: 40px
    }

    .slideshow__nav-item button {
        font-size: 10px
    }

    .slideshow__nav-item button::before {
        font-size: 16px
    }
}

/* -------------------------------- 

File#: _3_expandable-img-gallery
Title: Expandable Image Gallery
Descr: Image gallery that expands in a modal media gallery on click
Usage: codyhouse.co/license

-------------------------------- */
:root {
    --exp-gallery-animation-duration: 0.3s
}

.exp-gallery-item-hidden {
    opacity: 0
}

.exp-lightbox {
    transition: background var(--exp-gallery-animation-duration)
}

.exp-lightbox .menu-bar {
    --menu-bar-button-size: 2.2em;
    --menu-bar-icon-size: 1.2em;
    --menu-bar-horizontal-gap: var(--space-xxs);
    --menu-bar-vertical-gap: 4px;
    --menu-bar-label-size: var(--text-xs)
}

.exp-lightbox .slideshow {
    --slideshow-btn-width: 1.6em;
    --slideshow-btn-height: 3.2em;
    --slideshow-btn-icon-size: 1.6em;
    --slideshow-btn-offset: var(--space-md)
}

.exp-lightbox .slideshow__content {
    position: relative
}

.exp-lightbox:not(.modal--is-visible) {
    background-color: transparent
}

.exp-lightbox__content {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%
}

.exp-lightbox__header {
    position: relative;
    z-index: 2;
    flex-shrink: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-xs) var(--space-md) 0
}

.exp-lightbox__title {
    font-size: var(--text-md);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-right: var(--space-sm)
}

.exp-lightbox__body {
    position: relative;
    z-index: 1;
    flex-grow: 1;
    padding: var(--space-md)
}

@media (min-width: 64rem) {
    .exp-lightbox__body {
        padding-top: var(--space-xs);
        padding-bottom: var(--space-xs);
        padding-right: calc(var(--space-xs) + var(--slideshow-btn-width) + var(--slideshow-btn-offset));
        padding-left: calc(var(--space-xs) + var(--slideshow-btn-width) + var(--slideshow-btn-offset))
    }
}

.exp-lightbox {
    --slideshow-height: 100%
}

.exp-lightbox .slideshow {
    display: flex;
    align-items: stretch
}

.exp-lightbox .slideshow__content {
    flex-grow: 1
}

.exp-lightbox--no-transition .slideshow__content * {
    transition: none !important;
    animation: none !important
}

.exp-lightbox__media {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
    width: 100%;
    max-height: 100%;
    max-width: 100%
}

.exp-lightbox__media-outer {
    position: relative;
    width: 100%;
    flex-grow: 1
}

.slideshow__content--hide .exp-lightbox__media-outer {
    opacity: 0
}

.exp-lightbox__media-inner {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center
}

.exp-lightbox__media-inner img {
    display: inline-block;
    height: auto;
    width: auto;
    max-height: 100%
}

.exp-lightbox.modal--is-visible .slideshow[data-swipe=on] .exp-lightbox__media-inner img {
    pointer-events: auto;
    -webkit-user-select: none;
    user-select: none
}

.exp-lightbox__caption {
    flex-shrink: 0;
    text-align: center;
    max-width: 600px;
    margin-top: var(--space-xs);
    font-size: var(--text-sm)
}

.exp-lightbox__media-outer {
    min-height: 200px
}

@supports (display: flex) {
    .exp-lightbox__media-outer {
        min-height: 0
    }
}

.exp-lightbox__clone-img-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    z-index: var(--z-index-overlay, 15);
    pointer-events: none;
    visibility: hidden;
    opacity: 0;
    transform-origin: top left;
    transition: transform var(--exp-gallery-animation-duration) var(--ease-out);
    will-change: transform
}

.exp-lightbox__clone-img-wrapper svg,
.exp-lightbox__clone-img-wrapper rect,
.exp-lightbox__clone-img-wrapper image {
    height: 100%;
    width: 100%
}

.exp-lightbox__clone-img-wrapper--is-visible {
    visibility: visible;
    opacity: 1
}

.exp-lightbox__body[data-zoom=on] .exp-lightbox__media-inner img {
    cursor: zoom-in
}

.exp-lightbox__zoom {
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: 3;
    overflow: auto;
    background-color: var(--color-bg);
    cursor: zoom-out;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0s 0.3s, visibility 0s 0.3s
}

.exp-lightbox__zoom img {
    display: block;
    width: 100%;
    max-width: none;
    transform-origin: top left;
    transition: transform 0.3s
}

.exp-lightbox__zoom--no-transition img {
    transition: none
}

.exp-lightbox__zoom--is-visible {
    opacity: 1;
    visibility: visible;
    transition: none
}

.exp-gallery img {
    display: block;
    width: 100%;
    transition: opacity 0.3s
}

.exp-gallery img:hover {
    cursor: pointer;
    opacity: 0.85
}