.section-top-genres {

	@media @bp_768 {
		margin: 0;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	&.fullscreen {

		@media @bp_768 {
			height: auto;
		}
	}

	.page {
		width: 100%;
	}

	header {
		.box-sizing();

		@media @bp_1024 {
			width: 40%;
			padding-right: 90px;
			float: left;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
		}

		@media @bp_1300 {
			width: 350px;
		}
	}

	.section-main {
		.box-sizing();
		padding-top: 40px;

		@media @bp_1024 {
			padding-top: 0;
			width: 550px;
			float: right;
		}

		@media @bp_1400 {
			width: 830px;
		}
	}

	.swiper-container {

		@media @bp_768{
			margin: 0;
			padding: 0;
		}
	}

	.swiper-slide {
		.box-sizing();
		padding: 0;
		position: relative;
		height: 250px;
		width: 250px;

		@media @bp_1024 {
			width: auto;
		}

		.card {
			position: absolute;
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
		}
	}

	h2 {
		.font-size(26);
		line-height: 30px;
		font-weight: 500;

		@media @bp_768 {
			.font-size(36);
			line-height: 43px;
		}

		@media @bp_1024 {
			.font-size(42);
			line-height: 49px;
		}
	}

	p {
		.font-size(16);
		line-height: 20px;
		font-weight: 500;

		@media @bp_768 {
			.font-size(24);
			line-height: 30px;
		}
	}
}