/* ======================================================
   PAGE 61 - 3 THUMBNAIL GALERIJA
   ====================================================== */

.sgm61-fixed-gallery {
    width: 100%;

    display: grid;

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

    gap: 16px;

    margin:
        26px 0
        30px;
}


.sgm61-fixed-thumb,
.sgm61-fixed-thumb:hover,
.sgm61-fixed-thumb:focus,
.sgm61-fixed-thumb:active {

    appearance: none !important;
    -webkit-appearance: none !important;

    display: block !important;

    width: 100% !important;

    aspect-ratio: 4 / 3 !important;

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

    overflow: hidden !important;

    border: 0 !important;

    border-radius: 15px !important;

    outline: 0 !important;

    background:
        #f5f0ea !important;

    background-image:
        none !important;

    box-shadow:
        0 5px 16px
        rgba(65,48,37,.08)
        !important;

    cursor: zoom-in !important;

    transition:
        transform .2s ease,
        box-shadow .2s ease
        !important;
}


.sgm61-fixed-thumb::before,
.sgm61-fixed-thumb::after {

    content: none !important;

    display: none !important;
}


.sgm61-fixed-thumb img {

    display: block !important;

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

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

    object-fit: cover !important;

    object-position: center !important;

    border: 0 !important;

    box-shadow: none !important;
}


@media (hover:hover) {

    .sgm61-fixed-thumb:hover {

        transform:
            translateY(-3px) !important;

        box-shadow:
            0 9px 22px
            rgba(65,48,37,.13)
            !important;
    }

}


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

.sgm61-fixed-lightbox {

    position: fixed;

    inset: 0;

    z-index: 999999;

    display: none;

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

    padding:
        55px
        85px;
}


.sgm61-fixed-lightbox.open {

    display: flex;
}


.sgm61-fixed-backdrop {

    position: absolute;

    inset: 0;

    background:
        rgba(17,20,23,.93);
}


.sgm61-fixed-large {

    position: relative;

    z-index: 2;

    display: block;

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

    max-width:
        100% !important;

    max-height:
        calc(100vh - 100px)
        !important;

    margin: auto !important;

    object-fit:
        contain !important;

    border-radius: 8px;

    box-shadow:
        0 18px 55px
        rgba(0,0,0,.38);
}


/* GAIŠI BĒŠAS POGAS */

.sgm61-fixed-close,
.sgm61-fixed-prev,
.sgm61-fixed-next,
.sgm61-fixed-close:hover,
.sgm61-fixed-prev:hover,
.sgm61-fixed-next:hover {

    appearance: none !important;
    -webkit-appearance: none !important;

    position: fixed;

    z-index: 4;

    border:
        1px solid
        rgba(255,255,255,.45)
        !important;

    outline: 0 !important;

    background:
        rgba(248,243,237,.96)
        !important;

    background-image:
        none !important;

    color:
        #721b26 !important;

    box-shadow:
        0 4px 18px
        rgba(0,0,0,.20)
        !important;

    cursor: pointer;
}


.sgm61-fixed-close::before,
.sgm61-fixed-close::after,
.sgm61-fixed-prev::before,
.sgm61-fixed-prev::after,
.sgm61-fixed-next::before,
.sgm61-fixed-next::after {

    content: none !important;
}


.sgm61-fixed-close {

    top: 20px;
    right: 22px;

    width: 46px;
    height: 46px;

    border-radius: 50% !important;

    font-size: 29px;
}


.sgm61-fixed-prev,
.sgm61-fixed-next {

    top: 50%;

    width: 48px;
    height: 68px;

    margin-top: -34px;

    border-radius: 12px !important;

    font-size: 34px;
}


.sgm61-fixed-prev {
    left: 20px;
}

.sgm61-fixed-next {
    right: 20px;
}


/* TABLET */

@media (max-width: 800px) {

    .sgm61-fixed-gallery {

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

        gap: 10px;
    }

}


/* PHONE */

@media (max-width: 580px) {

    .sgm61-fixed-gallery {

        grid-template-columns: 1fr;

        gap: 10px;
    }


    .sgm61-fixed-thumb {

        aspect-ratio:
            16 / 10 !important;

        border-radius:
            12px !important;
    }


    .sgm61-fixed-lightbox {

        padding:
            65px
            10px
            80px;
    }


    .sgm61-fixed-large {

        max-height:
            calc(100vh - 150px)
            !important;
    }


    .sgm61-fixed-prev,
    .sgm61-fixed-next {

        top: auto;

        bottom: 17px;

        width: 52px;
        height: 48px;

        margin: 0;
    }


    .sgm61-fixed-prev {
        left: calc(50% - 62px);
    }

    .sgm61-fixed-next {
        right: calc(50% - 62px);
    }

}