/*
 * =========================================================
 * DRAK GALLERY
 * COMPLETE FRONTEND CSS
 * =========================================================
 */

.drak-gallery-wrap {

    --drak-gap-desktop: 0px;
    --drak-gap-tablet: 0px;
    --drak-gap-mobile: 0px;

    --drak-columns-desktop: 4;
    --drak-columns-tablet: 3;
    --drak-columns-mobile: 2;

    --drak-masonry-columns-desktop: 4;
    --drak-masonry-columns-tablet: 3;
    --drak-masonry-columns-mobile: 2;

    --drak-slides-desktop: 4;
    --drak-slides-tablet: 3;
    --drak-slides-mobile: 1;

    --drak-radius: 0px;
    --drak-border: 0px;

    --drak-fit: cover;

    --drak-hover-opacity: 0.88;
    --drak-hover-zoom: 1.06;
    --drak-hover-transition: 300ms;

    --drak-hover-overlay: #067dc2;

    --drak-lightbox-bg: rgba(0, 0, 0, 0.78);

    width: 100%;
    max-width: 100%;

    position: relative;

    display: block;

    box-sizing: border-box;

    overflow: visible;
}


.drak-gallery-wrap *,
.drak-gallery-wrap *::before,
.drak-gallery-wrap *::after {

    box-sizing: border-box;
}


/* =========================================================
   GALLERY CONTAINER
   ========================================================= */

.drak-gallery-container {

    width: 100%;
    max-width: 100%;

    position: relative;

    margin: 0;
    padding: 0;
}


/* =========================================================
   GALLERY ITEM
   ========================================================= */

/* =========================================================
   DRAK GALLERY ITEM
   ISOLATED FROM THEME / ELEMENTOR GLOBAL STYLES
   ========================================================= */

.drak-gallery-wrap .drak-gallery-item {

    position: relative !important;

    display: block !important;

    width: 100%;

    margin: 0 !important;
    padding: 0 !important;

    min-width: 0 !important;

    overflow: hidden !important;

    /*
     * DRAK Gallery controls these values.
     * Prevent theme/global CSS from overriding them.
     */

    border-style: solid !important;

    border-width:
        var(--drak-border) !important;

    border-color: transparent !important;

    border-radius:
        var(--drak-radius) !important;

    background: transparent !important;

    box-shadow: none !important;

    outline: none !important;
}


/* =========================================================
   DRAK GALLERY IMAGE WRAPPER
   ========================================================= */

.drak-gallery-wrap .drak-gallery-image-wrap {

    position: relative !important;

    width: 100% !important;
    height: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow: hidden !important;

    border: 0 !important;

    border-radius:
        var(--drak-radius) !important;

    box-shadow: none !important;

    outline: none !important;

    background: transparent !important;
}


/* =========================================================
   DRAK GALLERY IMAGE
   ========================================================= */

.drak-gallery-wrap .drak-gallery-item img {

    display: block !important;

    width: 100% !important;
    height: 100% !important;

    max-width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    border-style: solid !important;
    border-width: 0 !important;
    border-color: transparent !important;

    border-radius:
        var(--drak-radius) !important;

    outline: none !important;

    box-shadow: none !important;

    object-fit:
        var(--drak-fit);

    background: transparent !important;
}


/* =========================================================
   FIGURE RESET
   PREVENT THEME STYLES FROM MODIFYING <figure>
   ========================================================= */

.drak-gallery-wrap figure.drak-gallery-item {

    margin: 0 !important;

    padding: 0 !important;

    border-radius:
        var(--drak-radius) !important;

    border-width:
        var(--drak-border) !important;

    border-style: solid !important;

    border-color: transparent !important;

    box-shadow: none !important;
}


/* =========================================================
   IMAGE WRAPPER
   ========================================================= */

.drak-gallery-image-wrap {

    position: relative;

    width: 100%;
    height: 100%;

    margin: 0;
    padding: 0;

    overflow: hidden;
}


/* =========================================================
   IMAGE
   ========================================================= */

.drak-gallery-item img {

    display: block;

    width: 100%;
    height: 100%;

    max-width: 100%;

    margin: 0;
    padding: 0;

    border: 0;

    object-fit:
        var(--drak-fit);
}


