.w-content {
  width: fit-content;
}

.col {
  display: flex;
  flex-direction: column;
}
.row {
  display: flex;
  flex-direction: row;
}
.wrapped {
  flex-wrap: wrap;
}


@media screen and (max-width: 40rem) { /* lg */
  .mobile-col {
    display: flex;
    flex-direction: column !important;
  }
  .mobile-row {
    display: flex;
    flex-direction: row !important;
  }
  .mobile-aspect-3-4.figure-wrapper {
    aspect-ratio: 3/4;
  }
  .mobile-aspect-3-4.figure-wrapper > figure {
    width: 100%;
	  height: 100%;
  }
  .mobile-mb-m {
    margin-bottom: var(--spacing-md);
  }
}


@media screen and (max-width: 64rem) {
	.pc-only {
		display: none !important;
	}
}

/* complement of .pc-only: hidden above the same breakpoint, left alone below it */
@media screen and (min-width: 64.01rem) {
	.mobile-only {
		display: none !important;
	}
}


.m-0 { margin: 0px !important; }
.p-0 { padding: 0px !important; }

.gap-s { gap: var(--spacing-xs); }
.gap-m { gap: var(--spacing-md); }
.gap-l { gap: var(--spacing-2xl); }

.row-gap-s { row-gap: var(--spacing-xs); }
.row-gap-m { row-gap: var(--spacing-md); }
.row-gap-l { row-gap: var(--spacing-2xl); }

.col-gap-s { column-gap: var(--spacing-xs); }
.col-gap-m { column-gap: var(--spacing-md); }
.col-gap-l { column-gap: var(--spacing-2xl); }

.m-a  { margin: auto; }
.mx-a { margin-inline: auto; }
.my-a { margin-block: auto; }
.mt-a { margin-top: auto; }
.mt-a { margin-top: auto; }
.mr-a { margin-right: auto; }
.mb-a { margin-bottom: auto; }
.ml-a { margin-left: auto; }

.m-s  { margin: var(--spacing-sm); }
.mx-s { margin-inline: var(--spacing-sm); }
.my-s { margin-block: var(--spacing-sm); }
.mt-s { margin-top: var(--spacing-sm); }
.mt-s { margin-top: var(--spacing-sm); }
.mr-s { margin-right: var(--spacing-sm); }
.mb-s { margin-bottom: var(--spacing-sm); }
.ml-s { margin-left: var(--spacing-sm); }

.m-m  { margin: var(--spacing-md); }
.mx-m { margin-inline: var(--spacing-md); }
.my-m { margin-block: var(--spacing-md); }
.mt-m { margin-top: var(--spacing-md); }
.mt-m { margin-top: var(--spacing-md); }
.mr-m { margin-right: var(--spacing-md); }
.mb-m { margin-bottom: var(--spacing-md); }
.ml-m { margin-left: var(--spacing-md); }

.m-l  { margin: var(--spacing-lg); }
.mx-l { margin-inline: var(--spacing-lg); }
.my-l { margin-block: var(--spacing-lg); }
.mt-l { margin-top: var(--spacing-lg); }
.mt-l { margin-top: var(--spacing-lg); }
.mr-l { margin-right: var(--spacing-lg); }
.mb-l { margin-bottom: var(--spacing-lg); }
.ml-l { margin-left: var(--spacing-lg); }

.p-a  { padding: auto; }
.px-a { padding-inline: auto; }
.py-a { padding-block: auto; }
.pt-a { padding-top: auto; }
.pt-a { padding-top: auto; }
.pr-a { padding-right: auto; }
.pb-a { padding-bottom: auto; }
.pl-a { padding-left: auto; }

.p-s  { padding: var(--spacing-sm); }
.px-s { padding-inline: var(--spacing-sm); }
.py-s { padding-block: var(--spacing-sm); }
.pt-s { padding-top: var(--spacing-sm); }
.pt-s { padding-top: var(--spacing-sm); }
.pr-s { padding-right: var(--spacing-sm); }
.pb-s { padding-bottom: var(--spacing-sm); }
.pl-s { padding-left: var(--spacing-sm); }

.p-m  { padding: var(--spacing-md); }
.px-m { padding-inline: var(--spacing-md); }
.py-m { padding-block: var(--spacing-md); }
.pt-m { padding-top: var(--spacing-md); }
.pt-m { padding-top: var(--spacing-md); }
.pr-m { padding-right: var(--spacing-md); }
.pb-m { padding-bottom: var(--spacing-md); }
.pl-m { padding-left: var(--spacing-md); }

.p-l  { padding: var(--spacing-lg); }
.px-l { padding-inline: var(--spacing-lg); }
.py-l { padding-block: var(--spacing-lg); }
.pt-l { padding-top: var(--spacing-lg); }
.pt-l { padding-top: var(--spacing-lg); }
.pr-l { padding-right: var(--spacing-lg); }
.pb-l { padding-bottom: var(--spacing-lg); }
.pl-l { padding-left: var(--spacing-lg); }


.max-lines-1, .max-lines-2, .max-lines-3, .max-lines-4, .max-lines-5 {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
}
.max-lines-1 {
  -webkit-line-clamp: 1;
  line-clamp: 1;
}
.max-lines-2 {
  -webkit-line-clamp: 2;
  line-clamp: 2;
}
.max-lines-3 {
  -webkit-line-clamp: 3;
  line-clamp: 3;
}
.max-lines-4 {
  -webkit-line-clamp: 4;
  line-clamp: 4;
}
.max-lines-5 {
  -webkit-line-clamp: 5;
  line-clamp: 5;
}
.font-thin {
  font-weight: 200;
}
.tabular-nums {
  font-variant-numeric: tabular-nums;
}


.grid { display: grid; }

.table {
  display: grid;
  width: 100%;
}
.table__row,
.table__header {
  display: grid;
  grid-column: 1/-1;
  grid-template-columns: subgrid;
  border-bottom: 1px solid var(--secondColor);
}
.table__header {
  font-weight: 600;
}
.table__cell {
  padding: 0.15em 0.3em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}