/*  GRID OF FOUR   ============================================================================= */

.span_4_of_4 {
	width: 100%;
}

.span_3_of_4 {
  	width: 74.875%; /* 3 columns + 2 margins */
}

.span_2_of_4 {
  	width: 49.75%; /* 2 columns + 1 margin */
}

.span_1_of_4 {
  	width: 24.625%; /* (100% - 1.5% margins) / 4 = 24.625% per column */
}

/* Fix for 4-column grid: remove left margin and clear float for first item in each row */
/* This ensures rows align properly (items 1, 5, 9, 13, etc. have no left margin and start a new row) */
.span_1_of_4:nth-child(4n+1) {
	margin-left: 0;
	clear: left;
}

/*  GO TO 3 COLUMNS AT LESS THAN 1200 PIXELS (tablets) */
@media only screen and (max-width: 1200px) {
	.span_3_of_4 {
		width: 100%; 
		clear: both;
		margin-left: 0;
		margin-right: 0;
	}
	.span_2_of_4 {
		width: 100%;
		clear: both;
		margin-left: 0;
		margin-right: 0;
	}
	/* Override desktop 4-column layout for 3-column tablet layout */
	/* Override base .col margin (0.5%) and use precise calculation for 3 columns */
	.span_1_of_4 {
		width: 32%; /* Conservative width: 32% * 3 = 96%, leaving 4% for margins (more than enough) */
		margin: 0.5% 0 0.5% 1.33% !important; /* ~1.33% margin between columns */
		clear: none !important; /* Override desktop clear: left */
		box-sizing: border-box; /* Ensure padding/border don't add to width */
	}
	/* Override desktop 4n+1 rule - reset it first */
	.span_1_of_4:nth-child(4n+1) {
		clear: none !important;
		margin-left: 1.33% !important;
	}
	/* Apply 3-column layout: items 1, 4, 7, 10... (3n+1) start new rows with no left margin */
	.span_1_of_4:nth-child(3n+1) {
		margin-left: 0 !important;
		margin-right: 0 !important;
		clear: left !important;
	}
	/* Items 2, 5, 8, 11... (3n+2) and 3, 6, 9, 12... (3n) have ~1.33% left margin */
	.span_1_of_4:nth-child(3n+2),
	.span_1_of_4:nth-child(3n) {
		margin-left: 1.33% !important;
		margin-right: 0 !important;
		clear: none !important;
	}
}

/*  GO TO 2 COLUMNS AT 600 PIXELS AND BELOW (mobile devices - phones and small tablets) */
@media only screen and (max-width: 600px) {
	.span_3_of_4 {
		width: 100% !important; 
		clear: both !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
	}
	.span_2_of_4 {
		width: 100% !important;
		clear: both !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
	}
	/* Override 3-column layout for 2-column mobile layout */
	/* Reduced width and margins to prevent overflow on smaller devices like Pixel 7a (412px) */
	.span_1_of_4 {
		width: 48% !important; /* Reduced from 48.5% to 48% for tighter fit */
		margin: 0.5% 0 0.5% 1% !important; /* Reduced margin from 1.5% to 1% */
		clear: none !important;
		box-sizing: border-box !important;
	}
	/* Reset ALL column rules - 3-column, 4-column, etc. */
	.span_1_of_4:nth-child(3n+1),
	.span_1_of_4:nth-child(3n+2),
	.span_1_of_4:nth-child(3n),
	.span_1_of_4:nth-child(4n+1),
	.span_1_of_4:nth-child(4n+2),
	.span_1_of_4:nth-child(4n+3),
	.span_1_of_4:nth-child(4n+4) {
		clear: none !important;
		margin-left: 1% !important; /* Reduced from 1.5% */
		margin-right: 0 !important;
	}
	/* Apply 2-column layout: every odd item (1st, 3rd, 5th, 7th...) starts new row */
	.span_1_of_4:nth-child(2n+1) {
		margin-left: 0 !important;
		margin-right: 0 !important;
		clear: left !important;
	}
	/* Every even item (2nd, 4th, 6th, 8th...) has left margin, continues row */
	.span_1_of_4:nth-child(2n) {
		margin-left: 1% !important; /* Reduced from 1.5% */
		margin-right: 0 !important;
		clear: none !important;
	}
}

/*  GO FULL WIDTH AT LESS THAN 320 PIXELS (very small phones - only for extremely narrow screens) */
@media only screen and (max-width: 320px) {
	.span_4_of_4,
	.span_3_of_4,
	.span_2_of_4,
	.span_1_of_4 {
		width: 100%;
		clear: both;
		margin-left: 0;
		margin-right: 0;
	}
	/* Reset all nth-child rules for single column layout - all items stack vertically */
	.span_1_of_4:nth-child(n) {
		margin-left: 0 !important;
		margin-right: 0 !important;
		clear: both !important;
	}
}