#reel {
	position: relative;
	display: flex;
	flex-direction: row;
}
@media (min-width: 900px) {
	#reel {}
}
@media (max-width: 899.99px) {
	#reel { flex-wrap: wrap; }
}

/*-------------------------------------------------------------------------------------------------------*/

#reel > .hook {
	position: relative;
	display: block;
	
	background-color: #FF640B;
	
	color: #FFF;
	
	transition: background-color .4s ease-out;
}
#reel > .hook:hover { background-color: #000; }
#reel > .hook:before {
	content: '';
	display: block;
	padding-top: 100%;
}
#reel > .hook > .content {
	position: absolute; top: 25px; left: 25px;
	display: flex; width: calc(100% - 50px); height: calc(100% - 50px);
	flex-direction: column;
	justify-content: center;
	align-items: center;
	row-gap: 20px;
}
#reel > .hook > .content > .logo {
	display: block; width: 40%;
	
	background-color: #FFF;
	
	-webkit-mask-image: url("../../images/logo.png");
	mask-image: url("../../images/logo.png");
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
}
#reel > .hook > .content > .logo:before {
	content: '';
	display: block;
	padding-top: 100%;
}
#reel > .hook > .content > .label {
	display: block;
	
	text-align: center;
	text-transform: uppercase;
	font-family: 'Stretch Pro';
}
@media (min-width: 900px) {
	#reel > .hook { flex: 0 0 300px; }
	#reel > .hook > .content > .label { font-size: 24px; }
}
@media (max-width: 899.99px) {
	#reel > .hook { flex: 0 0 50vw; }
	#reel > .hook > .content > .label { font-size: 20px; }
}

/*-------------------------------------------------------------------------------------------------------*/

#reel > .swiper {}
#reel > .swiper > .swiper-wrapper {}
#reel > .swiper > .swiper-wrapper > .swiper-slide {
	position: relative;
}
#reel > .swiper > .swiper-wrapper > .swiper-slide:before {
	content: '';
	display: block;
	padding-top: 100%;
}
#reel > .swiper > .swiper-wrapper > .swiper-slide > img{
	position: absolute; top: 0; left: 0;
	height: 100%; width: 100%;

	object-fit: cover;
	object-position: center;
}
@media (min-width: 900px) {
	#reel > .swiper { flex: 1; }
	#reel > .swiper > .swiper-wrapper {}
	#reel > .swiper > .swiper-wrapper > .swiper-slide { flex: 0 0 300px; }
}
@media (max-width: 899.99px) {
	#reel > .swiper, #reel > .swiper > .swiper-wrapper { display: contents; }
	#reel > .swiper > .swiper-wrapper > .swiper-slide { flex: 0 0 50vw; }
	#reel > .swiper > .swiper-wrapper > .swiper-slide:nth-child(3) ~ .swiper-slide { display: none; }
	#reel > .swiper > .swiper-wrapper > .swiper-slide > .swiper-lazy-preloader { display: none; }
}