/**************************/
/* BELOW 944px (Tablets) */
/**************************/

/*@media (max-width: 59em) {*/
@media (max-width: 44em) {
    .main-gallery {
        grid-template-columns: repeat(2, 1fr);
    }

}

/* BELOW 54px (Phones) */
/**************************/

@media (max-width: 34em) {
    .main-gallery {
        grid-template-columns: repeat(1, 1fr);
    }
}

/* rem and em do NOT depend on html font-size in media queries! Instead, 1rem = 1em = 16px */

/**************************/
/* BELOW 1344px (Smaller desktops) */
/**************************/

/*@media (max-width: 84em) {*/



/**************************/
/* BELOW 1200px (Landscape Tablets) */
/**************************/

/*@media (max-width: 75em) {*/
/**************************/

/* BELOW 704px (Smaller tablets) */
/**************************/

@media (max-width: 50em) {
    /*MOBILE NAVIGATION*/
    .btn-mobile-nav {
        display: block;
        z-index: 9999;
    }

    .main-nav{

        background-color:rgba(51, 51, 51, 0.90);
        position:absolute;
        top:0;
        left: 0;
        width: 100%;
        height: 100vh;

        transform: translateX(100%);
        display:flex;
        align-items: center;
        justify-content: center;
        transition: all 0.5s ease-in;

        opacity: 0  ;
        pointer-events: none;
        visibility: hidden;
    }

    .main-nav-list{
        flex-direction: column;
        align-items: center;
        gap: 4.8rem;
        backdrop-filter: none;
    }

    .nav-open .main-nav{
        opacity: 1;
        pointer-events: auto;
        visibility: visible;
        transform: translateX(0%);
    }

    .nav-open .icon-mobile-nav[name="close-outline"]{
        display: block;
    }

    .nav-open .icon-mobile-nav[name="menu-outline"]{
        display: none;
    }
	
	/*CHANGE CHILD NAV FROM DROP DOWN TO INLINE OUTLINE STYLE*/
	
	.child_nav{
		/*display: none;*/
		list-style-type: none;
		background-color:inherit;
		color: white;
		position: inherit;
		top: 5px;
		left: 10px;
		font-size: 2rem;
		
		/*width:50px;*/
		
	}
	.child_link:link, .child_link:visited{
		text-decoration: none;
		color:inherit;
	}
	
	.child_link:active, .child_link:hover{
		color: #333;
	}

}
/* BELOW 544px (Phones) */
/**************************/

/*@media (max-width: 34em) {*/