/* Net-new CSS for the two homepage promo bands (everyday_essentials, sponsored_brands).
   style.css and skin-1.css still own the looks of both sections. */

/* style.css masks the promo photo with ../images/bg-media.svg, which the Summer package never
   shipped, and a mask-image that fails to load resolves to transparent black - the panel vanishes. */
.about-box.style-1 .dz-media img {
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 640' preserveAspectRatio='none'%3E%3Cpath fill='%23fff' d='M64,0 H720 A80,80 0 0 1 800,80 V560 A80,80 0 0 1 720,640 H64 C24,584 48,512 48,448 C48,384 8,368 8,320 C8,272 48,256 48,192 C48,128 24,56 64,0 Z'/%3E%3C/svg%3E");
	/* preserveAspectRatio=none plus this stretches the mask to whatever width the column is. */
	mask-size: 100% 100%;
	mask-repeat: no-repeat;
	mask-position: center;
}

/* Embla only moves the track, so the sponsored rail's slide width lives here. Three-up rather than
   the reference's four so a catalogue with only a handful of brands still fills the row. */
.swiper-company .swiper-slide {
	width: 33.333%;
	padding-inline: 15px;
}

@media only screen and (max-width: 991px) {
	.swiper-company .swiper-slide {
		width: 50%;
	}
}

@media only screen and (max-width: 575px) {
	.swiper-company .swiper-slide {
		width: 80%;
	}
}

/* Upstream .dz-media is a bare positioning context: it sized itself off the backdrop photo and
   never clipped the 1.2x hover zoom. The colour is the floor under a photo that fails to load. */
.company-box.style-1 .dz-media {
	overflow: hidden;
	min-height: 220px;
	background-color: var(--primary);
}

.company-box.style-1 .dz-media .company-img {
	display: block;
	width: 100%;
	height: 220px;
	object-fit: cover;
}

.company-box.style-1 .dz-media .brand-name {
	width: auto;
	max-width: 80%;
	color: #fff;
	font-size: 24px;
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	text-transform: capitalize;
}

.company-box.style-1 .dz-content .title a {
	color: inherit;
	text-decoration: none;
}