/*** INDEX ***\

= MAIN PAGE BANNER

= MYTHS

\*** END INDEX ***/

/*
//======================================================================
// MAIN PAGE BANNER
//======================================================================
*/

.main-page-banner {
/* 	height: 550px; */
}

/*
//======================================================================
// MAIN PAGE BANNER - END
//======================================================================
*/

/*
//======================================================================
// MYTHS
//======================================================================
*/

.myths {
	margin: 0 auto 102px;
}

.myths ul.container {
	/*display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-gap: 25px;*/
	width: 1055px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-gap: 40px;
}

.myths > ul li {
	height: 255px;
}

.myths > ul li a {
	display: grid;
	width: 100%;
	height: 100%;
}

.myths > ul li a .overlay {
	background-color: #000;
	opacity: 0.25;
	height: 100%;
}

.myths > ul li a > * {
	grid-area: 1/-1;
	z-index: 5;
}

.myths > ul li a .play-button {
	align-self: center;
	justify-self: center;
}

.myths > ul li a .title-wrapper {
	display: flex;
	color: #fff;
	color: var(--white, #fff);
	flex-direction: column;
	height: 100%;
	justify-content: flex-end;
}

.myths > ul li a .title {
	border-right: 9px solid #c0ea6a;
	border-right: 9px solid var(--green, #c0ea6a);
	padding-right: 15px;
	margin: 0 15px 18px 0;
	padding-top: 0;
	/* 	font-size: 2.188em; */
	font-size: 1.25rem;
	/* 	font-weight: bold; */
}

.myths > ul li a .subtitle {
	border-right: 9px solid #c0ea6a;
	border-right: 9px solid var(--green, #c0ea6a);
	padding-right: 15px;
	margin-right: 15px;
	margin-bottom: 15px;
	font-size: 1.063em;
}

.myths .pagination {
	text-align: center;
	padding-top: 115px;
}

.myths .pagination .page-numbers {
	padding: 2px 6px;
	background-color: #acacac;
	color: #fff;
	color: var(--white, #fff);
	border-radius: 3px;
}

.myths .pagination .page-numbers.current {
	background-color: var(--green, #c0ea6a);
	background-color: #c0ea6a;
}

.myths .pagination .page-numbers.next,
.myths .pagination .page-numbers.prev {
	background-color: unset;
	color: #000;
	color: var(--black, #000);
	padding: unset;
}

.myths .pagination .page-numbers .prev-button {
	height: 10px;
	width: 10px;
	border-right: 2px solid;
	border-bottom: 2px solid;
	display: inline-block;
	transform: rotate(-45deg);
}

.myths .pagination .page-numbers .next-button {
	height: 10px;
	width: 10px;
	border-left: 2px solid;
	border-bottom: 2px solid;
	display: inline-block;
	transform: rotate(45deg);
}

/*
//======================================================================
// MYTHS - END
//======================================================================
*/

@media (max-width: 1100px) {
	.container-1074 {
		width: 100%;
		padding: 0 15px;
	}

	.myths ul.container {
		width: 100%;
	}
}

@media (max-width: 1023px) {
	.myths ul.container {
		grid-template-columns: 1fr 1fr;
		grid-gap: 15px;
	}
}

@media (max-width: 900px) {
/*	.main-page-banner {
		height: 350px;
	}*/
}

@media (max-width: 600px) {
	.myths ul.container {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 550px) {
/*	.main-page-banner {
		height: 250px;
	}
*/
	.main-page-banner .headline h1 {
		font-size: 4rem;
		text-align: center;
	}
}