/*
 * Header banner (Appearance → Customize → Header banner): the Carousel block
 * under the header. "Site width" and "Custom" cap the width on large
 * screens; smaller screens always use their full width.
 */
.bookshelf-header-banner {
	margin-inline: auto;
}

/* Directly under the header, without the gap between top-level blocks. */
.wp-site-blocks > .bookshelf-header-banner {
	margin-block-start: 0;
}

.bookshelf-header-banner--wide,
.bookshelf-header-banner--custom {
	max-inline-size: var(--bookshelf-header-banner-max, 1200px);
}

.bookshelf-header-banner .bookshelf-carousel {
	margin-block: 0;
}

.bookshelf-header-banner__link,
.bookshelf-header-banner picture {
	display: block;
}

.bookshelf-header-banner__link:focus-visible {
	outline: 3px solid var(--wp--preset--color--primary, #0e7a57);
	outline-offset: -3px;
}

.bookshelf-header-banner__image {
	display: block;
	inline-size: 100%;
	block-size: auto;
}