/* Page Components - Cards with Intro */

.cards-with-intro-1 {
    border-radius: 0 0 1.667rem 0;
}

.cards__container { display: grid; grid-gap: 2rem 3.6rem; margin: 5rem 0 4rem 0; grid-auto-columns: minmax(0, 1fr); grid-auto-flow: column;}

/* This is so when you view the component in block view in admin it stays 3 across */
.acf-block-component .cards__container { grid-auto-columns: minmax(0, 1fr); grid-auto-flow: column; grid-gap: 2rem 3.6rem; }


.cards__corner-artwork { position: absolute; top: 0; left: 0; }
.cards__heading-container { margin-top: 4rem; }
.content-block__heading-container .cards__heading { color: var(--white); margin: 0 0 1.666rem 0; }
.content-block__content.cards__intro { font-size: 1.222rem; color: var(--white); }
.cards__container-card { display: flex; flex-direction: column; padding: 2.222rem 2.222rem 1.66rem 2.222rem; border-radius: 0.833rem; -webkit-backdrop-filter: blur(1px); backdrop-filter: blur(1px); border: solid 1px var(--darkest-gray); box-shadow: -2px 2px 10px 0 rgba(29, 34, 36, 0.14); background-color: rgb(3 32 45 / 60%); }
.card__icon { max-width: 87px; margin-bottom: 3.66rem; }
.card__heading { font-family: var(--text-family); font-size: 1.556rem; font-weight: 500; line-height: 1.12; letter-spacing: normal; color: var(--secondary); margin-bottom: 1rem; }
.card__intro { font-family: var(--text-family); color: var(--white); line-height: 1.67; }
.card__button, .wp-admin .acf-block-component .card__button {	margin-top: auto;	margin-bottom: 0; }
.card__button .button, .wp-admin .acf-block-component .card__button .button[class*="button-style-2"] { background-color: transparent; margin-bottom: 0; letter-spacing: 0.7px;	text-align: left; padding: 0.711rem 2.667rem 0.711rem 0rem; border-bottom: none; font-size: 0.944rem; backdrop-filter: unset; }

@media (max-width: 1300px) {
	.cards__container { grid-gap: 2rem 2rem; }
}
@media (max-width: 1100px) {
	.cards__container { grid-auto-columns: 1fr; grid-auto-flow: row; grid-gap: 2rem 2rem; }
	.acf-block-component .cards__container { grid-auto-columns: 1fr; grid-auto-flow: row; grid-gap: 2rem 2rem;}
	.cards__container-card { display: grid; grid-template-columns: 150px 1fr; }
	.card__button, .wp-admin .acf-block-component .card__button { grid-column: 2; }
}
@media (max-width: 900px) {
	.cards__corner-artwork { opacity: 0.5; }
}
@media (max-width: 639px) {
	.card__icon { max-width: 70px; }
	.cards__container-card { grid-template-columns: 95px 1fr; padding: 1.666rem 1.666rem 1.1rem 1.666rem; }
	.cards__container { margin: 3rem 0 1rem 0; }
}
@media (max-width: 479px) {
	.card__icon { max-width: 70px; margin-bottom: 1.66rem; }
	.cards__container-card { display: flex; }
}