.md-cnt {
	--sys-md-itm-h: 380;
	--sys-md-itm-h-mbl: 200;
	
	--sys-md-itm-h-clc: calc((var(--sys-md-itm-h-mbl) * 1px) + (var(--sys-md-itm-h) - var(--sys-md-itm-h-mbl)) * ((100vw - 320px) / (1920 - 320)));
	
	&:not(:has(ul)) {
	    display: none;
	}
	
	
	.tb-bx {
		
        .thumb {
			width: 3.78rem;
			height: 3.78rem;
			padding: .22rem;
			border-radius: 1.11rem;
			transition: border-color var(--g-trn-sp) var(--g-trn-tf) 0s;
            border: solid 2px transparent;
			
            svg {
                font-size: 1.8rem;
            }
			
			&.active {
				border-color: var(--buttons);
			}
			
			&:not(.active) {
				border-color: transparent;
			}
			
			@media (hover: hover) and (pointer: fine) {
				&:is(:hover, :focus-visible) {
					border-color: var(--buttons);
				}		
			}
		}
	}
	
	.bg-bx {
		.icn-bx {
			width: 3.33rem;
			height: 3.33rem;
			border-radius: .889rem;
			padding: 0.7rem;
			
			svg {
				font-size: 1.8rem;
			}
		}
	}
	
	[data-role="arrows"] {
		margin-top: calc(var(--sp-vm-clc) * var(--sp-t-mpt-30));
	}
	
	
	@media screen and (min-width:700px) {
		.grd {
			--itm-val: 100;
		}
		
		.el-panel > div:has(.s-active) {
			padding-inline: 3.33rem;
		}
		
		.el-panel {
			li {
				position: relative;
				
				video,
				picture img,
				.bg-bx {
					height: var(--sys-md-itm-h-clc);
				}
				
				picture {
				
				    img {
				        object-fit: contain;
				        aspect-ratio: initial !important;
				    }
				}
				
			}
		}
		
		[data-role="arrows"] {
			position: absolute;
			top: 50%;
			left: 50%;
			width: 100%;
			transform: translate(-50%, -50%);
			margin-top: 0;
		}
	}
	
}