/**
 * Mix Gourmet — responsive.
 */

@media (max-width: 1024px) {
	.mg-intro__grid,
	.mg-quality__grid {
		grid-template-columns: 1fr;
		gap: 32px;
	}

	.mg-product-row,
	.mg-product-row--reverse {
		grid-template-columns: 1fr;
		gap: 28px;
	}

	.mg-product-row--reverse .mg-product-row__media,
	.mg-product-row--reverse .mg-product-row__content {
		order: unset;
		text-align: left;
	}

	.mg-intro__description {
		max-width: none;
	}

	.mg-benefits__grid {
		gap: 24px;
	}

	.mg-benefit-card,
	.mg-benefit-card--top-left,
	.mg-benefit-card--top-right,
	.mg-benefit-card--bottom-left,
	.mg-benefit-card--bottom-right {
		justify-self: stretch;
		max-width: none;
	}
}

@media (max-width: 767px) {
	:root {
		--mg-container: calc(100% - 32px);
	}

	.mg-hero {
		padding-top: 72px;
	}

	.mg-hero--has-bg {
		padding-top: 0;
		--mg-hero-height: clamp(484px, 87vw, 629px);
		--mg-scroll-size: 46px;
	}

	.mg-hero--has-bg .mg-hero__stage {
		inset: clamp(52px, 10vw, 68px) 0 clamp(56px, 12vw, 72px);
		transform: translateY(-20px);
	}

	.mg-hero--has-bg .mg-hero__copy-img {
		max-width: min(360px, 86vw);
	}

	.mg-hero--has-bg .mg-hero__visual-img {
		max-width: min(400px, 90vw);
	}

	.mg-hero--has-bg + .mg-intro {
		padding-top: calc(32px + (var(--mg-scroll-size) / 2));
	}

	.mg-hero__stage {
		grid-template-columns: 1fr;
		gap: 8px;
		min-height: auto;
		padding-bottom: 72px;
		text-align: center;
	}

	.mg-hero__copy,
	.mg-hero__visual {
		justify-content: center;
	}

	.mg-hero__copy-img {
		max-width: min(420px, 92vw);
	}

	.mg-hero__visual-img {
		max-width: min(480px, 100%);
	}

	.mg-intro {
		padding: 32px 0 48px;
	}

	.mg-intro__grid {
		grid-template-columns: 1fr;
		gap: 28px;
	}

	.mg-intro__left {
		padding-bottom: 48px;
	}

	.mg-intro__ambassador {
		max-width: min(260px, 68vw);
		margin-inline: auto;
	}

	.mg-intro__quote-row {
		position: absolute;
		right: 0;
		bottom: 0;
		left: 0;
	}

	.mg-intro__quote {
		padding: 10px 88px 10px 18px;
		font-size: 1rem;
		background:
			linear-gradient(var(--mg-blue-dark), var(--mg-blue-dark)) padding-box,
			linear-gradient(
				to right,
				var(--mg-yellow) 0%,
				var(--mg-yellow) 42%,
				rgba(255, 229, 0, 0.5) 62%,
				transparent 86%
			) border-box;
	}

	.mg-intro__signature {
		margin-left: -96px;
		transform: translateX(-10px) translateY(2px);
	}

	.mg-intro__signature::before {
		left: -36px;
		right: -8px;
		top: -14px;
		bottom: -10px;
	}

	.mg-intro__signature-img {
		width: clamp(128px, 36vw, 180px);
	}

	.mg-intro__proteins {
		gap: 2px;
	}

	.mg-intro__protein-media {
		width: 88px;
		height: 88px;
	}

	.mg-intro__protein-label {
		font-size: 1.1rem;
	}

	.mg-products {
		--mg-product-panel-h: 300px;
	}

	.mg-product-row__panel {
		padding: 20px 16px 0;
		border-radius: 28px;
	}

	.mg-product-row__image {
		max-height: calc(var(--mg-product-panel-h) - 20px);
	}

	.mg-product-row__content {
		text-align: left !important;
	}

	.mg-benefits {
		--mg-ben-canvas-w: calc(100% - 24px);
		--mg-ben-canvas-ratio: auto;
	}

	.mg-benefits__canvas {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 28px;
		width: var(--mg-ben-canvas-w);
		aspect-ratio: auto;
		min-height: 0;
	}

	.mg-benefits__bowl {
		position: static;
		width: min(480px, 92vw);
		transform: none;
		order: 1;
	}

	.mg-benefit-card,
	.mg-benefit-card--top-left,
	.mg-benefit-card--top-right,
	.mg-benefit-card--bottom-left,
	.mg-benefit-card--bottom-right,
	.mg-benefit-card--featured {
		position: static;
		left: auto;
		top: auto;
		width: 100%;
		max-width: 300px;
		transform: none;
		order: 2;
		align-items: center;
	}

	.mg-benefit-card--top-left .mg-benefit-card__text,
	.mg-benefit-card--bottom-left .mg-benefit-card__text,
	.mg-benefit-card--top-right .mg-benefit-card__text,
	.mg-benefit-card--bottom-right .mg-benefit-card__text,
	.mg-benefit-card--featured .mg-benefit-card__text {
		text-align: center;
	}

	.mg-benefit-card--featured .mg-benefit-card__tag-img {
		max-width: min(220px, 92vw);
		max-height: 52px;
	}

	.mg-quality {
		padding-bottom: 64px;
	}

	.mg-quality__description {
		max-width: none;
	}

	.mg-quality__video-trigger {
		border-radius: 20px;
	}

	.mg-btn {
		width: 100%;
	}
}