@layer components {
	.callout-container{
		background-color: hsl(var(--clr-teal));
		background-image: url(/images/swirlies-cropped-transparent.png);
		background-size: auto;
		background-position: center bottom;
		color: white;
		padding: 3.4375rem 0 4.6875rem;
	}

	@media(min-width: 768px){
		.callout-container{
			background-size: 100%;
		}
	}
	
	.callout-container h2{
	    line-height: 1.25;
	}

	.callout-container > div{
		display: flex;
		flex-wrap: wrap;
		gap: 1rem;
		justify-content: space-between;
		align-items: center;
	}
}