/* 
 * 👨‍💻 **Author:** ***Towhidul Islam***
 * 🔗 **website:** [ShoifyKingBD](https://shopifykingbd.com)
 * 🪪 **License:** 1 ☕️ = Free forever ($5)
 * ☕️ [Buy me a Coffee:](https://bmc.link/webtowhid)
 * ✅ Your logo at **sponsors** 🎉
 * 🙏 Thanks for your support! 
 */

html,body {
    margin: 0;
    padding: 0;
}
.skbrg-section{
    padding-top: 0px;
}

.skbrg-container {
    width: 100%;
    margin: 0 auto;
    display: block
}

ul.skbrg-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 0;
}

/* items images */
.skbrg-image {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.skbrg-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    mix-blend-mode: normal;
    display: flex;
}

/* random images */
@keyframes zoompan {
    50% {
      transform: scale3d(1.1, 1.1, 1.1);
      animation-timing-function: ease-in; }
  
    100% {
      transform: scale3d(1, 1, 1);
      animation-timing-function: ease-in; } 
}

.skbrg-gallery img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    visibility: hidden;
    opacity: 0;
    z-index: 1;
    transition: all 0.3s ease-in-out;
    mix-blend-mode: normal;
}

.skbrg-gallery img.active {
    opacity: 1;
    visibility: visible;
    animation: zoompan 30s infinite;
}


/* items Contents */
.skbrg-content {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 3;
    width: 100%;
    display: flex;
    height: 100%;
    justify-content: center;
    background-color: rgb(86 25 232 / 37%);
    align-items: center;
}
.skbrg-content h3 {
    margin-top: 0;
    margin-bottom: 15px;
}

.skbrg-content h2 {
    margin-top: 0;
    margin-bottom: 30px;
}

.skbrg-content-inner {
    padding: 45px;
}

.skbrg-content p {
    margin-top: 0;
    margin-bottom: 10px;
}


/* Gallery Items */
ul.skbrg-list li {
    position: relative;
    overflow: hidden;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}


/* =============== Desktop Large ================= */
@media (min-width: 2100px) {
    ul.skbrg-list {
        grid-template-columns: repeat(5, 1fr);
        grid-template-rows: repeat(6, 1fr);
    }
    ul.skbrg-list li:nth-child(1) {
        height: 100vh;
        grid-row: 1 / span 6;
    }
    ul.skbrg-list li:nth-child(2) {
        grid-row: 1 / span 3;
        height: 50vh;
    }
    ul.skbrg-list li:nth-child(3) {
        grid-row: 4 / span 3;
        hiehgt: 50vh;
    }
    ul.skbrg-list li:nth-child(4) {
        grid-row: 1 / span 6;
        height: 100vh;
    }
    ul.skbrg-list li:nth-child(5) {
        grid-row: 1 / span 2;
    }
    ul.skbrg-list li:nth-child(6) {
        grid-row: 3 / span 4;
    }
    ul.skbrg-list li:nth-child(7) {
        grid-row: 1 / span 4;
    }
    ul.skbrg-list li:nth-child(8) {
        grid-row: 5 / span 2;
    }
}
/* =============== Desktop ================= */
@media (min-width: 1025px) and (max-width: 2099px) {
    ul.skbrg-list {
        grid-template-columns: repeat(6, 1fr);
        grid-template-rows: repeat(4, 1fr);
    }
    ul.skbrg-list li:nth-child(1) {
        grid-row: 1 / span 1;
        grid-column: 1 /span 3;
    }
    ul.skbrg-list li:nth-child(2) {
        grid-row: 2 / span 1;
        grid-column: 1 / span 3;
    }
    ul.skbrg-list li:nth-child(3) {
        grid-row: 1 / span 2;
        grid-column: 4 / span 3;
    }
    ul.skbrg-list li:nth-child(4) {
        grid-row: 3 / span 2;
        grid-column: 1 / span 3;
    }
    ul.skbrg-list li:nth-child(5) {
        grid-row: 3 / span 1;
        grid-column: 4 / span 2;
    }
    ul.skbrg-list li:nth-child(6) {
        grid-row: 3 / span 1;
        grid-column: 6 / span 1;
    }
    ul.skbrg-list li:nth-child(7) {
        grid-row: 4 / span 1;
        grid-column: 4 / span 1;
    }
    ul.skbrg-list li:nth-child(8) {
        grid-row: 4 / span 1;
        grid-column: 5 / span 2;
    }

    /* Items height */
    ul.skbrg-list li:nth-child(1),
    ul.skbrg-list li:nth-child(2),
    ul.skbrg-list li:nth-child(5),
    ul.skbrg-list li:nth-child(6),
    ul.skbrg-list li:nth-child(7),
    ul.skbrg-list li:nth-child(8) {
        height: 50vh;
    }
    ul.skbrg-list li:nth-child(3),
    ul.skbrg-list li:nth-child(4) {
        height: calc(50vh * 2);
    }
} 
/* 1025px */




