CSS for Upcoming Shows panel + css variables

upcoming-shows-bear-tooth.css

@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro);
:root {
  --page-background-color: $white-hsl;
  --xl-screen-background-color: $black-hsl;
  --content-text-color: $black-hsl;
  --accent-color: $gray-hsl;
  --error-color: $red-hsl;
  --body-font: "Helvetica Neue", "Helvetica", "Arial", sans-serif;
  --body-font-size: 20;
  --menu-font: var(--body-font);
  --top-menu-font-size: var(--body-font-size);
  --sidebar-font-size: var(--body-font-size);
  --footer-font-size: var(--body-font-size);
  --h1-font: var(--body-font);
  --h1-font-size: 40;
  --h1-font-color: var(--content-text-color);
  --h2-font: var(--body-font);
  --h2-font-size: 30;
  --h2-font-color: var(--content-text-color);
  --h3-font: var(--body-font);
  --h3-font-size: 24;
  --h3-font-color: var(--content-text-color);
  --h4-font: var(--body-font);
  --h4-font-size: 20;
  --h4-font-color: var(--content-text-color);
  --rs-title-font-size: var(--h2-font-size);
  --sidebar-background-color: $black-hsl;
  --sidebar-text-color: $white-hsl;
  --sidebar-active-item-background-color: $gray-hsl;
  --sidebar-active-item-text-color: $white-hsl;
  --dropdown-menu-background-color: var(--sidebar-background-color);
  --dropdown-menu-text-color: var(--sidebar-text-color);
  --showtime-button-background-color: $black-hsl;
  --showtime-button-text-color: $white-hsl;
  --showtime-button-border-color: $black-hsl;
  --cta-button-background-color: var(--accent-color);
  --cta-button-text-color: $white-hsl;
  --cta-button-border-color: $black-hsl;
  --button-border-radius: 0;
  --button-border-width: 0;
  --footer-background-color: $black-hsl;
  --footer-text-color: $white-hsl;
  --speed-1: 0.2s;
  --speed-2: 0.4s;
  --speed-3: 0.8s;
  --speed-4: 1.0s;
  --layer-1: 10;
  --layer-2: 20;
  --layer-3: 30;
  --layer-4: 40;
  --layer-5: 50;
  --layer-6: 60;
  --gap-unit: 0.25rem;
  --gap-1: calc(1 * var(--gap-unit));
  --gap-2: calc(2 * var(--gap-unit));
  --gap-3: calc(3 * var(--gap-unit));
  --gap-4: calc(4 * var(--gap-unit));
  --gap-5: calc(5 * var(--gap-unit));
  --gap-6: calc(6 * var(--gap-unit));
  --gap-7: calc(7 * var(--gap-unit));
  --gap-8: calc(8 * var(--gap-unit));
  --gap-9: calc(9 * var(--gap-unit));
  --gap-10: calc(10 * var(--gap-unit));
  --max-panel-width: 85.625rem;
  --max-panel-width-three-in-row: 75rem;
  --max-panel-width-four-in-row: 90rem;
  --admin-bar-height: 32px;
}

/** Button Style **/
a.outline-btn {
	font-family: 'Roboto Slab', serif;
	display: inline-block;
	margin: 0;
	min-height: 36px;
	border: 1px solid #fff;
	color: #fff;
	text-align: center;
	font-weight: bold;
	font-size: 12px;
	line-height: 36px;
	letter-spacing: 0.1em;
	padding: 0 20px;
	position: relative;
	cursor: pointer;
	text-transform: uppercase;
}

a.outline-btn:hover,
a.outline-btn:focus-visible,
a.outline-btn.focus-visible {
	background: #fff;
	color: #000d34;
	border: 1px solid #fff;
}


/*
 * Page Template: Flexible Template
 */
.panels {
	display: flex;
	flex-flow: column nowrap;
	min-height: 100%;
	width: 100%;
}

/**
 * Generic/shared panel styles.
 */