/* =========================================================
   ASPECT RATIOS
   ========================================================= */

.drak-gallery-item.drak-ratio-1-1 {
    aspect-ratio: 1 / 1;
}

.drak-gallery-item.drak-ratio-4-3 {
    aspect-ratio: 4 / 3;
}

.drak-gallery-item.drak-ratio-3-2 {
    aspect-ratio: 3 / 2;
}

.drak-gallery-item.drak-ratio-16-9 {
    aspect-ratio: 16 / 9;
}

.drak-gallery-item.drak-ratio-3-4 {
    aspect-ratio: 3 / 4;
}

.drak-gallery-item.drak-ratio-2-3 {
    aspect-ratio: 2 / 3;
}

.drak-gallery-item.drak-ratio-auto {
    aspect-ratio: auto;
}


/* =========================================================
   STANDARD GRID
   ========================================================= */

.drak-gallery-layout-grid .drak-gallery-container {

    display: grid;

    width: 100%;

    grid-template-columns:
        repeat(var(--drak-columns-desktop),
            minmax(0, 1fr));

    gap:
        var(--drak-gap-desktop);
}


.drak-gallery-layout-grid .drak-gallery-item {

    width: 100%;

    min-width: 0;
}


/* =========================================================
   MASONRY
   ========================================================= */

.drak-gallery-layout-masonry .drak-gallery-container {

    display: block;

    width: 100%;

    column-count:
        var(--drak-masonry-columns-desktop);

    column-gap:
        var(--drak-gap-desktop);
}


.drak-gallery-layout-masonry .drak-gallery-item {

    display: inline-block;

    width: 100%;

    margin:
        0 0 var(--drak-gap-desktop);

    break-inside: avoid;

    vertical-align: top;
}


.drak-gallery-layout-masonry .drak-gallery-image-wrap {

    height: auto;
}


.drak-gallery-layout-masonry .drak-gallery-item img {

    width: 100%;
    height: auto;

    object-fit: cover;
}


/* =========================================================
   JUSTIFIED GRID
   ========================================================= */

.drak-gallery-layout-justified .drak-gallery-container {

    display: flex;

    flex-wrap: wrap;

    width: 100%;

    gap:
        var(--drak-gap-desktop);

    align-items: stretch;
}


.drak-gallery-layout-justified .drak-gallery-item {

    flex:
        1 1 250px;

    height: 220px;

    aspect-ratio: auto;
}


.drak-gallery-layout-justified .drak-gallery-image-wrap {

    height: 100%;
}


.drak-gallery-layout-justified .drak-gallery-item img {

    width: 100%;
    height: 100%;

    object-fit: cover;
}


/* =========================================================
   BENTO
   ========================================================= */

.drak-gallery-layout-bento .drak-gallery-container {

    display: grid;

    width: 100%;

    grid-template-columns:
        repeat(4,
            minmax(0, 1fr));

    grid-auto-rows:
        minmax(180px, 1fr);

    gap:
        var(--drak-gap-desktop);
}


.drak-gallery-layout-bento .drak-gallery-item {

    min-width: 0;

    min-height: 180px;
}


.drak-gallery-layout-bento .drak-gallery-item:nth-child(1) {

    grid-column:
        span 2;

    grid-row:
        span 2;
}


/* =========================================================
   CAROUSEL
   ========================================================= */

.drak-gallery-layout-carousel {

    position: relative;

    width: 100%;
}


.drak-gallery-layout-carousel .drak-gallery-container {

    display: flex;

    flex-wrap: nowrap;

    width: 100%;
    max-width: 100%;

    gap:
        var(--drak-gap-desktop);

    overflow-x: auto;
    overflow-y: hidden;

    scroll-behavior: smooth;

    scroll-snap-type:
        x mandatory;

    scrollbar-width: none;
}


.drak-gallery-layout-carousel .drak-gallery-container::-webkit-scrollbar {

    display: none;
}


