@media (min-width: 30rem) {
	:root {
		--container-padding: var(--space-6);
	}
}

@media (min-width: 48rem) {
	:root {
		--container-padding: var(--space-8);
		--font-size-display: 4.5rem;
		--font-size-h1: 3.5rem;
	}

	.section {
		padding-block: var(--space-20);
	}
}

@media (max-width: 79.99rem) {
	.site-header__inner {
		min-height: 4rem;
	}

	.site-brand {
		flex-direction: column;
		align-items: flex-start;
		gap: 0.125rem;
	}

	.site-header .site-brand {
		flex-direction: row;
		align-items: center;
		gap: var(--space-2);
	}

	.site-header__brand-name {
		font-size: 0.9375rem;
	}

	.site-brand__logo {
		width: 2.625rem;
		height: 2.625rem;
		flex-basis: 2.625rem;
	}

	.site-brand__descriptor {
		font-size: 0.6875rem;
	}

	.site-menu-toggle {
		grid-column: 3;
		grid-row: 1;
		justify-self: end;
		display: block;
	}

	.site-header__menu {
		position: absolute;
		top: calc(100% + 1px);
		right: var(--container-padding);
		left: var(--container-padding);
		display: none;
		padding: var(--space-4);
		border: 1px solid var(--color-border);
		border-top: 0;
		background: var(--color-background);
		box-shadow: var(--shadow-md);
	}

	.site-header__menu.is-open {
		display: block;
	}

	.site-nav__list,
	.site-header__actions {
		align-items: stretch;
		flex-direction: column;
	}

	.site-nav__link,
	.site-header__actions .button {
		width: 100%;
		justify-content: flex-start;
	}

	.site-header__actions {
		margin-top: var(--space-3);
		padding-top: var(--space-3);
		border-top: 1px solid var(--color-border);
	}

	body.nav-menu-open {
		overflow: hidden;
	}
}

@media (max-width: 36rem) {
	.contact-whatsapp__actions {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: var(--space-2);
	}

	.contact-whatsapp__actions .button {
		width: 100%;
		flex-basis: 100%;
		justify-content: center;
	}
}

@media (min-width: 64rem) {
	:root {
		--container-padding: var(--space-10);
	}
}

@media (min-width: 80rem) {
	:root {
		--container-padding: var(--space-12);
	}

	.section {
		padding-block: var(--space-24);
	}
}
