*{
        padding: 0;
	margin: 0;
}

body{
	  background: black;
}

article{
	  scroll-snap-type: y mandatory;
	  overflow-y: scroll; 
	  height: 100vh;
	  display: grid;
	  grid-template-columns: 1fr;
	  grid-auto-rows: 100vh;
}

article img{
	scroll-snap-align: center;
	height: 100%;
	width: 100%;
	cursor: pointer;
}


input[type=checkbox]{
	display: none;
}

input#tgl:checked~article{
	grid-template-columns: repeat(auto-fit, minmax(12em, 1fr));
	grid-auto-rows: 12em;
}

input#tgl:checked+label#tglLabel+article img{
	height: 100%;
}

p{
	display: flex;
	align-items: center;
	justify-content: center;
	color: white;
}

label#fsLabel,
label#tglLabel{
	cursor: pointer;
	position: fixed;
	top: 0;
	padding: 2em;
	-webkit-tap-highlight-color: transparent;
}

label#fsLabel{
	right: 0;
}
label#fsLabel.hide{
	display: none;
}

label#fsLabel:fullscreen{
	display: none;
}

label#tglLabel{
	left: 0;
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: 1fr 1fr;
	grid-gap: 4px;
}

input#tgl:checked+label#tglLabel{
	opacity: 0.2;
}

label#fsLabel > span{
	display: inline-block;
	border: 1px solid black;
	width: 12px;
	height: 12px;

}

label#tglLabel > span{
	display: inline-block;
	background: black;
	width: 3px;
	height: 3px;
}

article::-webkit-scrollbar {
	display: none;
}

article a{
	padding: 1em;
	scroll-snap-align: center;
	display: flex;
	align-items: center;
	color: #AAA;
}

article {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}