/* Shots Gallery Css */

// .grid-item {
//     &:nth-child(1) {
//         .single-shots {
//             height: 190px;
//         }
//     }
//     &:nth-child(2) {
//         .single-shots {
//             height: 190px;
//         }
//     }
//     &:nth-child(3) {
//         .single-shots {
//             height: 404px;
//             @include responsive(allPhone) {
//                 height: 384px;
//             }
//         }
//     }
//     &:nth-child(4) {
//         .single-shots {
//             height: 230px;
//             @include responsive(allPhone) {
//                 height: 170px;
//             }
//         }
//     }
//     &:nth-child(5) {
//         .single-shots {
//             height: 424px;
//             @include responsive(allPhone) {
//                 height: 344px;
//             }
//         }
//     }
//     &:nth-child(6) {
//         .single-shots {
//             height: 424px;
//         }
//     }
//     &:nth-child(7) {
//         .single-shots {
//             height: 210px;
//             @include responsive(allPhone) {
//                 height: 150px;
//             }
//         }
//     }
//     &:nth-child(8) {
//         .single-shots {
//             height: 384px;
//             @include responsive(allPhone) {
//                 height: 250px;
//             }
//         }
//     }
//     .single-shots {
//         height: 190px;
//         border-radius: 10px;
//         &.bg-image {
//             background-size: cover;
//             @include responsive(xs) {
//                 background-size: contain;
//             }
//         }
//         img {
//             border-radius: 10px;
//         }
//     }
// }
.grid-item {
    &:nth-child(1) {
        .single-shots {
            height: 190px;
            @include responsive(xl) {
                height: 160px;
            }
            @include responsive(lg) {
                height: 135px;
            }
            @include responsive(allPhone) {
                height: 210px;
            }
            @include responsive(sm) {
                height: 235px;
            }
        }
    }
    &:nth-child(2) {
        .single-shots {
            height: 190px;
            @include responsive(xl) {
                height: 163px;
            }
            @include responsive(lg) {
                height: 135px;
            }
            @include responsive(allPhone) {
                height: 100px;
            }
            @include responsive(sm) {
                height: 113px;
            }
        }
    }
    &:nth-child(3) {
        .single-shots {
            height: 404px;
            @include responsive(xl) {
                height: 345px;
            }
            @include responsive(lg) {
                height: 286px;
            }
            @include responsive(allPhone) {
                height: 210px;
            }
            @include responsive(sm) {
                height: 237px;
            }
        }
    }
    &:nth-child(4) {
        .single-shots {
            height: 230px;
            @include responsive(xl) {
                height: 195px;
            }
            @include responsive(lg) {
                height: 160px;
            }
            @include responsive(allPhone) {
                height: 250px;
            }
            @include responsive(sm) {
                height: 286px;
            }
        }
    }
    &:nth-child(5) {
        .single-shots {
            height: 424px;
            @include responsive(xl) {
                height: 360px;
            }
            @include responsive(lg) {
                height: 300px;
            }
            @include responsive(allPhone) {
                height: 220px;
            }
            @include responsive(sm) {
                height: 250px;
            }
        }
    }
    &:nth-child(6) {
        .single-shots {
            height: 424px;
            @include responsive(xl) {
                height: 355px;
            }
            @include responsive(lg) {
                height: 295px;
            }
            @include responsive(allPhone) {
                height: 465px;
            }
            @include responsive(sm) {
                height: 530px;
            }
        }
    }
    &:nth-child(7) {
        .single-shots {
            height: 210px;
            @include responsive(xl) {
                height: 180px;
            }
            @include responsive(lg) {
                height: 150px;
            }
            @include responsive(allPhone) {
                height: 110px;
            }
            @include responsive(sm) {
                height: 124px;
            }
        }
    }
    &:nth-child(8) {
        .single-shots {
            height: 384px;
            @include responsive(xl) {
                height: 325px;
            }
            @include responsive(lg) {
                height: 286px;
            }
            @include responsive(allPhone) {
                height: 420px;
            }
            @include responsive(sm) {
                height: 480px;
            }
        }
    }
    .single-shots {
        height: 190px;
        border-radius: 10px;
        &.bg-image {
            background-size: contain;
            @include responsive(xs) {
                background-size: contain;
            }
        }
        img {
            border-radius: 10px;
        }
    }
}

.single-shots {
    position: relative;
    z-index: 2;
    @include transition(.3s);
    overflow: hidden;
    &::before {
        content: '';
        position: absolute;
        top: -100%;
        left: 0;
        height: 100%;
        width: 100%;
        background-color: rgba($black, .2);
        backdrop-filter: blur(10px);
        visibility: hidden;
        opacity: 0;
        @include transition(.5s);
        z-index: 0;
    }
    &:hover {
        &::before {
            visibility: visible;
            opacity: 1;
            top: 0;
        }
        .single-shots {
            &-icon {
                visibility: visible;
                opacity: 1;
                @include transform(translate(-50%, -50%) rotateX(180deg));
            }
            &-contents {
                visibility: visible;
                opacity: 1;
                z-index: 9;
                bottom: 0;
            }
        }
    }
    &-icon {
        font-size: 24px;
        @include flexCenter;
        background-color: $white;
        height: 50px;
        width: 50px;
        border-radius: 50%;
        color: var(--main-color-one);
        position: absolute;
        top: 50%;
        left: 50%;
        @include transform(translate(-50%, -50%));
        visibility: hidden;
        opacity: 0;
        @include transition(.3s);
        z-index: 91;
        &:hover {
            background-color: var(--main-color-one);
            color: $white;
        }
    }
    &-contents {
        position: absolute;
        bottom: -50px;
        left: 0;
        right: 0;
        background-color: rgba($black, .3);
        backdrop-filter: blur(10px);
        padding: 20px 10px;
        visibility: hidden;
        opacity: 0;
        @include transition(.3s);
        max-height: 100%;
        overflow-y: auto;
        scrollbar-color: var(--main-color-one) transparent;
        -ms-overflow-style: none;
        -moz-appearance: none !important;
        scrollbar-width: thin;
        &::-webkit-scrollbar {
            width: 5px !important;
            height: 5px;
            border: none;
            border-radius: 10px;
            &-track {
                background-color: #C2D2E4;
                border-radius: 10px;
            }
            &-thumb {
                background-color: var(--main-color-one);
                border-radius: 10px;
            }
        }
        &-title {
            font-size: 20px;
            font-weight: 700;
            line-height: 28px;
            margin: -4px 0 0;
            color: $white;
            @include transition(.2s);
            &:hover {
                color: var(--main-color-one);
            }
        }
        &-para {
            font-size: 16px;
            line-height: 24px;
            color: var(--paragraph-color);
            margin-top: 12px;
            color: rgba($white, .8);
        }
    }
}