/*  FLEX GRID  ============================================================================= */

.grid {
  display: flex;
  gap: 20px; /* This creates a 20px gap between columns, equivalent to the previous 10px padding on each side */
}

.col {
  flex: 1;
}

/* Specific column widths for the 12-column grid */

.col-1 { flex: 1; }
.col-2 { flex: 2; }
.col-3 { flex: 3; }
.col-4 { flex: 4; }
.col-5 { flex: 5; }
.col-6 { flex: 6; }
.col-7 { flex: 7; }
.col-8 { flex: 8; }
.col-9 { flex: 9; }
.col-10 { flex: 10; }
.col-11 { flex: 11; }
.col-12 { flex: 12; }


/*  MEDIA QUERIES  ============================================================================= */

@media (max-width: 767px) {
	
	
.grid {
	display: block;
}

.grid > .col {
	/* padding-left: 0; Reset the padding on mobile. */
	/* padding-right: 0; Reset the padding on mobile. */
	 /*margin-bottom: 10px; Add a 10px margin to the bottom of each column. */
}

.grid > .col:last-child {
	margin-bottom: 0; /* Ensure the last column doesn't have a margin at the bottom. */
}


	
}


@media (max-width: 1000px) {
	
	

/* SCROLLABLE CONTENT  ============================================================================= */

.scroll {
	overflow-x: scroll;
	white-space: nowrap;
	width: auto;
	display: flex;
}

.scroll .col {
	display: block;
	width: 325px;
	flex: none;
	white-space: normal;
}	
	
	
}