@media (max-width: 361px) and (min-width: 240px) {
	.hero-section {
		padding-top: calc(var(--nav-h) + 4rem);
        padding-bottom: 1rem;
	}
	
	.hero-content {
		padding: 180px 10px 20px;
	}
	
	.hero-overlay {
		background: linear-gradient(to right, rgba(5, 0, 15, 0.15) 0%, rgba(5, 0, 15, 0.25) 30%, rgba(5, 0, 15, 0.30) 55%, rgba(5, 0, 15, 0.12) 72%, transparent 100%), linear-gradient(to bottom, rgba(5, 0, 15, 0.4) 0%, transparent 15%);
		z-index: 1;
	}
	
	.partners-logo-item img {
		max-width: 70%;
		transition: filter 0.3s ease, opacity 0.3s ease;
	}
}

@media (max-width: 481px) and (min-width: 361px) {
	.hero-section {
		padding-top: calc(var(--nav-h) + 5rem);
        padding-bottom: 1rem;
	}
	
	.hero-content {
		padding: 0px 10px 20px;
	}
	
	.hero-overlay {
		background: linear-gradient(to right, rgba(5, 0, 15, 0.15) 0%, rgba(5, 0, 15, 0.25) 30%, rgba(5, 0, 15, 0.30) 55%, rgba(5, 0, 15, 0.12) 72%, transparent 100%), linear-gradient(to bottom, rgba(5, 0, 15, 0.4) 0%, transparent 15%);
		z-index: 1;
	}

	.sg-other-card {
		flex: 0 0 228px;
		height: 400px;
	}
}

@media (max-width: 577px) and (min-width: 481px) {
	.hero-section {
		padding-top: calc(var(--nav-h) + 5rem);
        padding-bottom: 1rem;
	}
	
	.hero-content {
		padding: 0px 10px 20px;
	}
	
	.hero-overlay {
		background: linear-gradient(to right, rgba(5, 0, 15, 0.15) 0%, rgba(5, 0, 15, 0.25) 30%, rgba(5, 0, 15, 0.30) 55%, rgba(5, 0, 15, 0.12) 72%, transparent 100%), linear-gradient(to bottom, rgba(5, 0, 15, 0.4) 0%, transparent 15%);
		z-index: 1;
	}

	.sg-other-card {
		flex: 0 0 246px;
		height: 430px;
	}
}

@media (max-width: 641px) and (min-width: 577px) {
	.hero-section {
		padding-top: calc(var(--nav-h) + 5rem);
        padding-bottom: 1rem;
	}
	
	.hero-content {
		padding: 180px 10px 30px;
	}

	.sg-other-card {
		flex: 0 0 246px;
		height: 430px;
	}
}

@media (max-width: 769px) and (min-width: 641px) {
	.hero-section {
		padding-top: calc(var(--nav-h) + 5rem);
        padding-bottom: 1rem;
	}
	
	.hero-content {
		padding: 180px 10px 30px;
	}

	.sg-other-card {
		flex: 0 0 246px;
		height: 430px;
	}

	.game-thumb {
        width: 100%;
        height: 100%;
    }

	.game-thumb-wrapper {
		max-width: 100%;
	}
}

@media (max-width: 992px) and (min-width: 769px) {
	.hero-section {
		padding-top: calc(var(--nav-h) + 2rem);
        padding-bottom: 1rem;
	}

	.hero-content {
		padding: 0px 10px 30px;
	}
	
	.sg-other-card {
		flex: 0 0 246px;
		height: 430px;
	}
}

/* Landscape phones — drop the hero top padding and nudge the mascot */
@media (max-width: 991.98px) and (orientation: landscape) {
	.hero-section {
		padding-top: 90px;
	}

	.hero-mascot-mobile {
		transform: translate(10%, 0%);
	}
}

/* Portrait phones — hide the hero mascot image entirely */
@media (max-width: 991.98px) and (orientation: portrait) {
	.hero-mascot-mobile {
		display: none;
	}
}

@media (max-width: 1025px) and (min-width: 992px) {
	.hero-section {
		padding-top: calc(var(--nav-h) + 2rem);
        padding-bottom: 1rem;
	}
	
	.hero-content {
		padding: 80px 10px 30px;
	}
	
	.partners-logo-item img {
		max-width: 80%;
		transition: filter 0.3s ease, opacity 0.3s ease;
	}
}

@media (max-width: 1201px) and (min-width: 1025px) {
	.hero-section {
		padding-top: calc(var(--nav-h) + 2rem);
        padding-bottom: 1rem;
	}
	
	.hero-content {
		padding: 80px 10px 30px;
	}
	
	.about-story-img-grid {
		height: 480px;
	}
}

@media (max-width: 1367px) and (min-width: 1201px) {
	.about-story-img-grid {
		height: 490px;
	}

	.game-thumb {
        width: 100%;
        height: 100%;
    }

	.game-thumb-wrapper {
		max-width: 100%;
	}
}

@media (max-width: 1921px) and (min-width: 1367px) {
	.about-story-img-grid {
		height: 600px;
	}
	
	@media (max-width: 1599px) and (min-width: 1367px) {
		.about-story-img-grid {
			height: 512px;
		}
	}

	.sg-other-card {
		flex: 0 0 245px;
        height: 430px;
	}

	.game-thumb {
        width: 100%;
        height: 100%;
    }

	.game-thumb-wrapper {
		max-width: 100%;
	}
}

@media (max-width: 2560px) and (min-width: 1921px) {
	.sg-other-card {
		flex: 0 0 340px;
        height: 605px;
	}

	.game-thumb {
        width: 100%;
        height: 100%;
    }

	.game-thumb-wrapper {
		max-width: 100%;
	}

	.sg-hero {
		height: 33vh;
	}
}

@media (min-width: 1600px) {
	.container-xxl {
		max-width: 1540px;
	}
}

@media (min-width: 1920px) {
	.container-xxl {
		max-width: 1800px;
	}
}

/* Hero games thumbnails — mobile (below the 992px desktop breakpoint):
   show only the first 4 thumbnails and space them edge-to-edge so the
   leftmost thumb lines up with the "Games" title and the rightmost lines
   up with the "See all" link. The row shares its content edges with the
   section header above (the negative gutter margin cancels the padding),
   so justify-content: space-between makes the outer thumbs sit flush with
   those header items. */
@media (max-width: 991.98px) {
	.games-row {
		justify-content: space-between;
		overflow-x: hidden;
		/* Smaller minimum gap on mobile so the 4 enlarged thumbnails always
		   fit — this keeps space-between able to sit the last thumb flush
		   with the "See all" link instead of overflowing past it. */
		gap: 0.4rem;
	}

	.games-row .game-thumb-wrapper {
		flex: 0 0 auto;
		max-width: none;
	}

	/* Hide the 5th (and any further) thumbnail on mobile. */
	.games-row .game-thumb-wrapper:nth-child(n+5) {
		display: none;
	}

	.games-row .game-thumb {
		width: clamp(66px, 21vw, 128px);
		height: clamp(66px, 21vw, 128px);
	}
}