Template:Callout/styles.css

/* wrapper around the callout that manages its alignment. */
.callout-wrapper {
	display: flex;
	/* set by template */
    /*justify-content: XXX;*/
    margin-top: .5em;
}

/* actual callout */
.callout {
	box-sizing: border-box;

	display: flex;
	flex-direction: row;
	gap: .5rem;
	
	min-width: 20rem;
	width: fit-content;
	/* set by template */
	/*min-width: XXX;*/
	padding: .5rem;
	
	background-color: var(--bg-color-light-x2);
	
	border: 1px solid;
	border-left: 10px solid;
	/* set by template */
	/*border-color: XXX;*/
}

/* added to callout when it's should be a centered, page-wide banner */
.callout-banner {
	width: 80%;
}

/* wrapper for images */
.callout-images {
    display: flex;
    flex-direction: row;
    align-items: center;
}

/* wrapper for images → image container */
.callout-images > * {
	display: inline-block;
	min-width: 64px;
}

/* contains header and content elements */
.callout-header-content-container {
	display: flex;
	flex-direction: column;
}

/* header element */
.callout-header {
	font-weight: bold;
	font-size: large;
}

/* wrapper around content element */
.callout-content-container {
	display: flex;
	align-items: center;
	
	height: 100%;
}

/* callout wrapper → a special class for creating same-width notices for stacking */
.callout-wrapper.stacked-notice {
	/* make the wrapper fit the callout element */
	width: fit-content;
	/* stacked notices go right */
	float: right;
	/* allow for stacking */
	clear: right;
}

/* callout wrapper → a special class for creating same-width notices for stacking → callout element */
.callout-wrapper.stacked-notice > .callout {
	/* set to fixed width */
    width: 30rem;
    /* fit to the page on small resoltuions, preventing overflow */
    max-width: 100%;
}

/* when on tablet or smaller device, take up the whole width of the page. */
@media (max-width:801px) {
	/* actual callout */
	.callout {
		width: 100%;
	}
	
	/* callout wrapper → a special class for creating same-width notices for stacking */
    .callout-wrapper.stacked-notice {
    	/* fill the page width */
    	width: 100%;
		/* no more float */
		float: none;
		/* no more clear, since float is disabled */
		clear: none;
	}
	
	/* callout wrapper → a special class for creating same-width notices for stacking → callout element */
	.callout-wrapper.stacked-notice > .callout {
		/* fill the page width */
	    width: 100%;
	}
}