/* =========================================================================
   HOMEPAGE — Sekce, bannery, welcome text
   Závisí na: tokens.css
   =========================================================================
   Obsah:
   - Welcome wrapper (template-12)
   - Kategoriové bannery (.extended-banner-link, .next-to-carousel-banners)
   - Bannery výhod (.benefitBanner)
   ========================================================================= */


/* =========================================================================
   WELCOME SEKCE
   ========================================================================= */

body.template-12 .homepage-texts-wrapper .welcome-wrapper {
	text-align: center;
	font-size: 1.8rem;
	line-height: 1.7;
	max-width: 900px;
	margin: 0 auto;
	font-weight: 300;
}

body.template-12 .homepage-texts-wrapper .welcome-wrapper h1,
body.template-12 .homepage-texts-wrapper .welcome-wrapper p {
	margin-left: auto;
	margin-right: auto;
	max-width: 900px;
}


/* =========================================================================
   KATEGORIOVÉ BANNERY
   ========================================================================= */

.extended-banner-link {
	bottom: 0px;
	width: 100%;
	text-align: center;
	top: unset;
	font-size: 1.4rem;
	font-weight: 300;
	height: 40px;
	align-content: center;
	color: white;
	background-color: var(--color-primary);
	border: none;
}

.extended-banner-link:hover {
	background-color: var(--color-primary-hover);
}

/* Zakázání zoom efektu na obrázcích bannerů */
.banner-wrapper a:hover img {
	transform: none;
}

@media (min-width: 480px) {
	.next-to-carousel-banners {
		flex-direction: row;
		flex-wrap: wrap;
		gap: 20px;
		margin-top: 20px;
	}
	.next-to-carousel-banners .banner-wrapper {
		flex: 1 1 calc((100% - (1 * 20px)) / 2);
		margin-top: 0;
	}
}

@media (min-width: 768px) {
	.next-to-carousel-banners .banner-wrapper {
		flex: 1 1 calc((100% - (2 * 20px)) / 3);
		margin: 0;
	}
}

@media (min-width: 1200px) {
	.next-to-carousel-banners .banner-wrapper {
		flex: 1 1 calc((100% - (5 * 20px)) / 6);
	}
	.next-to-carousel-banners {
		max-width: 1178px;
	}
}

@media (min-width: 1440px) {
	.next-to-carousel-banners {
		max-width: 1418px;
	}
}


/* =========================================================================
   BANNERY VÝHOD
   ========================================================================= */

.container.container--bannersBenefit {
	padding: 0;
}

.benefitBanner {
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.benefitBanner__item {
	background-color: #f9eedc;
	padding: 20px;
	text-align: center;
	width: auto;
	margin: 0px;
}

.benefitBanner__content {
	padding-right: 0px;
}

@media (min-width: 480px) {
	.benefitBanner__item {
		width: 100%;
	}
}

@media (min-width: 768px) {
	.benefitBanner {
		flex-direction: row;
	}

	.benefitBanner .benefitBanner__item {
		flex: 1 1 calc((100% - (2 * 20px)) / 3);
	}
}

@media (min-width: 1200px) {
	.container.container--bannersBenefit {
		max-width: 1420px;
	}
}