.drak-gallery-layout-carousel .drak-gallery-item {

    flex:
        0 0 calc((100% - (var(--drak-slides-desktop) - 1) * var(--drak-gap-desktop)) / var(--drak-slides-desktop));

    scroll-snap-align: start;
}


/* =========================================================
   CAROUSEL ARROWS
   ========================================================= */

.drak-carousel-prev,
.drak-carousel-next {

    position: absolute;

    top: 50%;

    transform:
        translateY(-50%);

    z-index: 30;

    width: 44px;
    height: 44px;

    padding: 0;

    border: 0;

    border-radius: 50%;

    background:
        rgba(0, 0, 0, 0.65);

    color: #fff;

    font-size: 28px;

    line-height: 1;

    cursor: pointer;

    display: flex;

    align-items: center;
    justify-content: center;
}


.drak-carousel-prev {
    left: 10px;
}


.drak-carousel-next {
    right: 10px;
}


.drak-carousel-prev:hover,
.drak-carousel-next:hover {

    background:
        rgba(0, 0, 0, 0.85);
}


.drak-carousel-dots {

    display: flex;

    justify-content: center;
    align-items: center;

    gap: 7px;

    margin-top: 15px;
}


.drak-carousel-dot {

    width: 10px;
    height: 10px;

    padding: 0;

    border: 0;

    border-radius: 50%;

    background: #bbb;

    cursor: pointer;
}


.drak-carousel-dot.is-active {

    background: #067dc2;
}


/* =========================================================
   HOVER EFFECTS
   ========================================================= */

.drak-gallery-hover-zoom .drak-gallery-item img {

    transition:
        transform var(--drak-hover-transition) ease;
}


.drak-gallery-hover-zoom .drak-gallery-item:hover img {

    transform:
        scale(var(--drak-hover-zoom));
}


.drak-gallery-hover-lift .drak-gallery-item {

    transition:
        transform var(--drak-hover-transition) ease;
}


.drak-gallery-hover-lift .drak-gallery-item:hover {

    transform:
        translateY(-6px);
}


.drak-gallery-hover-grayscale .drak-gallery-item img {

    transition:
        filter var(--drak-hover-transition) ease;
}


.drak-gallery-hover-grayscale .drak-gallery-item:hover img {

    filter:
        grayscale(100%);
}


.drak-gallery-hover-overlay .drak-gallery-item::after {

    content: "";

    position: absolute;

    inset: 0;

    background:
        var(--drak-hover-overlay);

    opacity: 0;

    transition:
        opacity var(--drak-hover-transition) ease;

    pointer-events: none;

    z-index: 2;
}


.drak-gallery-hover-overlay .drak-gallery-item:hover::after {

    opacity:
        var(--drak-hover-opacity);
}


.drak-gallery-hover-shine .drak-gallery-item::after {

    content: "";

    position: absolute;

    top: 0;
    left: -120%;

    width: 70%;
    height: 100%;

    background:
        linear-gradient(90deg,
            transparent,
            rgba(255, 255, 255, .5),
            transparent);

    transform:
        skewX(-20deg);

    transition:
        left 700ms ease;

    pointer-events: none;

    z-index: 2;
}


.drak-gallery-hover-shine .drak-gallery-item:hover::after {

    left: 140%;
}


.drak-gallery-hover-none .drak-gallery-item::after {

    display: none;
}


/* =========================================================
   LIGHTBOX TRIGGER
   No blue background / no plus
   ========================================================= */

.drak-gallery-lightbox-trigger,
.drak-gallery-lightbox-trigger:hover,
.drak-gallery-lightbox-trigger:focus,
.drak-gallery-lightbox-trigger:active,
.drak-gallery-lightbox-trigger:focus-visible {

    position: absolute !important;

    inset: 0 !important;

    width: 100% !important;
    height: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;
    outline: 0 !important;

    border-radius: 0 !important;

    background:
        transparent !important;

    background-color:
        transparent !important;

    background-image:
        none !important;

    box-shadow:
        none !important;

    color:
        transparent !important;

    cursor: pointer;

    z-index: 20;

    appearance:
        none !important;

    -webkit-appearance:
        none !important;

    opacity: 1 !important;

    transform: none !important;

    filter: none !important;
}