/* ============ Tablets  ============ */
@media (min-width: 768px) and (max-width: 1024px) {
    ul.skbrg-list {
        grid-template-columns: repeat(2, 1fr);
    }
    /* Items height */
    ul.skbrg-list li:nth-child(1),
    ul.skbrg-list li:nth-child(2),
    ul.skbrg-list li:nth-child(3),
    ul.skbrg-list li:nth-child(6) {
        height: 50vh;
    }
    ul.skbrg-list li:nth-child(4),
    ul.skbrg-list li:nth-child(5),
    ul.skbrg-list li:nth-child(7),
    ul.skbrg-list li:nth-child(8) {
        height: 85vh;
    }
    ul.skbrg-list li:nth-child(1) {
        grid-column: 1 / span 1;
        grid-row: 1 / span 2;
        height: 100vh;
    }
    ul.skbrg-list li:nth-child(2) {
        grid-column: 2 / span 1;
    }
    ul.skbrg-list li:nth-child(3) {
        grid-column: 2 / span 1;
    }
    ul.skbrg-list li:nth-child(6) {
        grid-column: 1 / span 2;
        height: 95vh;
    }
}
/* 768px tablets */


/* ========== Mobiles Portrait ============ */
@media (max-width: 767px) and (orientation: portrait) {
    ul.skbrg-list {
        grid-template-columns: repeat(2, 1fr);
    }
    ul.skbrg-list li {
        height: 50vh;
    }
    ul.skbrg-list li:nth-child(1),
    ul.skbrg-list li:nth-child(4),
    ul.skbrg-list li:nth-child(7),
    ul.skbrg-list li:nth-child(8){
        grid-column: 1 / span 2;
    }
    ul.skbrg-list li:nth-child(2),
    ul.skbrg-list li:nth-child(5) {
        grid-column: 1 / span 1;
    }
    ul.skbrg-list li:nth-child(3),
    ul.skbrg-list li:nth-child(6) {
        grid-column: 2 / span 1;
    }
    
    ul.skbrg-list li:nth-child(1) { grid-row: 1 / span 1; }
    ul.skbrg-list li:nth-child(2) { grid-row: 2 / span 1; }
    ul.skbrg-list li:nth-child(3) { grid-row: 2 / span 1; }
    ul.skbrg-list li:nth-child(4) { grid-row: 3 / span 1; }
    ul.skbrg-list li:nth-child(5) { grid-row: 4 / span 1; }
    ul.skbrg-list li:nth-child(6) { grid-row: 4 / span 1; }
    ul.skbrg-list li:nth-child(7) { grid-row: 5 / span 1; }
    ul.skbrg-list li:nth-child(8) { grid-row: 6 / span 1; }
}
/* 767px portrait */


/* ============== Mobiles Landscape ================ */
@media (max-width: 767px) and (orientation: landscape) {
    ul.skbrg-list {
        grid-template-columns: repeat(2, 1fr);
    }
    
    ul.skbrg-list li:nth-child(1) { 
        grid-column: 1 / span 1;
        grid-row: 1 / span 2; 
        height: 100vh;

    }
    ul.skbrg-list li:nth-child(2) {
        grid-column: 2 / span 1;
        height: 50vh;
    }
    ul.skbrg-list li:nth-child(3) {
        grid-column: 2 / span 1;
        height: 50vh;
    }
    ul.skbrg-list li:nth-child(4) {
        grid-column: 1 / span 1;
        height: 50vh;
    }
    ul.skbrg-list li:nth-child(5) {
        grid-column: 1 / span 1;
        height: 50vh;
    }
    ul.skbrg-list li:nth-child(6) {
        grid-column: 2 / span 1;
        grid-row: 3 / span 2;
        height: 100vh;
    }
    ul.skbrg-list li:nth-child(7) {
        height: 100vh;
    }

}
/* 767px landscape */