/*  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; }


.align-center{
  align-items: center;
}




/*  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: 20px; /* 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. */
}


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

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

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