/* ==================================================================== *
 * OVERLAP GUARDS
 * Boxes sized purely by aspect-ratio hold absolutely-positioned images
 * and labels. If aspect-ratio is unsupported or a custom ratio is typed
 * in wrong, the box collapses to zero height and its contents paint over
 * whatever follows. These rules give every such box a floor.
 * ==================================================================== */

.wl-cats,
.wl-scroller,
.wl-ess,
.wl-community,
.wl-stories,
.wl-blog,
.wl-how,
.wl-ocards {
	/* contains the edge-to-edge strips instead of letting them push the page sideways */
	overflow-x: clip;
}

.wl-cats__grid,
.wl-track,
.wl-stories__grid,
.wl-blog__grid {
	min-width: 0;
}

/* Floors, so a bad ratio degrades to "a bit short" rather than "overlapping" */
.wl-pcard__media,
.wl-ecard__media {
	min-height: 150px;
}

.wl-ig,
.wl-story__media,
.wl-blog-card__media {
	min-height: 160px;
}

/* Percentage-padding fallback for engines without aspect-ratio */
@supports not (aspect-ratio: 3 / 4) {
	.wl-pcard__media,
	.wl-ecard__media,
	.wl-ig,
	.wl-story__media,
	.wl-blog-card__media {
		height: 0;
		overflow: hidden;
	}

	.wl-pcard__media {
		padding-bottom: 133%;
	}

	.wl-ecard__media {
		padding-bottom: 133%;
	}

	.wl-ig {
		padding-bottom: 100%;
	}

	.wl-story__media,
	.wl-blog-card__media {
		padding-bottom: 56.25%;
	}
}

@media (max-width: 767px) {
	/* the card is the flex item; never let its text spill onto the next card */
	.wl-track > * {
		min-width: 0;
	}

	.wl-pcard__brand,
	.wl-pcard__title,
	.wl-pcard__price,
	.wl-ecard__title,
	.wl-ecard__cat {
		max-width: 100%;
	}
}