hello-theme/dev/scss/theme/_header.scss

/**
 * Header styling and layout
 */

.site-header {
	/* Backwards compat for Hello 2.3.0 */
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	padding-block-start: 1rem;
	padding-block-end: 1rem;
	position: relative;

	.site-title {
		font-size: 2.5rem;
		font-weight: 500;
		line-height: 1.2;
	}

	.site-branding {
		display: flex;
		flex-direction: column;
		justify-content: center;
		gap: 0.5rem;
	}

	.header-inner {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;

		.custom-logo-link {
			display: block;
		}

		.site-branding {

			.site-title,
			.site-description {
				margin: 0;
			}

			.site-logo {

				img {
					display: block;
				}
			}

			&.show-title {

				.site-logo {
					display: none !important;
				}
			}

			&.show-logo {

				.site-title {
					display: none !important;
				}
			}
		}
	}

	&.header-inverted {

		.header-inner {
			flex-direction: row-reverse;

			.site-branding {
				text-align: end;
			}
		}
	}

	&.header-stacked {

		.header-inner {
			align-items: center;
			flex-direction: column;
			text-align: center;
		}
	}
}