.drak-gallery-lightbox-trigger::before,
.drak-gallery-lightbox-trigger::after {

    content: none !important;

    display: none !important;

    background: none !important;

    opacity: 0 !important;
}


.drak-gallery-lightbox-trigger span {

    display: none !important;
}


/* =========================================================
   REMOVE BLUE GALLERY OVERLAY
   ========================================================= */

.drak-gallery-item::before,
.drak-gallery-item::after {

    content: none !important;

    display: none !important;

    background: transparent !important;

    opacity: 0 !important;

    visibility: hidden !important;

    pointer-events: none !important;
}


/* =========================================================
   LIGHTBOX CLOSED
   ========================================================= */

.drak-gallery-lightbox {

    display: none !important;

    position: fixed !important;

    inset: 0 !important;

    width: 100vw !important;
    height: 100vh !important;

    max-width: none !important;
    max-height: none !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;

    z-index: 2147483647 !important;

    background:
        rgba(0, 0, 0, 0.78) !important;

    overflow: hidden !important;

    opacity: 0;

    visibility: hidden;

    pointer-events: none;
}


/* =========================================================
   LIGHTBOX OPEN
   ========================================================= */

.drak-gallery-lightbox.is-open {

    display: flex !important;

    position: fixed !important;

    inset: 0 !important;

    width: 100vw !important;
    height: 100vh !important;

    max-width: none !important;
    max-height: none !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;

    z-index: 2147483647 !important;

    align-items: center !important;

    justify-content: center !important;

    background:
        rgba(0, 0, 0, 0.78) !important;

    overflow: hidden !important;

    opacity: 1;

    visibility: visible;

    pointer-events: auto;
}


body.drak-lightbox-open {

    overflow: hidden !important;
}


/* =========================================================
   MAIN IMAGE AREA
   ========================================================= */

.drak-gallery-lightbox.is-open .drak-lightbox-content {

    position: absolute;

    top: 67px;

    right: 85px;

    bottom: 120px;

    left: 85px;

    z-index: 10;

    width: auto;

    height: auto;

    max-width: none;

    max-height: none;

    margin: 0;
    padding: 0;

    display: flex;

    align-items: center;
    justify-content: center;

    overflow: hidden;

    background: transparent !important;

    cursor: default;
}


/* =========================================================
   LIGHTBOX IMAGE
   ========================================================= */

.drak-gallery-lightbox.is-open .drak-lightbox-content img {

    display: block;

    width: auto !important;
    height: auto !important;

    max-width: 100% !important;
    max-height: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;

    object-fit: contain;

    background: transparent !important;

    box-shadow: none !important;

    opacity: 1;

    transform:
        translate3d(0, 0, 0) scale(1) rotate(0deg);

    transform-origin:
        center center;

    user-select: none;

    -webkit-user-select: none;

    -webkit-user-drag: none;

    touch-action: none;

    will-change: transform;

    cursor: default;

    transition:
        transform 180ms ease,
        opacity 160ms ease;
}


.drak-gallery-lightbox.is-open .drak-lightbox-content img.is-zoomed {

    cursor: grab;

    transition: none !important;
}


.drak-gallery-lightbox.is-open .drak-lightbox-content img.is-dragging {

    cursor: grabbing;

    transition: none !important;
}


/* =========================================================
   COUNTER
   ========================================================= */

.drak-lightbox-counter {

    position: fixed;

    top: 24px;
    left: 30px;

    z-index: 2147483647;

    display: flex;

    align-items: center;

    color:
        rgba(255, 255, 255, .88);

    font-family:
        "Montserrat",
        sans-serif !important;

    font-size: 20px;

    line-height: 1;

    font-weight: 400;

    letter-spacing: 0;

    user-select: none;
}


.drak-lightbox-counter-separator {

    margin:
        0 5px;

    opacity: .72;

    font-family:
        "Montserrat",
        sans-serif !important;
}


/* =========================================================
   TOOLBAR
   ========================================================= */

.drak-lightbox-toolbar {

    position: fixed;

    top: 13px;
    right: 20px;

    z-index: 2147483647;

    display: flex;

    align-items: center;

    gap: 5px;

    height: 48px;

    padding: 0;

    background: transparent;
}


