/* ------------------------------------------------------------------
	Default “hero” heights (desktop / ≥576px)
	------------------------------------------------------------------ */
	.hero-banner {
		background-size: cover;
		background-position: center;
		height: 60vh;
		/* desktop height */
	}

	.banner-logo-wrapper {
		height: 50vh;
		/* logo container height */
		overflow: hidden;
		/* crop anything outside this box */
	}

	/* ------------------------------------------------------------------
	Small screens (≤576px): shrink both containers to crop vertically
	------------------------------------------------------------------ */
	@media (max-width: 576px) {
		.hero-banner {
			height: 30vh;
		}

		.banner-logo-wrapper {
			height: 25vh;
		}

		.banner-logo-wrapper img {
			width: 100%;
			height: auto;
			object-fit: cover;
			/* fill wrapper and crop as needed */
			object-position: top;
			/* show top of logo first (optional) */
		}
	}

	/* Default size for md+ screens */
	.featured-circle {
		max-width: 500px;
		/* tweak as desired */
		width: 100%;
		height: auto;
	}

	/* Shrink slightly on small screens ≤576px */
	@media (max-width: 576px) {
		.featured-circle {
			max-width: 200px;
			/* smaller size */
		}
	}

	/* Custom styles for league rules text */
	.text-muted-custom {
		color: #3e4c58;
	}

	.text-small-custom {
		font-size: 0.9rem;
		font-weight: 400;
		margin-bottom: 0.5rem;
		margin-top: 0.5rem;
	}

	.text-center-custom {
		text-align: center;
	}

	/* Style for ordered lists with decimal numbering for sub-lists */
	ol {
		counter-reset: section;
	}

	ol > li {
		list-style-type: decimal;
		counter-increment: section;
	}

	ol > li > ol {
		counter-reset: subsection;
	}

	ol > li > ol > li {
		list-style-type: none;
		counter-increment: subsection;
	}

	ol > li > ol > li:before {
		content: counters(section, ".") "." counters(subsection, ".") " ";
		list-style-type: decimal;
	}