#categories {}

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

#categories > .content-wrapper {}
#categories > .content-wrapper>.title {
	text-align: center;
	text-transform: uppercase;
	font-family: 'Stretch Pro';
}
@media (min-width: 900px) {
	#categories > .content-wrapper { margin-bottom: 50px }
	#categories > .content-wrapper > .title { font-size: 40px }
}
@media (max-width: 899.99px) {
	#categories > .content-wrapper { margin-bottom: 30px }
	#categories > .content-wrapper > .title { font-size: 24px }
}

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

#categories > .swiper {}
#categories > .swiper > .swiper-wrapper {}
#categories > .swiper > .swiper-wrapper > .swiper-slide {
	position: relative;
	display: block; overflow: hidden;
	
	isolation: isolate;
}
#categories > .swiper > .swiper-wrapper > .swiper-slide:before {
	content: '';
	display: block;
	padding-top: 100%;
}
#categories > .swiper > .swiper-wrapper > .swiper-slide > .background {
	position: absolute; top: 0; left: 0;
	height: 100%; width: 100%;
}
#categories > .swiper > .swiper-wrapper > .swiper-slide > .background > img {
	height: 100%; width: 100%;
	
	object-fit: cover;
	object-position: center;
	
	filter: brightness(.7);
}
#categories > .swiper > .swiper-wrapper > .swiper-slide > .content {
	position: absolute; top: 25px; left: 25px;
	display: flex; height: calc(100% - 50px); width: calc(100% - 50px);
	flex-direction: column;
	justify-content: center;
	align-items: center;
}
#categories > .swiper > .swiper-wrapper > .swiper-slide > .content > .label {
	text-shadow: 2px 2px 5px rgba(0,0,0,.3);
	
	text-align: center;
	text-transform: uppercase;
	word-break: break-all;
	font-family: 'Stretch Pro';
	color: #FFF;
}
@media (min-width: 900px) {
	#categories > .swiper > .swiper-wrapper > .swiper-slide { border-radius: 40px; }
	#categories > .swiper > .swiper-wrapper > .swiper-slide > .content > .label { font-size: 20px; }
}
@media (max-width: 899.99px) {
	#categories > .swiper > .swiper-wrapper > .swiper-slide { border-radius: 30px; }
	#categories > .swiper > .swiper-wrapper > .swiper-slide > .content > .label { font-size: 18px; }
}