.panel {
	background: var(--panel-background-color);
	color: var(--panel-text-color);
	display: flex;
	flex-flow: column wrap;
	max-width: 100% !important;
	overflow: hidden;
	padding: var(--gap-6) var(--gap-4);
	position: relative;
	width: 100%;
}

@media (min-width: 667px) {
	.panel {
		flex-flow: row nowrap;
		padding: var(--gap-8) var(--gap-6);
	}
}

.panel .panel__title,
.panel h2.panel__title {
	color: var(--panel-text-color);
	margin: 0;
	padding: 0;
}

.panel .panel__intro, .panel h2.panel__title {
	text-align: center;
}

.panel__subtitle p {
	margin: 0;
}

.panel__see-all {
	color: var(--panel-text-color);
	display: flex;
	flex-flow: row wrap;
	justify-content: flex-start;
	line-height: 1;
	padding: 0;
	text-align: left;
	text-decoration: none !important;
	transition: all var(--speed-2) ease-in-out;
	width: 100%;
}

@media (min-width: 667px) {
	.panel__see-all {
		justify-content: flex-end;
		text-align: right;
	}
}

.panel__see-all a {
	align-items: center;
	color: var(--panel-text-color);
	display: flex;
	flex: 0 auto;
	flex-flow: row wrap;
	gap: var(--gap-2);
	text-decoration: none !important;
	white-space: nowrap;
}

.panel__see-all a:hover {
	color: var(--accent-color);
	text-decoration: none !important;
}

.panel__see-all span {
	flex: 1;
}

.panel__see-all svg {
	fill: currentColor;
	flex: 1;
	line-height: 1;
	width: 2rem;
}


/*
 * Panel: "Upcoming Shows"
 */
