@layer blocks {
	.section-header {
		align-items: start;
		display: grid;
		gap: 20px;

		@media (width < 48em) {
			& .button {
				inline-size: 100%;
			}
		}

		@media (width >= 48em) {
			&:has(.section-header-info) {
				grid-template-columns: repeat(2, auto);;
				justify-content: space-between;

				& .section-header-info {
					grid-column: 2;
					grid-row: 1;
				}
			}

			&:not(:has(.text)):has(.button) {
				grid-template-columns: repeat(2, 1fr);
			}

			& .button-container {
				justify-self: end;
			}
		}
	}

	.section-header-eyebrow {
		font-weight: 700;
	}

	.section-header-info {
		color: var(--color-gray-1);
		font-size: var(--body-font-size-xs);
		margin-block-start: 0;
	}
}