/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Sep 29 2026 | 20:26:44 */
/* ========================================= GRID CARDS ========================================= */
.grid-cards-section {
	.text-wrapper {
		display: flex;
		justify-content: center;
		background-color: var(--white-dyn-1);
		transition: all 0.4s;
		
		.text-container {
			max-width: 1200px;
			text-align: center;
			color: var(--gray-dark-1-dyn-1);
			transition: all 0.4s;
		}
	}
	
	.grid-wrapper {
		display: grid;
		grid-template-columns: 1fr;
		
		@media screen and (min-width: 576px) {
			grid-template-columns: repeat(2, 1fr);
		}
		
		@media screen and (min-width: 768px) {
			grid-template-columns: repeat(4, 1fr);
		}
		
		.grid-card {
			height: 100vw;
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;
			gap: 1rem;
			position: relative;
			padding: 1.5rem;
			
			/* Checkerboard reordering only matters in the 2-column layout */
			@media screen and (min-width: 576px) {
				height: 50vw;
				padding: 3rem 2.5rem;
				
				&:nth-child(1) {order: 1}
				&:nth-child(2) {order: 2}
				&:nth-child(3) {order: 4}
				&:nth-child(4) {order: 3}
				&:nth-child(5) {order: 6}
				&:nth-child(6) {order: 5}
				&:nth-child(7) {order: 7}
				&:nth-child(8) {order: 8}
			}
			
			@media screen and (min-width: 768px) {
				height: 25vw;
				order: unset !important;
				padding: 1.5rem 1rem;
			}
			
			@media screen and (min-width: 1200px) {
				padding: 3rem 2.5rem;
			}
			
			&::before {
				content: "";
				position: absolute;
			}
			
			&.card-color {
				&.color-white {
					background-color: var(--white);
					color: var(--green-dark-1);
				}
				
				&.color-light-blue {
					background-color: var(--light-blue);
					color: var(--green-dark-1);
				}
				
				&.color-green-dark {
					background-color: var(--green-dark-2);
					color: var(--white);
				}
				
				&.color-teal-light {
					background-color: var(--teal-light);
					color: var(--white);
				}
				
				/* 1 column: arrow points down */
				&::before {
					left: 50%;
					bottom: 0;
					transform: translate(-50%, 50%) rotate(45deg);
					width: clamp(1rem, 10%, 2rem);
					aspect-ratio: 1 / 1;
					background-color: inherit;
					z-index: 3;
				}
				
				&:last-child::before {
					display: none;
				}
				
				/* 2+ columns: arrow points right */
				@media screen and (min-width: 576px) {
					&::before,
					&:last-child::before {
						display: block;
						left: unset;
						bottom: unset;
						right: 0;
						top: 50%;
						transform: translate(50%, -50%) rotate(45deg);
					}
				}
				
				/* 2 columns: cards 3 and 8 point left */
				@media screen and (min-width: 576px) and (max-width: 767.98px) {
					&:nth-child(3), &:nth-child(8) {
						&::before {
							right: unset;
							left: 0;
							transform: translate(-50%, -50%) rotate(45deg);
						}
					}
				}
				
				/* 4 columns: second row points left */
				@media screen and (min-width: 768px) {
					&:nth-last-child(-n + 4):nth-child(n + 5) {
						&::before {
							right: unset;
							left: 0;
							transform: translate(-50%, -50%) rotate(45deg);
						}
					}
				}
			}
			
			&.card-image {
				background-position: center;
				background-size: cover;
				background-repeat: no-repeat;
				color: #fff;
				z-index: 2;
				
				&::before {
					background-color: var(--green-dark-transparent-2);
					top: 0;
					bottom: 0;
					right: 0;
					left: 0;
					z-index: -1;
				}
			}
			
			.card-title {
				font-size: 1.25rem;
				font-weight: 600;
				text-align: center;
				line-height: 1.1;
				
				@media screen and (min-width: 1200px) {
					font-size: 1.5rem;
				}
			}
			
			.card-icon {
				max-height: 45%;
			}
			
			.card-text {
				font-size: 0.9rem;
				line-height: 1.3;
				color: inherit;
				
				@media screen and (min-width: 576px) {
					font-size: 1rem;
					line-height: 1.5;
				}
				
				@media screen and (min-width: 768px) {
					font-size: 0.9rem;
					line-height: 1.3;
				}
				
				@media screen and (min-width: 991px) {
					font-size: 1rem;
					line-height: 1.5;
				}
			}
		}
	}
}