:root {
    --f-spinner-width: 36px;
    --f-spinner-height: 36px;
    --f-spinner-color-1: rgba(0, 0, 0, 0.1);
    --f-spinner-color-2: rgba(17, 24, 28, 0.8);
    --f-spinner-stroke: 2.75
}

.f-spinner {
    margin: auto;
    padding: 0;
    width: var(--f-spinner-width);
    height: var(--f-spinner-height)
}

    .f-spinner svg {
        width: 100%;
        height: 100%;
        vertical-align: top;
        animation: f-spinner-rotate 2s linear infinite
    }

        .f-spinner svg * {
            stroke-width: var(--f-spinner-stroke);
            fill: none
        }

            .f-spinner svg *:first-child {
                stroke: var(--f-spinner-color-1)
            }

            .f-spinner svg *:last-child {
                stroke: var(--f-spinner-color-2);
                animation: f-spinner-dash 2s ease-in-out infinite
            }

@keyframes f-spinner-rotate {
    100% {
        transform: rotate(360deg)
    }
}

@keyframes f-spinner-dash {
    0% {
        stroke-dasharray: 1,150;
        stroke-dashoffset: 0
    }

    50% {
        stroke-dasharray: 90,150;
        stroke-dashoffset: -35
    }

    100% {
        stroke-dasharray: 90,150;
        stroke-dashoffset: -124
    }
}

.f-panzoom {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    transform: translate3d(0, 0, 0);
    background: #fff
}

    .f-panzoom.is-draggable {
        cursor: move;
        cursor: grab
    }

    .f-panzoom.can-zoom_in {
        cursor: zoom-in
    }

    .f-panzoom.can-zoom_out {
        cursor: zoom-out
    }

    .f-panzoom.is-dragging {
        cursor: move;
        cursor: grabbing
    }

    .f-panzoom.in-fullscreen {
        position: fixed;
        top: 0;
        left: 0;
        margin: 0 !important;
        width: 100% !important;
        height: 100% !important;
        max-width: none !important;
        max-height: none !important;
        aspect-ratio: unset !important;
        z-index: 9999
    }

.f-panzoom__content {
    display: block;
    margin: auto;
    position: relative;
    max-width: 100%;
    max-height: 100%;
    min-height: 0;
    object-fit: contain;
    transform: translate3d(0, 0, 0) scale(1) rotate(0) skew(0);
    transform-origin: center center;
    transition: none;
    -webkit-user-select: none;
    user-select: none
}

.is-loading .f-panzoom__content {
    display: none
}

.is-scaling .f-panzoom__content {
    filter: blur(0px);
    will-change: transform,width,height;
    backface-visibility: hidden
}

picture.f-panzoom__content > img {
    width: 100%;
    height: auto;
    max-height: 100%
}

.f-panzoom__content:not(:last-child) {
    margin-bottom: 0
}

.f-panzoom__viewport {
    margin: auto;
    position: relative;
    width: fit-content;
    height: fit-content;
    min-height: 1px
}

    .f-panzoom__viewport:not(:last-child) {
        margin-bottom: 0
    }

.f-panzoom__caption:not(:first-child) {
    margin-bottom: auto
}

html.with-panzoom-in-fullscreen {
    overflow: hidden
}
:root {
    --f-spinner-width: 36px;
    --f-spinner-height: 36px;
    --f-spinner-color-1: rgba(0, 0, 0, 0.1);
    --f-spinner-color-2: rgba(17, 24, 28, 0.8);
    --f-spinner-stroke: 2.75
}

.f-spinner {
    margin: auto;
    padding: 0;
    width: var(--f-spinner-width);
    height: var(--f-spinner-height)
}

    .f-spinner svg {
        width: 100%;
        height: 100%;
        vertical-align: top;
        animation: f-spinner-rotate 2s linear infinite
    }

        .f-spinner svg * {
            stroke-width: var(--f-spinner-stroke);
            fill: none
        }

            .f-spinner svg *:first-child {
                stroke: var(--f-spinner-color-1)
            }

            .f-spinner svg *:last-child {
                stroke: var(--f-spinner-color-2);
                animation: f-spinner-dash 2s ease-in-out infinite
            }

@keyframes f-spinner-rotate {
    100% {
        transform: rotate(360deg)
    }
}

@keyframes f-spinner-dash {
    0% {
        stroke-dasharray: 1,150;
        stroke-dashoffset: 0
    }

    50% {
        stroke-dasharray: 90,150;
        stroke-dashoffset: -35
    }

    100% {
        stroke-dasharray: 90,150;
        stroke-dashoffset: -124
    }
}

.f-panzoom {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    transform: translate3d(0, 0, 0);
    background: #fff
}

    .f-panzoom.is-draggable {
        cursor: move;
        cursor: grab
    }

    .f-panzoom.can-zoom_in {
        cursor: zoom-in
    }

    .f-panzoom.can-zoom_out {
        cursor: zoom-out
    }

    .f-panzoom.is-dragging {
        cursor: move;
        cursor: grabbing
    }

    .f-panzoom.in-fullscreen {
        position: fixed;
        top: 0;
        left: 0;
        margin: 0 !important;
        width: 100% !important;
        height: 100% !important;
        max-width: none !important;
        max-height: none !important;
        aspect-ratio: unset !important;
        z-index: 9999
    }

.f-panzoom__content {
    display: block;
    margin: auto;
    position: relative;
    max-width: 100%;
    max-height: 100%;
    min-height: 0;
    object-fit: contain;
    transform: translate3d(0, 0, 0) scale(1) rotate(0) skew(0);
    transform-origin: center center;
    transition: none;
    -webkit-user-select: none;
    user-select: none
}

.is-loading .f-panzoom__content {
    display: none
}

.is-scaling .f-panzoom__content {
    filter: blur(0px);
    will-change: transform,width,height;
    backface-visibility: hidden
}

picture.f-panzoom__content > img {
    width: 100%;
    height: auto;
    max-height: 100%
}

.f-panzoom__content:not(:last-child) {
    margin-bottom: 0
}

.f-panzoom__viewport {
    margin: auto;
    position: relative;
    width: fit-content;
    height: fit-content;
    min-height: 1px
}

    .f-panzoom__viewport:not(:last-child) {
        margin-bottom: 0
    }

.f-panzoom__caption:not(:first-child) {
    margin-bottom: auto
}

html.with-panzoom-in-fullscreen {
    overflow: hidden
}