.drak-lightbox-tool {

    width: 43px;
    height: 43px;

    margin: 0 !important;
    padding: 7px !important;

    border: 0 !important;
    outline: 0 !important;

    border-radius: 3px !important;

    background:
        transparent !important;

    background-image:
        none !important;

    color:
        rgba(255, 255, 255, .72) !important;

    cursor: pointer;

    display: flex;

    align-items: center;
    justify-content: center;

    box-shadow:
        none !important;

    appearance:
        none !important;

    -webkit-appearance:
        none !important;

    transition:
        background 160ms ease,
        color 160ms ease;
}


.drak-lightbox-tool:hover,
.drak-lightbox-tool:focus,
.drak-lightbox-tool:active {

    background:
        rgba(255, 255, 255, .08) !important;

    color:
        #fff !important;

    outline: none !important;

    box-shadow: none !important;
}


.drak-lightbox-tool::before,
.drak-lightbox-tool::after {

    content: none !important;

    display: none !important;
}


.drak-lightbox-tool svg {

    display: block;

    width: 27px;
    height: 27px;

    margin: 0;
    padding: 0;

    fill: none !important;

    stroke: currentColor;

    stroke-width: 1.7;

    stroke-linecap: round;

    stroke-linejoin: round;

    pointer-events: none;
}


/* =========================================================
   ROTATE ICONS
   ========================================================= */

.drak-lightbox-rotate-left svg,
.drak-lightbox-rotate-right svg {

    width: 28px;
    height: 28px;

    stroke-width: 1.65;
}


/* =========================================================
   CLOSE ICON
   ========================================================= */

.drak-lightbox-close svg {

    width: 29px;
    height: 29px;
}


/* =========================================================
   PREVIOUS / NEXT
   ========================================================= */

.drak-lightbox-prev,
.drak-lightbox-next {

    position: fixed !important;

    top: 50%;

    transform:
        translateY(-50%);

    z-index: 2147483647 !important;

    width: 56px;
    height: 90px;

    margin: 0 !important;
    padding: 15px !important;

    border: 0 !important;
    outline: 0 !important;

    border-radius: 0 !important;

    background:
        transparent !important;

    color:
        rgba(255, 255, 255, .72) !important;

    cursor: pointer;

    display: flex;

    align-items: center;
    justify-content: center;

    box-shadow: none !important;

    appearance: none !important;

    -webkit-appearance: none !important;
}


.drak-lightbox-prev {
    left: 15px;
}


.drak-lightbox-next {
    right: 15px;
}


.drak-lightbox-prev:hover,
.drak-lightbox-next:hover {

    color:
        #fff !important;

    background:
        rgba(255, 255, 255, .06) !important;
}


.drak-lightbox-prev::before,
.drak-lightbox-prev::after,
.drak-lightbox-next::before,
.drak-lightbox-next::after {

    content: none !important;

    display: none !important;
}


.drak-lightbox-prev svg,
.drak-lightbox-next svg {

    width: 38px;
    height: 38px;

    fill: none !important;

    stroke: currentColor;

    stroke-width: 1.7;

    stroke-linecap: round;

    stroke-linejoin: round;
}


/* =========================================================
   THUMBNAILS
   ========================================================= */

.drak-lightbox-thumbnails {

    position: fixed;

    left: 0;
    right: 0;
    bottom: 0;

    z-index: 2147483646;

    height: 106px;

    padding:
        14px 20px;

    display: flex;

    align-items: center;

    justify-content: flex-start;

    gap: 8px;

    overflow-x: auto;
    overflow-y: hidden;

    background:
        rgba(0, 0, 0, .88);

    scrollbar-width: thin;

    scrollbar-color:
        rgba(255, 255, 255, .35) transparent;
}


.drak-lightbox-thumbnails::-webkit-scrollbar {

    height: 6px;
}


.drak-lightbox-thumbnails::-webkit-scrollbar-track {

    background: transparent;
}


.drak-lightbox-thumbnails::-webkit-scrollbar-thumb {

    background:
        rgba(255, 255, 255, .35);

    border-radius: 3px;
}


