Thin Newsletter Callout

@import "../../resources/scss/util/variables";
@import "../../resources/scss/util/mixins";
@import "../../resources/scss/vendor/bootstrap/mixins/breakpoints";

.newsletter-callout-bar {
	padding-top: 0.75rem;
	padding-bottom: 0.75rem;
	position: relative;

	@include media-breakpoint-down(sm) {
		padding-top: 1.5rem;
		padding-bottom: 1.5rem;
	}
	&:after {
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: var(--theme-colour);
		z-index: -1;
		transform: translateX(-100%);
		transition: transform 0.7s cubic-bezier(0.62, 0.38, 0.17, 0.85);
		transition-delay: 0.6s;
	}
	&.aos-animate {
		&:after {
			transition-delay: 0s;
			transform: translateX(0);
		}
	}
	&.orange {
		&:after {
			background: $orange;
		}
	}
	.container {
		display: flex;
		align-items: center;
		justify-content: space-between;

		@include media-breakpoint-down(sm) {
			flex-direction: column;
			text-align: center;
		}
	}
	p {
		margin-right: 3rem;

		@include media-breakpoint-down(sm) {
			margin: 0 0 1rem 0;
		}
	}
}