#hero { max-width: 2600px; height: clamp(100px, 39vw, 500px); position: relative; }
#hero > img {
	object-fit: cover;
	padding: 0;
	filter: unset;
	z-index: 1;
	box-shadow: 0 0 10px 3px black;
	min-width: 62%;
	max-width: 1648px;
	position: relative;
}
#hero > video {
	width: unset;
    filter: unset;
    object-fit: cover;
    object-position: center;
	min-width: 20%;
	max-width: 48%;
	position: relative;
}

#castinginfo > div { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin: 10px 0; }
#castinginfo li { margin-bottom: 5px; font-size: clamp(0.85rem, 1.25vw, 1rem); }
a.linebtn {
	border: solid 2px var(--mainblue);
	padding: 7px;
	transition: background-color .3s;
	border-radius: 5px;
	color: var(--mainblue);
	font-size: inherit;
	font-weight: 500;
	display: inline-block;
	text-align: center;
	flex-grow: 1;
	text-decoration: none;
}
.linebtn:hover, .linebtn:focus-visible { background-color: #055c8e33; }
.linebtn > hr { margin: 2px; border-bottom: none; }
.linebtn > span { font-size: 14.5px; }

@media (max-width: 800px) {
    #swappables > div > img {
        object-position: 0 75%;
    }
}