.md-block {
	color: #911;
}

/* Fifty Fifty */

.md-fifty-fifty {
	position: relative;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	width: 100%;
	padding: 0;
	margin: 0;
}


.md-ff-inline-block {
	margin: 2rem 0;
	padding: 0;
}

.md-ff-box {
	width: 50%;
	height: auto;
	padding: 0;
	margin: 0;
}

.md-ff-cover {
	position: relative;
	width: calc(50% - 0.5em);
	height: auto;
	clip-path: border-box;
	padding: 0;
	margin: 0;
}

.md-ff-cover img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

@media only screen and (max-width: 775px ) {
	.md-fifty-fifty {
		flex-direction: column;
		justify-content: flex-start;
	}
	.md-ff-box {
		width: 100%;
	}

}

/* MD Fifty Fifty Grid — Backwards-Compatible Core */
.md-ff-grid {
  position: relative;
  display: grid;
  grid-template-columns: var(--md-ff-columns, 50% 50%);
  grid-template-rows: auto;
  gap: var(--md-ff-gap, 0);
  width: 100%;
}

.md-ffg-1,
.md-ffg-2 {
  position: relative;
}

.md-ffg-1 { grid-column: 1 / 2; }
.md-ffg-2 { grid-column: 2 / 3; }

@media (max-width: 775px) {
  .md-ff-grid {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
  }

  .md-ffg-1 {
    grid-column: 1 / -1;
    grid-row: 1;
  }

  .md-ffg-2 {
    grid-column: 1 / -1;
    grid-row: 2;
  }
}

/* Optional opt-ins */
.md-ff-grid.is-gapmed { --md-ff-gap: 1rem; }
.md-ff-grid.is-fr     { --md-ff-columns: 1fr 1fr; }
/* Example global opt-in:
:root { --md-ff-columns: 1fr 1fr; }
*/
/*
Per Instance drop-in:
<div class="md-ff-grid" style="--md-ff-columns: 1fr 1fr; --md-ff-gap: 1rem;">
*/


/* MD Sixty Forty */

.md-sixty-fourty, /* deprecated */
.md-sixty-forty {
	position: relative;
	box-sizing: border-box;
	display: flex;
	flex-direction: row;
	margin: 0;
	padding: 0;
}

.md-sf-block {
	margin-top: 2em;
	margin-bottom: 2em;
}

.md-sf-sixty {
	width: 60%;
}

.md-sf-fourty, /* deprecated */
.md-sf-forty {
	width: 40%;
}

@media only screen and (max-width: 775px ) {
	.md-sixty-fourty, /* deprecated */
	.md-sixty-forty {
		flex-direction: column;
		justify-content: flex-start;
	}
	.md-sf-sixty, /* deprecated */
	.md-sf-fourty,
	.md-sf-forty {
		width: 100%;
	}

}

/* MD Sixty Forty Grid — Backwards-Compatible Core */

.md-sf-grid {
  position: relative;
  display: grid;
  grid-template-columns: var(--md-sf-columns, 60% 40%);
  grid-template-rows: auto;
  gap: var(--md-sf-gap, 0);
  width: 100%;
}

.md-sfg-sixty,
.md-sfg-forty {
  position: relative;
}

.md-sfg-sixty { grid-column: 1 / 2; }
.md-sfg-forty { grid-column: 2 / 3; }

