/* ==========================================================================
   Spoty Games — Responsive (Mobile First)
   ========================================================================== */

@media (max-width: 479px) {
	.game-player__fullscreen-label {
		display: none;
	}

	.game-player__fullscreen {
		padding: 0.45rem;
		min-width: 2.25rem;
		min-height: 2.25rem;
	}
}

@media (min-width: 640px) {
	.search-modal__kbd {
		display: inline-flex;
	}

	.search-modal__quick-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 768px) {
	.search-modal {
		padding-top: 7vh;
	}

	.search-modal__quick-grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

@media (min-width: 480px) {
	.game-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.categories-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (min-width: 640px) {
	.hero__title {
		font-size: 1.75rem;
	}

	.blog-grid {
		grid-template-columns: repeat(2, 1fr);
	}

}

@media (min-width: 640px) {
	.detail-info-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.detail-scroll-grid {
		overflow: visible;
	}

	.detail-scroll-grid .game-grid {
		min-width: 0;
	}
}

@media (min-width: 768px) {
	.game-hero__toolbar {
		gap: 0.5rem;
	}

	.game-hero__title {
		font-size: clamp(1.5rem, 2.5vw, 2rem);
	}

	.hero {
		padding: 1.5rem 0;
	}

	.hero__inner {
		grid-template-columns: 1fr minmax(0, 360px);
		gap: 2.5rem;
		align-items: center;
	}

	.hero__featured {
		justify-self: end;
		max-width: 360px;
	}

	.hero__title {
		font-size: 2rem;
	}

	.hero__featured-img {
		height: 200px;
		max-height: 200px;
	}

	.detail-hero {
		padding: 1.5rem 0 2rem;
	}

	.detail-hero--game {
		padding: 0.75rem 0 1rem;
		margin-bottom: 1rem;
	}

	.detail-hero--archive {
		padding: 1rem 0 1.25rem;
	}

	.site-nav--desktop {
		display: flex;
	}

	.site-nav__toggle {
		display: none;
	}

	.site-header__cta {
		display: inline-flex;
	}

	.game-grid {
		grid-template-columns: repeat(3, 1fr);
	}

	.categories-grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 0.75rem;
	}

	.blog-grid {
		grid-template-columns: repeat(3, 1fr);
	}

	.single-game__title {
		font-size: 1.85rem;
	}

	.site-footer__grid {
		grid-template-columns: 1.4fr 1fr 1fr 1fr;
	}

	.site-footer__bottom {
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}

	.site-footer__copyright {
		text-align: left;
	}
}

@media (min-width: 1024px) {
	.sitemap-categories {
		grid-template-columns: repeat(5, minmax(0, 1fr));
	}

	.game-grid {
		grid-template-columns: repeat(5, 1fr);
	}

	.single-game__layout {
		grid-template-columns: minmax(0, 1fr) 300px;
		gap: 2rem;
	}

	.sidebar {
		display: block;
	}

	.article-layout {
		grid-template-columns: minmax(0, 1fr) 300px;
		gap: 2.5rem;
	}

	.article-aside {
		position: sticky;
		top: calc(var(--gz-header-height) + 1rem);
	}

	.article-prose {
		font-size: 1.1rem;
	}

	.article-featured-media__img {
		height: 220px;
	}

	.container {
		padding: 0 1.5rem;
	}

	.categories-grid {
		grid-template-columns: repeat(5, minmax(0, 1fr));
	}

	.sitemap-page__grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.sitemap-categories {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

@media (min-width: 1200px) {
	.categories-grid {
		grid-template-columns: repeat(6, minmax(0, 1fr));
	}
}

@media (max-width: 767px) {
	.site-header__inner {
		gap: 0.75rem;
	}

	.site-branding {
		flex: 1;
		min-width: 0;
	}
}