*,
*::before,
*::after {
	box-sizing:border-box;
}

*:not([popover]) {
	margin:0;
	font-family:system-ui;
	font-size:20px;
	font-weight: 500;
}

:root {
	--white-color:rgb(255 255 255 / 1);
	--black-color:rgb(0 0 0 / 1);
}

html,
body {
	height:100%;
	margin:0;
}

.popover-ul {
	padding:0;
	display:grid;
	grid-template-columns: 1fr 1fr 1fr 1fr;
	height:inherit;
	
	& li {
		display:flex;
		place-items:center;
		place-content:center;
		padding:5px;
		border:1px rgba(0, 0, 0, .05) solid;
		text-align:center;
		position:relative;
		
		& .show-btn {
			width:100%;
			height:100%;
			cursor: pointer;
			padding: 0;
			border: 0;
			outline:0;
			background: transparent;
			transition:all .5s;
			
			&:hover {
				background:var(--black-color);
				color:var(--white-color);
			}
			
			& ~ .img-on-hover {
				position: absolute;
				left:5px;
				right:5px;
				top: calc(100vh / 7 + 5px);
				z-index:1;
				margin:auto;
				width: 0;
				height:0;
				object-fit:cover;
				opacity: 0;
				visibility: hidden;
				transition: all .5s;
			}
			
			&:hover ~ img {
				width: calc(100vw / 4 - 12px);
				height:calc(100vh / 7 - 12px);
				opacity:1;
				visibility:visible;
			}
		}
	}
	
	& li:nth-child(n + 25) .show-btn ~ .img-on-hover {
				top: auto;
				bottom:	calc(100vh / 7 + 5px);
	}
	
	@media (width <= 932px) {
		grid-template-columns: 1fr;
		
		& li:nth-child(n) .show-btn ~ .img-on-hover {
			display:none;
		}
	}
}

/* [popover] ANIMATION */
[popover] {
	padding: 0;
	border:0;
	background:transparent;
	position:relative;
	transform: scaleX(0) scaleY(0);
	transition: all 0.7s allow-discrete;
	
	& .hide-btn {
        position: absolute;
        top: 0;
        right: 5px;
        width: 30px;
        padding: 0;
        padding-bottom: 5px;
        border: 1px var(--white-color) solid;
        background: transparent;
        color: #fff;
        cursor: pointer;
		transition:all .5s;
		
		&:hover {
			background: var(--white-color);
			color: var(--black-color);
		}
	}
	
	& img {
		width:50vw;
		object-fit:contain;
		aspect-ratio:2 / 1;
	}
	
	&:popover-open {
		transform: scaleX(1) scaleY(1);
	}
	
	@media (width <= 932px) {
		width: 90vw;
		
		& img {
			width: 80vw;
		}
	}
}
@starting-style {
	[popover]:popover-open {
		opacity: 0;
		transform: scaleX(0) scaleY(0);
	}
}

/* ::backdrop ANIMATION */
[popover]::backdrop {
    background: rgb(0 0 0 / 0%);
    transition: all 0.7s allow-discrete;
}
[popover]:popover-open::backdrop {
	background: rgb(0 0 0 / 75%);
}
@starting-style {
	[popover]:popover-open::backdrop {
		background: rgb(0 0 0 / 0%);
	}
}