.page{
    display:flex;
    flex-direction: column;
}

.side-sec{
    order:1;
}

.main-sec{
    order:2;
}

.more-link{
    color:blue;
    margin-left:15px;
    cursor: pointer;
}

.tags{
    color:blue;
    display: flex;
    gap:3px;
    border:1px solid black;
}

.tags span{
    border:1px solid green;
}

.edit-btn {
  position: absolute;
  top: 15px;
  right: 15px;
  background: grey;
  /*background: rgba(0,0,0,0.8);*/
  padding: 5px;
  cursor: pointer;
  display: none;
  border-radius: 4px;
}

.video_container:hover .edit-btn {
  display: block;
  z-index:10;
}

/* MODAL */
.modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  background: #222;
  color: white;
  padding: 30px;
  z-index: 1001;
  transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  border-radius: 12px;
}

.modal.active { transform: translate(-50%, -50%) scale(1); }

/*
.overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.7);
  display: none;
  z-index: 1000;
}*/

.overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.7);
  display: none;
  z-index: 1000;
}

.overlay.active { display: block; }
.info .channel:hover{
    text-decoration:underline;
}
.info .title{display:block;}
.info .channel{display:block;}

@media screen and (min-width:800px){

.page{
	display: flex;
	flex-direction: row;
}

/*.page > *{
	flex-basis: 50%;
}*/

.side-sec{
    min-width:360px;
	margin-top: 30px;
	order:2;
	/*padding-left: 20px;*/
}

/*GALLERY VIEW */
	.main-sec{
	    order:1;
		height: 100vh;
		overflow-y: auto;
	} 
	.main-sec .vid-gala{
		display: flex;
		flex-wrap: wrap;
		flex-direction: row;
	}


	.video_container{
	    position: relative;
		display: flex;
		flex-basis: 25%;
		flex-direction: column;
	}
	.video_container img{
		width: 100%;
		aspect-ratio: 16 / 9;   /* reserve space like YouTube thumbnails */
        object-fit: cover;
	}

	.vid-gala{

	}

}
	/*
	  <div class="vid-gala" 	  
	   <div class=vid-container>
	   	<img
	   	<div class="vid-info">




	*/