/*=============================
  Grid
=============================*/

.grid {
  display: grid;
  gap: var(--Layout-Gutter, 32px);
  width: 100%;
}

.grid_small_1-1 {
  grid-template-columns: 1fr 1fr;
}


.contains{
	container-type: inline-size;
 }
 

@container (min-width: 700px) {

	.grid_1-1 {
		grid-template-columns: 1fr 1fr;
	  }
	
	
	  .grid_1-1-1 {
		grid-template-columns: 1fr 1fr;
	  }

	  .grid_1-2 {
		grid-template-columns: 1fr 2fr;
	  }

	  .grid_6-4{
		grid-template-columns: 6fr 4fr;
	  }
	
}

@container (min-width: 992px) {
	.grid_1-1 {
		grid-template-columns: 1fr 1fr;
	  }
	
	  .grid_2-1 {
		grid-template-columns: 2fr 1fr;
	  }
	
	  .grid_1-1-1 {
		grid-template-columns: 1fr 1fr 1fr;
	  }
	
}

.d_flex{
	display: flex;
}

.justify_centre{
	justify-content: center;
}

.d_flex_col{
	display: flex;
	flex-direction: column;
	gap: var(--gap);
}

.gap_1{
	gap: 1rem;
}

.align_centre{
	align-items: center;
}

.centred_panel{
	display: grid;
	width: 100%;
}

@container (min-width: 992px) {
	.centred_panel{
		grid-template-columns: 2fr 8fr 2fr;
	}
}