.panel[data-type="upcoming-shows"] {
  flex-flow: column nowrap;
  gap: var(--gap-6);
  height: 100%;
  --show-image-max-height: 72vw;
  margin: 0 auto;
  place-content: center;
}
@media (min-width: 667px) {
  .panel[data-type="upcoming-shows"] {
    --show-image-max-height: 66vw;
  }
}
@media (min-width: 768px) {
  .panel[data-type="upcoming-shows"] {
    --show-image-max-height: 32vw;
  }
}
@media (min-width: 1425px) {
  .panel[data-type="upcoming-shows"] {
    --show-image-max-height: 28vw;
  }
}
.panel[data-type="upcoming-shows"] .panel__intro {
  column-gap: var(--gap-6);
  display: grid;
  grid-template-areas: "title" "subtitle" "see-all";
  max-width: var(--max-panel-width) !important;
  row-gap: 0;
  width: 100%;
}
.panel[data-type="upcoming-shows"] .panel__title {
  grid-area: title;
}
.panel[data-type="upcoming-shows"] .panel__see-all {
  align-content: center;
  grid-area: see-all;
  margin-top: var(--gap-4);
  place-items: center;
}
@media (min-width: 667px) {
  .panel[data-type="upcoming-shows"] .panel__see-all {
    margin-top: 0;
  }
}
.panel[data-type="upcoming-shows"] .panel__subtitle {
  grid-area: subtitle;
  margin-top: var(--gap-4);
  padding: 0;
  width: 100%;
}
.panel[data-type="upcoming-shows"] .shows {
  align-content: center;
  display: flex;
  flex: 1 1 100%;
  flex-flow: row wrap;
  gap: var(--gap-6);
  height: 100%;
  justify-content: flex-start;
  margin: 0;
  max-width: var(--max-panel-width) !important;
  width: 100%;
}
.panel[data-type="upcoming-shows"] .show {
  display: grid;
  flex: 1 0 auto;
  margin: 0;
  position: relative;
  width: 100%;
}
.panel[data-type="upcoming-shows"] .show .show-link {
  display: grid;
  flex: 1 0 auto;
  grid-auto-rows: auto 1fr;
  grid-template-areas: "image" "details";
  margin: 0;
  max-width: 100%;
  min-height: 18vw;
  overflow: hidden;
  position: relative;
  text-decoration: none !important;
  width: 100%;
}
.panel[data-type="upcoming-shows"] .show .show-link:hover:before, .panel[data-type="upcoming-shows"] .show .show-link:focus:before, .panel[data-type="upcoming-shows"] .show .show-link:focus-within:before, .panel[data-type="upcoming-shows"] .show .show-link:focus-visible:before, .panel[data-type="upcoming-shows"] .show .show-link.focus-visible:before {
  box-shadow: inset 0 0 0 100vw var(--show-hover-background-color);
  content: "";
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: var(--layer-2);
}
.panel[data-type="upcoming-shows"] .show__image {
  grid-area: image;
  height: 100%;
  max-height: var(--show-image-max-height);
  width: 100%;
  position: relative;
}
.panel[data-type="upcoming-shows"] .show__image img {
  height: 100%;
  object-fit: cover;
  object-position: top;
  width: 100%;
}
.panel[data-type="upcoming-shows"][data-max-shows="2"] .show__image img {
  aspect-ratio: 1.7777777778;
}
.panel[data-type="upcoming-shows"][data-max-shows="3"] .show__image img {
  aspect-ratio: 1.45;
}
.panel[data-type="upcoming-shows"][data-max-shows="4"] .show__image img {
  aspect-ratio: 1.45;
}
.panel[data-type="upcoming-shows"] .show__details {
  background: var(--show-details-background-color);
  color: var(--show-details-text-color);
  display: flex;
  flex-flow: column nowrap;
  grid-area: details;
  height: 100%;
  justify-content: flex-start;
  padding: var(--gap-3);
  place-items: center;
  width: 100%;
}
.panel[data-type="upcoming-shows"] .show__details * {
  position: relative;
  z-index: var(--layer-1);
}
.panel[data-type="upcoming-shows"] .show__date {
  grid-area: date;
  width: 100%;
}
.panel[data-type="upcoming-shows"] .show__title {
  color: var(--show-details-text-color);
  grid-area: title;
  width: 100%;
}
.panel[data-type="upcoming-shows"][data-max-shows="1"] .show {
  width: 100%;
}
.panel[data-type="upcoming-shows"] .series__container {
  position: absolute;
  padding: var(--gap-3);
  bottom: 0;
  width: 100%;
  display: flex;
  gap: var(--gap-2);
  place-content: flex-end;
  z-index: var(--layer-1);
}
.panel[data-type="upcoming-shows"] .series__container .show__series {
  margin-left: 0;
}
@media (min-width: 667px) {
  .panel[data-type="upcoming-shows"] {
    flex-flow: column wrap;
  }
  .panel[data-type="upcoming-shows"] .panel__intro {
    grid-template-areas: "title title see-all" "subtitle subtitle subtitle";
  }
  .panel[data-type="upcoming-shows"] .show__details {
    overflow: hidden;
    padding: var(--gap-3);
  }
  .panel[data-type="upcoming-shows"][data-max-shows="2"] {
    --total-gap: calc(1 * var(--gap-6));
  }
  .panel[data-type="upcoming-shows"][data-max-shows="2"] .show {
    max-width: calc(calc(100% - var(--total-gap)) / 2);
  }
  .panel[data-type="upcoming-shows"][data-max-shows="3"] {
    --total-gap: calc(2 * var(--gap-6));
  }
  .panel[data-type="upcoming-shows"][data-max-shows="3"] .show {
    max-width: calc(calc(100% - var(--total-gap)) / 3);
  }
  .panel[data-type="upcoming-shows"][data-max-shows="4"] {
    --total-gap: calc(3 * var(--gap-6));
  }
  .panel[data-type="upcoming-shows"][data-max-shows="4"] .show {
    max-width: calc(calc(100% - var(--total-gap)) / 4);
  }
}