@media (max-width: 775px) {
  .md-sf-grid {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
  }

  .md-sfg-sixty {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .md-sfg-forty {
    grid-column: 1 / -1;
    grid-row: 1;
  }
}

/* Optional opt-ins */
.md-sf-grid.is-gapmed { --md-sf-gap: 1rem; }
.md-sf-grid.is-fr     { --md-sf-columns: 3fr 2fr; }
/* Example global opt-in:
:root { --md-sf-columns: 3fr 2fr; }
*/
/*
Per Instance drop-in:
<div class="md-sf-grid" style="--md-sf-columns: 3fr 2fr; --md-sf-gap: 1rem;">
*/


/* MD Thirds */

.md-thirds {
	position: relative;
	display: flex;
	flex-direction: row;
	width: 100%;
	justify-content: space-between;
}
.md-3rd {
	position: relative;
	width: 33.33%;
}
.md-2-3rds {
	position: relative;
	width: 66.67%;
}

@media only screen and (max-width: 775px ) {
	.md-thirds {
		flex-direction: column;
		justify-content: flex-start;
	}
	.md-3rd,
	.md-2-3rds {
		width: 100%;
	}

}

/* MD Thirds Grid — Backwards-Compatible Core */
.md-thirds-grid {
  display: grid;
  grid-template-columns: var(--md-thirds-columns, 33.333% 33.333% 33.333%);
  gap: var(--md-thirds-gap, 0);
  grid-auto-flow: var(--md-thirds-flow, row);
  width: 100%;
}

.md-thirds-grid .md-3rd,
.md-thirds-grid .md-2-3rds,
.md-thirds-grid .md-2-3rd {
  position: relative;
  width: 100%;
}

.md-thirds-grid .md-2-3rds,
.md-thirds-grid .md-2-3rd {
  grid-column: span 2;
}

.md-thirds-grid .md-3rd-square { aspect-ratio: 1 / 1; }

.md-thirds-grid .md-3rd-centered {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.md-thirds-grid .md-3rd-centered img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 1em;
}

@media (max-width: 775px) {
  .md-thirds-grid { grid-template-columns: 1fr; }
  .md-thirds-grid .md-3rd,
  .md-thirds-grid .md-2-3rds,
  .md-thirds-grid .md-2-3rd { grid-column: span 1; }
  .md-thirds-grid .md-3rd-square { aspect-ratio: auto; }
}

/* Optional opt-ins */
.md-thirds-grid.is-dense { --md-thirds-flow: row dense; }
.md-thirds-grid.is-autofit { --md-thirds-columns: repeat(auto-fit, minmax(0, 1fr)); }
/* Global opt-in example:
:root { --md-thirds-columns: repeat(3, minmax(0, 1fr)); }
*/
/* or per instance:
<div class="md-thirds-grid" style="--md-thirds-columns: repeat(3, minmax(0, 1fr));"></div>
*/


/* MD Fourths */

.md-fourths {
	position: relative;
	display: flex;
	flex-direction: row;
	width: 100%;
	justify-content: space-between;
}
.md-4th {
	position: relative;
	width: 25%;
}
.md-2-4ths {
	position: relative;
	width: 50%;
}
.md-3-4ths {
	position: relative;
	width: 75%;
}

@media only screen and (max-width: 775px ) {
	.md-fourths {
		flex-direction: column;
		justify-content: flex-start;
	}
	.md-4th,
	.md-2-4ths,
	.md-3-4ths {
		width: 100%;
	}

}

/* images */

.md-cover {
	overflow: hidden;
}

.md-cover-5-4 {
	display: flex;
	aspect-ratio: 5 / 4; 
}

.md-cover img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.md-img-fit img,
.md-img-fit > a > img {
	object-fit: contain;
	width: 100%;
	height: auto;
}

.md-img-rounded {
	padding: 0.5em;
}

.md-img-rounded img,
.md-rounded {
	border-radius: 0.5em;
}

/* text */

.md-txt-center {
	text-align: center;
	padding-right: 2em;
	padding-left: 2em;
}

.md-txt-left {
	padding-right: 2em;
}
.md-txt-right {
	padding-left: 2em;
}

@media only screen and (max-width: 775px) {
	.md-txt-left,
	.md-txt-right,
	.md-txt-center {
		padding-top: 0;
		padding-right: 0;
		padding-bottom: 0;
		padding-left: 0;
	}
}

/* reverses */

.md-row-rev {
	flex-direction: row-reverse;
}

@media only screen and (max-width: 775px) {
	.md-row-rev {
		flex-direction: column;
	}
	
}


/* EOF */