{% block cms_element_bc_featured_categories %}


	{% set link1 = element.config.link1.value~'/' %}
	{% set link2 = element.config.link2.value~'/' %}
	{% set link3 = element.config.link3.value~'/' %}
	{% set link4 = element.config.link4.value~'/' %}
	{% set title = element.config.title.value %}
	{% set title1 = element.config.title1.value %}
	{% set title2 = element.config.title2.value %}
	{% set title3 = element.config.title3.value %}
	{% set title4 = element.config.title4.value %}
	{% set mainImage1 = element.config.mainImage1.value %}
	{% set mainImage2 = element.config.mainImage2.value %}
	{% set mainImage3 = element.config.mainImage3.value %}
	{% set mainImage4 = element.config.mainImage4.value %}
	{% set buttonText1 = element.config.buttonText1.value %}
	{% set buttonText2 = element.config.buttonText2.value %}
	{% set buttonText3 = element.config.buttonText3.value %}
	{% set buttonText4 = element.config.buttonText4.value %}
	{% set description = element.config.description.value %}
	{% set description1 = element.config.description1.value %}
	{% set description2 = element.config.description2.value %}
	{% set description3 = element.config.description3.value %}
	{% set description4 = element.config.description4.value %}
	{% set descriptionActive1 = element.config.descriptionActive1.value %}
	{% set descriptionActive2 = element.config.descriptionActive2.value %}
	{% set descriptionActive3 = element.config.descriptionActive3.value %}
	{% set descriptionActive4 = element.config.descriptionActive4.value %}

	{% set mediaCollection = searchMedia([mainImage1, mainImage2, mainImage3, mainImage4], context.context) %}
	{% set image1 = mediaCollection.get(mainImage1) %}
	{% set image2 = mediaCollection.get(mainImage2) %}
	{% set image3 = mediaCollection.get(mainImage3) %}
	{% set image4 = mediaCollection.get(mainImage4) %}


	{% set btnBgColorTab1 = element.config.btnBgColorTab1.value %}
	{% set titleColorTab1 = element.config.titleColorTab1.value %}
	{% set titleColorTab2 = element.config.titleColorTab2.value %}
	{% set titleColorTab3 = element.config.titleColorTab3.value %}
	{% set titleColorTab4 = element.config.titleColorTab4.value %}
	{% set btnTxtColorTab1 = element.config.btnTxtColorTab1.value %}
	{% set btnTxtColorTab2 = element.config.btnTxtColorTab2.value %}
	{% set btnTxtColorTab3 = element.config.btnTxtColorTab3.value %}
	{% set btnTxtColorTab4 = element.config.btnTxtColorTab4.value %}
	{% set subtitleColorTab1 = element.config.subtitleColorTab1.value %}
	{% set subtitleColorTab2 = element.config.subtitleColorTab2.value %}
	{% set subtitleColorTab3 = element.config.subtitleColorTab3.value %}
	{% set subtitleColorTab4 = element.config.subtitleColorTab4.value %}
	{% set descriptionActive1 = element.config.descriptionActive1.value %}
	{% set descriptionActive2 = element.config.descriptionActive2.value %}
	{% set descriptionActive3 = element.config.descriptionActive3.value %}
	{% set descriptionActive4 = element.config.descriptionActive4.value %}


	{% set textPlacement1 = element.config.textPlacement1.value %}
	{% set textPlacement2 = element.config.textPlacement2.value %}


	{% if title %}
		<div class="bc-primary-heading col-lg-12">{{title}}</div>
	{% endif  %}
	{% if description %}
		<p class="bc-primary-sub-heading col-lg-12">{{description}}</p>
	{% endif %}
	<div class="col-lg-6 mb-lg-0 mb-4">
		<a href="{{link1}}">
			<div class="bc-categories-wrapper tab-one">
				<div class="big-img bc-categories-image" style="background-image: url({{image1.url}});">
					<div class="bc-categories-content-wrapper content-center bc-text-{{textPlacement1|trim}}">
						<div class="bc-categories-content-big-heading" style="color:{{titleColorTab1}};">
							{{title1}}
						</div>
						<div class="bc-categories-content" style="color:{{subtitleColorTab1}};">
							{{descriptionActive1 ? description1 : ''}}
						</div>
						<span class="bc-btn-primary" style="background: {{btnBgColorTab1}}; color: {{btnTxtColorTab1}};">
							{{buttonText1}}
						</span>
					</div>
				</div>
			</div>
		</a>
	</div>
	<div class="col-lg-6">
		<div class="row">
			<div class="col-lg-6 col-md-6 bc-margin-bottom ps-lg-1">
				<a href="{{link2}}">
					<div class="bc-categories-wrapper tab-two">
						<div class="bc-categories-image" style="background-image: url({{image2.url}});">
							<div class="bc-categories-content-wrapper content-left">
								<div class="bc-categories-content-heading" style="color: {{titleColorTab2}};">
									{{title2}}
								</div>
								{% if descriptionActive2 %}
									<div class="bc-categories-content" style="color:{{subtitleColorTab2}};">
										{{description2}}
									</div>
								{% endif %}
								<span class="bc-btn-secondary" style="color:{{btnTxtColorTab2}};">
									{{buttonText2}}
								</span>
							</div>
						</div>
					</div>
				</a>
			</div>
			<div class="col-lg-6 col-md-6 ps-md-1">
				<a href="{{link3}}">
					<div class="bc-categories-wrapper tab-three">
						<div class="bc-categories-image" style="background-image: url({{image3.url}});">
							<div class="bc-categories-content-wrapper content-left">
								<div class="bc-categories-content-heading" style="color: {{titleColorTab3}};">
									{{title3}}
								</div>
								{% if descriptionActive3 %}
									<div class="bc-categories-content" style="color:{{subtitleColorTab3}};">
										{{description3}}
									</div>
								{% endif %}
								<span class="bc-btn-secondary" style="color:{{btnTxtColorTab3}};">
									{{buttonText3}}
								</span>
							</div>
						</div>
					</div>
				</a>
			</div>
		</div>
		<div class="row full-banner-margin-top">
			<div class="col-lg-12 ps-lg-1">
				<a href="{{link4}}">
					<div class="bc-categories-wrapper tab-four">
						<div class="bc-categories-image" style="background-image: url({{image4.url}});">
							<div class="bc-categories-content-wrapper content-right bc-text-{{textPlacement2|trim}}">
								<div class="bc-categories-content-heading" style="color: {{titleColorTab4}};">
									{{title4}}
								</div>
								{% if descriptionActive4 %}
									<div class="bc-categories-content" style="color:{{subtitleColorTab4}};">
										{{description4}}
									</div>
								{% endif %}
								<span class="bc-btn-secondary" style="color:{{btnTxtColorTab4}};">
									{{buttonText4}}
								</span>
							</div>
						</div>
					</div>
				</a>
			</div>
		</div>
	</div>

{% endblock %}
