:root {
  /* small spacer */
  --spacing-sm-xs: 4px;
  --spacing-sm-sm: 5px;
  --spacing-sm-md: 6px;
  --spacing-sm-lg: 7px;
  /* medium spacer */
  --spacing-md-xs: 18px;
  --spacing-md-sm: 20px;
  --spacing-md-md: 22px;
  --spacing-md-lg: 24px;
  /* large spacer */
  --spacing-lg-xs: 28px;
  --spacing-lg-sm: 36px;
  --spacing-lg-md: 42px;
  --spacing-lg-lg: 50px;
  --framed-outer-percentage: 0.2;
  --framed-inner-percentage: calc(1 - var(--framed-outer-percentage));

  --spacing-sm: var(--spacing-sm-xs);
  --spacing-md: var(--spacing-md-xs);
  --spacing-lg: var(--spacing-lg-xs);

  --image-size-md-xs: 60px;
  --image-size-md-sm: 66px;
  --image-size-md-md: 72px;
  --image-size-md-lg: 80px;
  --image-size-md: var(--image-size-md-xs);

  /*
   * breakpoints
   * sm: 450px
   * md: 800px
   * lg: 1024px
   */
  --max-width-xs: calc(450px - 2 * var(--spacing-md-sm));
  --max-width-sm: calc(800px - 4 * var(--spacing-md-md));
  --max-width-md: calc(1024px - 6 * var(--spacing-md-lg));
  --max-width-lg: 1200px;
  --max-width: var(--max-width-xs);

  --border-radius-sm: 5px;
  --border-radius-lg: 15px;
}

@media only screen and (min-width: 450px) {
  :root {
    --spacing-sm: var(--spacing-sm-sm);
    --spacing-md: var(--spacing-md-sm);
    --spacing-lg: var(--spacing-lg-sm);
    --max-width: var(--max-width-sm);
    --image-size-md: var(--image-size-md-sm);
  }
}

@media only screen and (min-width: 800px) {
  :root {
    --spacing-sm: var(--spacing-sm-md);
    --spacing-md: var(--spacing-md-md);
    --spacing-lg: var(--spacing-lg-md);
    --max-width: var(--max-width-md);
    --image-size-md: var(--image-size-md-md);
  }
}

@media only screen and (min-width: 1024px) {
  :root {
    --spacing-sm: var(--spacing-sm-lg);
    --spacing-md: var(--spacing-md-lg);
    --spacing-lg: var(--spacing-lg-lg);
    --max-width: var(--max-width-lg);
    --image-size-md: var(--image-size-md-lg);
  }
}

/* reset */
* {
	box-sizing: border-box;
}

html, body, header, nav, main, footer, section, div, article, span, p, ul, li, blockquote {
    border-width: 0; 
    margin: 0;
    padding: 0;
}

header {
	padding-top: var(--spacing-md);
	padding-bottom: var(--spacing-md);
}

footer {
	padding-top: var(--spacing-md);
	padding-bottom: var(--spacing-md);
}

blockquote {
	width: 100%;
	padding-bottom: var(--spacing-md);
}

blockquote > span {
	display: block;
}

blockquote .quote {
/*	border-radius: var(--border-radius-lg);*/
/*	display: inline-block;*/
	background-repeat: no-repeat;
	background-position: bottom left;
	background-size: var(--image-size-md);
	padding: var(--spacing-md);
}

blockquote .name {
	padding-top: var(--spacing-md);
}


.container {
/*	border: 1px solid green;*/
	display: flex;
	flex-direction: column;
/*	gap: var(--spacing-md);*/
	row-gap: var(--spacing-md);
	flex-wrap: wrap;
	margin-left: auto;
	margin-right: auto;
	max-width: var(--max-width);
}

.divider,
.content-divider > div {
	border-top-width: 2px;
	border-top-style: solid;
}

.content-divider {
	margin-left: auto;
	margin-right: auto;
	max-width: var(--max-width);
	padding-left: var(--spacing-md);
	padding-right: var(--spacing-md);
}

.padded {
	padding-top: var(--spacing-md);
	padding-bottom: var(--spacing-md);
}

.padded-top {
	padding-top: var(--spacing-md);
}

.padded-bottom {
	padding-bottom: var(--spacing-md);
}

.extra-padded {
	padding-top: var(--spacing-lg);
	padding-bottom: var(--spacing-lg);
}

.extra-padded-top {
	padding-top: var(--spacing-lg);
}

.extra-padded-bottom {
	padding-bottom: var(--spacing-lg);
}

.content {
	display: flex;
	padding-left: var(--spacing-md);
	padding-right: var(--spacing-md);
}

/*.content > a,*/ /* for clickable cards */
.content > div {
/*	border: 1px solid yellow;*/
	display: block;
	width: 100%;
}

.content.framed > div {
	padding: var(--spacing-md);
	border-radius: var(--border-radius-sm);
}

.one-column img,
.two-columns img,
.three-columns img,
.four-columns img {
	/*
	Scale the image when part of the main content
	*/
	width: 100%;
}

.one-column .content,
.two-columns .content,
.three-columns .content,
.four-columns .content {
	flex-basis: 100%;
}

.content img {
	margin-top: var(--spacing-md);
	margin-bottom: var(--spacing-md);
}

.fixed-height-md {
	height: var(--image-size-md);
}

@media only screen and (min-width: 450px) {
    .container,
    .content-divider {
		width: calc(100vw - 2 * var(--spacing-md));
    }
	.four-columns {
		flex-direction: row;
	}
	.four-columns .content {
		flex-basis: 50%;
	}
}

@media only screen and (min-width: 800px) {
    .container,
    .content-divider {
		width: calc(100vw - 4 * var(--spacing-md));
    }
	.two-columns,
	.three-columns {
		flex-direction: row;
	}
	.two-columns .content,
	.three-columns .content {
		flex-basis: 50%;
	}
}

@media only screen and (min-width: 1024px) {
    .container,
    .content-divider {
		width: calc(100vw - 6 * var(--spacing-md));
    }
	.three-columns .content {
		flex-basis: 33.33%;
	}
	.four-columns .content {
		flex-basis: 25%;
	}
}