Thin Buttons Callout

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

.thin-buttons-callout {
	padding-top: 3.25rem;
	padding-bottom: 2.5rem;
	position: relative;

	@include media-breakpoint-down(md) {
		padding-top: 2rem;
		padding-bottom: 2rem;
	}
	@include media-breakpoint-down(xs) {
		.buttons {
			margin-top: 1rem;
		}
	}
    &.has-bg {
        &: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);
            }
        }
    }
	.container {
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-wrap: wrap;
		position: relative;
		z-index: 2;
	}
	h3,
	h4 {
		margin-bottom: 0.75rem;
	}
	a.button {
		margin-top: 0;
		margin-bottom: 0.75rem;
	}
	.left {
		@include media-breakpoint-down(md) {
			width: 100%;
		}
		*:last-child {
			margin-bottom: 0.75rem;
		}
	}
}