/*------------------------------------------
    #MARK: BUTTONS
------------------------------------------*/
/* #region */

/* #endregion */

/*------------------------------------------
    #MARK: BUTTON LOOP
------------------------------------------*/
/* #region */

.btn-loop {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
}

.btn-loop .separator:last-child {
    display: none;
}

/* #endregion */

/*------------------------------------------
    #MARK: GALLERY
------------------------------------------*/
/* #region */

.ogm.gallery-0 .mgg {
    grid-column: span 2;
    position: relative;
}

.ogm.gallery-0 .mgg-0 {
    width: calc(100% - 40px);
    height: calc(100% - 40px);    
    box-shadow: 0 0 10px rgba(0,0,0,0.07);
}

.ogm.gallery-0 .mgg-1 {
    position: absolute;
    bottom: 0;
    right: 0;
    height: calc(100% - 40px);
    width: calc(100% - 40px);
    box-shadow: 0 0 10px rgba(0,0,0,0.07);
}

.ogm.gallery-1 {
    grid-template-columns: repeat(2, 1fr);
}

.ogm.gallery-1 .mgg:nth-child(1) {
    grid-row: span 2 / auto;
}

/* grid gallery 02 */
.ogm.gallery-2 {
    grid-template-columns: repeat(2, 1fr);
}

.ogm.gallery-2 .mgg:nth-child(2) {
    grid-row: span 2;
}

/* grid gallery 03 */
.ogm.gallery-3 {
    grid-template-columns: repeat(2, 1fr);
}

.ogm.gallery-3 .mgg {

}

.ogm.gallery-4 {
    grid-template-columns: repeat(2, 1fr);
}
.ogm.gallery-4 .mgg:nth-child(odd) {
    transform: translateY(20px);
}
.ogm.gallery-4 .mgg:nth-child(even) {
    transform: translateY(-20px);
}

/* grid gallery 05 */

.ogm.gallery-5 {
    grid-template-columns: repeat(4, 1fr);
}

.ogm.gallery-5 .mgg:nth-child(1) {
    grid-row: span 2 / auto;
    grid-column: span 2 / auto;
}

.ogm.gallery-5 .mgg:nth-child(4),
.ogm.gallery-5 .mgg:nth-child(6) {
    grid-column: span 2 / auto;
}

.mgg img {
    height: 100%;
    object-fit: cover;
}

/* #endregion */

/*------------------------------------------
    #MARK: GLYPH
------------------------------------------*/
/* #region */

.div-glyph { 
    height: 30px; 
    width: 100%;
    position: relative;
    display: inline-block;
}

.div-glyph img {
    object-fit: contain;
    height: 100%;
    width: 100%;
}

/* #endregion */