.drak-lightbox-thumbnail {

    flex:
        0 0 138px;

    width: 138px;
    height: 82px;

    margin: 0 !important;
    padding: 2px !important;

    border:
        2px solid transparent !important;

    border-radius: 5px !important;

    background:
        transparent !important;

    cursor: pointer;

    overflow: hidden;

    display: flex;

    align-items: center;
    justify-content: center;

    appearance:
        none !important;

    -webkit-appearance:
        none !important;

    box-shadow:
        none !important;
}


.drak-lightbox-thumbnail::before,
.drak-lightbox-thumbnail::after {

    content: none !important;

    display: none !important;
}


.drak-lightbox-thumbnail img {

    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    border-radius: 2px;

    margin: 0;
    padding: 0;

    border: 0;

    opacity: .78;
}


.drak-lightbox-thumbnail:hover img {

    opacity: 1;
}


.drak-lightbox-thumbnail.is-active {

    border-color:
        #fff !important;
}


.drak-lightbox-thumbnail.is-active img {

    opacity: 1;
}


/* =========================================================
   MESSAGE
   ========================================================= */

.drak-lightbox-message {

    position: fixed;

    left: 50%;

    bottom: 125px;

    transform:
        translateX(-50%);

    z-index: 2147483647;

    padding:
        10px 16px;

    border-radius: 4px;

    background:
        rgba(0, 0, 0, .86);

    color: #fff;

    font-family:
        "Montserrat",
        sans-serif !important;

    font-size: 13px;

    line-height: 1.4;

    white-space: nowrap;
}


/* =========================================================
   FILTERS
   ========================================================= */

.drak-gallery-filters {

    display: flex;

    flex-wrap: wrap;

    align-items: center;

    gap: 8px;

    margin-bottom: 20px;
}


.drak-filter-button {

    border:
        1px solid #ddd;

    background: #fff;

    color: #333;

    padding:
        8px 15px;

    font-size: 14px;

    line-height: 1.4;

    cursor: pointer;

    border-radius: 4px;
}


.drak-filter-button.is-active {

    background:
        #067dc2;

    border-color:
        #067dc2;

    color: #fff;
}


/* =========================================================
   HIDDEN
   ========================================================= */

.drak-gallery-item.drak-is-hidden,
.drak-gallery-item.drak-pagination-hidden {

    display: none !important;
}


/* =========================================================
   PAGINATION
   ========================================================= */

.drak-gallery-pagination {

    display: flex;

    flex-wrap: wrap;

    align-items: center;

    justify-content: center;

    gap: 7px;

    margin-top: 25px;
}


.drak-pagination-button {

    min-width: 38px;

    height: 38px;

    padding:
        0 10px;

    border:
        1px solid #ddd;

    background: #fff;

    color: #333;

    font-size: 12px;

    line-height: 1;

    cursor: pointer;
}


.drak-pagination-button.is-active {

    background:
        #067dc2;

    border-color:
        #067dc2;

    color: #fff;
}


/* =========================================================
   INFINITE SCROLL
   ========================================================= */

.drak-gallery-infinite-sentinel {

    width: 100%;

    height: 1px;

    margin-top: 10px;
}


/* =========================================================
   ELEMENTOR EDITOR PROTECTION
   ========================================================= */

.elementor-editor-active .drak-gallery-lightbox:not(.is-open) {

    display: none !important;

    position: fixed !important;

    width: 0 !important;
    height: 0 !important;

    min-width: 0 !important;
    min-height: 0 !important;

    max-width: 0 !important;
    max-height: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow: hidden !important;

    visibility: hidden !important;

    opacity: 0 !important;

    pointer-events: none !important;
}


