gallery.css

*{
	margin:0;
	padding:0;
}
body{
	margin:0;
	padding:0;
	justify-content:cente;
	align-items:cente;
	display:block;
}
.imgsec{
	width:100vw;
	height:100vh;
	margin:0;
	padding:0;
	justify-content:center;
	align-items:center;
	box-sizing:border-box;
	background:#def;
}
.img{
	position:relative ;
	width:100vw;
	height:50vh;
	justify-content:center;
	align-items:center;
}
.img:before{
	content:"";
	position:absolute;
	width:100%;
	height:50%;
	background:#714;
}
 .imgctn{
 position:absolute ;
 top:50%;
 left:50%;
 width:85%;
 height:85%;
 transform:translate(-50%,-50%);
 display:block;
 border-radius:5px;
 box-shadow:0px 0px 10px rgba(0,0,0,.2);
 overflow:hidden;
 background:#8c619d;
 object-fit:cover;
 transition:.5s ease-out;
 animation:bgpos 10s infinite ease-out;
 }
@keyframes bgpos{
50%{background-position:left top;}
0%,100%{background-position:center;}
}
.slides{
	padding:0;
	box-sizing:border-box;
	position:relative;
	width:100vw;
	height:50vh;
	justify-content:center;
	align-items:center;
}

@media screen and (orientation: landscape ), (min-width : 768px){
	.seco{
	display:flex;
	}
	.imgo{
	width:50%;
	height:100%;
	}
	.img:before
	{
	width:50%;
	height:100%;
	}
	.slideso{
	width:50%;
    height:100%;
	}
}