.elementor-editor-active .drak-gallery-wrap {

    width: 100% !important;

    max-width: 100% !important;

    overflow-x: hidden;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767px) {

    .drak-gallery-layout-grid .drak-gallery-container {

        grid-template-columns:
            repeat(var(--drak-columns-mobile),
                minmax(0, 1fr));

        gap:
            var(--drak-gap-mobile);
    }


    .drak-gallery-layout-masonry .drak-gallery-container {

        column-count:
            var(--drak-masonry-columns-mobile);

        column-gap:
            var(--drak-gap-mobile);
    }


    .drak-gallery-layout-masonry .drak-gallery-item {

        margin-bottom:
            var(--drak-gap-mobile);
    }


    .drak-gallery-layout-justified .drak-gallery-container {

        gap:
            var(--drak-gap-mobile);
    }


    .drak-gallery-layout-carousel .drak-gallery-container {

        gap:
            var(--drak-gap-mobile);
    }


    .drak-gallery-layout-carousel .drak-gallery-item {

        flex-basis:
            calc((100% - (var(--drak-slides-mobile) - 1) * var(--drak-gap-mobile)) / var(--drak-slides-mobile));
    }


    .drak-gallery-layout-bento .drak-gallery-container {

        grid-template-columns:
            repeat(2,
                minmax(0, 1fr));

        gap:
            var(--drak-gap-mobile);
    }


    .drak-gallery-lightbox.is-open .drak-lightbox-content {

        top: 62px;

        right: 42px;

        bottom: 96px;

        left: 42px;
    }


    .drak-lightbox-counter {

        top: 18px;

        left: 15px;

        font-size: 18px;

        font-family:
            "Montserrat",
            sans-serif !important;
    }


    .drak-lightbox-toolbar {

        top: 7px;

        right: 3px;

        gap: 0;

        height: 44px;
    }


    .drak-lightbox-tool {

        width: 38px;

        height: 38px;

        padding: 7px !important;
    }


    .drak-lightbox-tool svg {

        width: 22px;

        height: 22px;
    }


    .drak-lightbox-rotate-left svg,
    .drak-lightbox-rotate-right svg {

        width: 23px;

        height: 23px;
    }


    .drak-lightbox-close svg {

        width: 24px;

        height: 24px;
    }


    .drak-lightbox-prev,
    .drak-lightbox-next {

        width: 40px;

        height: 60px;

        padding: 7px !important;
    }


    .drak-lightbox-prev {
        left: 0;
    }


    .drak-lightbox-next {
        right: 0;
    }


    .drak-lightbox-prev svg,
    .drak-lightbox-next svg {

        width: 29px;

        height: 29px;
    }


    .drak-lightbox-thumbnails {

        height: 87px;

        padding:
            8px 9px;

        gap: 6px;
    }


    .drak-lightbox-thumbnail {

        flex:
            0 0 92px;

        width: 92px;

        height: 68px;
    }


    .drak-lightbox-message {

        bottom: 100px;

        font-size: 12px;
    }
}


/* =========================================================
   TABLET
   ========================================================= */

@media (min-width: 768px) and (max-width: 1024px) {

    .drak-gallery-layout-grid .drak-gallery-container {

        grid-template-columns:
            repeat(var(--drak-columns-tablet),
                minmax(0, 1fr));

        gap:
            var(--drak-gap-tablet);
    }


    .drak-gallery-layout-masonry .drak-gallery-container {

        column-count:
            var(--drak-masonry-columns-tablet);

        column-gap:
            var(--drak-gap-tablet);
    }


    .drak-gallery-layout-masonry .drak-gallery-item {

        margin-bottom:
            var(--drak-gap-tablet);
    }


    .drak-gallery-layout-justified .drak-gallery-container {

        gap:
            var(--drak-gap-tablet);
    }


    .drak-gallery-layout-carousel .drak-gallery-container {

        gap:
            var(--drak-gap-tablet);
    }


    .drak-gallery-layout-carousel .drak-gallery-item {

        flex-basis:
            calc((100% - (var(--drak-slides-tablet) - 1) * var(--drak-gap-tablet)) / var(--drak-slides-tablet));
    }


    .drak-gallery-layout-bento .drak-gallery-container {

        gap:
            var(--drak-gap-tablet);
    }


    .drak-gallery-lightbox.is-open .drak-lightbox-content {

        top: 67px;

        right: 65px;

        bottom: 115px;

        left: 65px;
    }


    .drak-lightbox-thumbnail {

        flex:
            0 0 110px;

        width: 110px;

        height: 75px;
    }
}