@import 'https://fonts.googleapis.com/css2?family=Farro:wght@400;500&family=Syne&display=swap';
@font-face {
  font-family: "Baloo 2";
  font-style: normal;
  font-weight: normal;
  src: local("Baloo 2 Regular"), local("Baloo-2-Regular"), url("../fonts/baloo-2-v1-latin-regular.woff2") format("woff2");
  font-display: swap;
}
@font-face {
  font-family: "Baloo 2";
  font-style: normal;
  font-weight: 500;
  src: local("Baloo 2 Medium"), local("Baloo-2-Medium"), url("../fonts/baloo-2-v1-latin-500.woff2") format("woff2");
  font-display: swap;
}
/*
 * [Modified] Modern CSS Reset
 * @link https://github.com/hankchizljaw/modern-css-reset
*/
/* Box sizing rules */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Remove default margin */
body,
h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
}

p,
li,
h1,
h2,
h3,
h4 {
  word-break: break-word;
}

html,
body {
  overflow-x: hidden;
}

html {
  scroll-behavior: smooth;
}

/* Set core body defaults */
body {
  min-height: 100vh;
  font-family: sans-serif;
  font-size: 100%;
  line-height: 1.5;
  text-rendering: auto;
}

/* Make images easier to work with */
img {
  display: block;
  max-width: 100%;
  height: auto;
}

figure {
  margin: 0;
}

/* Inherit fonts for inputs and buttons */
input,
button,
textarea,
select {
  font: inherit;
}

/* Remove all animations and transitions for people that prefer not to see them */
@media (prefers-reduced-motion: reduce) {
  *,
*::before,
*::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  html {
    scroll-behavior: initial;
  }
}
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background-color: #f9f9f9;
  color: rgb(7, 7, 7);
  font-family: "Farro", sans-serif;
}

footer {
  margin-top: auto;
  font-family: "Syne", sans-serif;
  text-transform: lowercase;
  box-shadow: 0px -1px 6px rgba(0, 0, 0, 0.1607843137);
}
footer p {
  font-size: 0.8rem;
}

article {
  margin-top: 2rem;
  max-width: 100%;
}
article > img {
  margin-right: auto;
  margin-left: auto;
}
article header {
  margin-bottom: 3rem;
}

.tdbc-container {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 120ch;
  margin-right: auto;
  margin-left: auto;
  padding: 2rem 1rem;
}
.tdbc-container-essay {
  max-width: 80ch;
}

.tdbc-column-container-artist {
  grid-template-columns: repeat(auto-fit, minmax(300px, calc(50% - 1em)));
  display: grid;
  grid-gap: 2em;
}
.tdbc-column-container-artist.wide {
  grid-template-columns: repeat(auto-fit, minmax(550px, 1fr));
}

.tdbc-column-container {
  grid-template-columns: repeat(auto-fit, minmax(300px, 362px));
  display: grid;
  grid-gap: 2em;
}
.tdbc-column-container.wide {
  grid-template-columns: repeat(auto-fit, minmax(550px, 1fr));
}

.tdbc-two-column-container {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  display: grid;
  grid-gap: 2em;
}

@media screen and (min-width: 1024px) {
  .tdbc-two-column-container {
    grid-template-columns: repeat(auto-fit, minmax(550px, 1fr));
  }
}
ul.tdbc-column-container {
  padding-left: 0;
}

.tdbc-section {
  width: 100%;
}
.tdbc-section--padded {
  padding-top: 10vh;
  padding-bottom: 10vh;
}
.tdbc-section *:last-child {
  margin-bottom: 0;
}

.tdbc-hero {
  display: grid;
  padding-top: 3rem;
  padding-bottom: 3rem;
  text-align: left;
}
.tdbc-hero .tdbc-container {
  padding-top: 0;
  padding-bottom: 0;
}
.tdbc-hero h1 {
  font: normal normal normal 24px/24px Syne;
  color: rgb(7, 7, 7);
}

.tdbc-row {
  display: grid;
  grid-gap: 1rem;
}
@media (min-width: 80ch) {
  .tdbc-row {
    grid-auto-flow: column;
    grid-auto-columns: max-content;
  }
}
.tdbc-row--center-content {
  justify-content: center;
}
.tdbc-row--center-alignitems {
  align-items: center;
}

hr {
  margin-top: 4rem;
  margin-bottom: 4rem;
  border: 1px solid #db0a76;
}

#tdbc-siteid {
  font-family: "Syne", sans-serif;
  font-size: 1.5rem;
  text-decoration: none;
  color: #CE5656;
}

.tdbc-sitenav {
  background-color: #fff;
  color: rgb(7, 7, 7);
  display: flex;
  justify-content: center;
  padding: 1rem 0;
}
.tdbc-sitenav__container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
.tdbc-sitenav__navlist {
  display: flex;
  flex-wrap: nowrap;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-top: 15ch;
}
@media screen and (min-width: 768px) {
  .tdbc-sitenav__navlist {
    margin-top: initial;
    flex-direction: row;
    flex-wrap: wrap;
  }
}
.tdbc-sitenav__container {
  justify-content: space-between;
  width: 100%;
  max-width: 120ch;
  margin: 0 auto;
  padding: 0.25rem 0.5rem;
}
.tdbc-sitenav__container .collapse {
  margin-right: -15px;
  margin-left: -15px;
  padding-right: 15px;
  padding-left: 15px;
  border-top: 1px solid transparent;
  box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.1);
  display: none;
  transition: all 0.3s;
  position: relative;
}
@media screen and (min-width: 768px) {
  .tdbc-sitenav__container .collapse {
    box-shadow: none;
  }
}
.tdbc-sitenav__container .collapse.in {
  background-color: #fff;
  overflow-y: auto;
  overflow-x: hidden;
  display: block;
  transition: all 0.3s;
  position: absolute;
  top: 55px;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 25;
}
@media screen and (min-width: 768px) {
  .tdbc-sitenav__container .collapse {
    display: flex;
    height: auto;
    padding-bottom: 0;
    overflow: visible;
    margin-right: 0;
    margin-left: 0;
  }
}
.tdbc-sitenav__navlist {
  font-family: "Syne", sans-serif;
  text-transform: uppercase;
}
.tdbc-sitenav__navlist li {
  margin-bottom: 2ch;
}
@media screen and (min-width: 768px) {
  .tdbc-sitenav__navlist li {
    margin-bottom: 0;
  }
}
.tdbc-sitenav__navlist li + li {
  margin-left: 0;
  margin-bottom: 2ch;
}
@media screen and (min-width: 768px) {
  .tdbc-sitenav__navlist li + li {
    margin-bottom: 0;
    margin-left: 1.5rem;
  }
}
.tdbc-sitenav,
.tdbc-sitenav a:not(.tdbc-button) {
  color: rgb(7, 7, 7);
}
.tdbc-sitenav a:not(.tdbc-button):focus {
  border-radius: 4px;
  outline-color: transparent;
  outline-style: solid;
  box-shadow: 0 0 1px 2px #fff;
}
.tdbc-sitenav .navbar-toggle {
  background-color: #fff;
  position: relative;
  float: left;
  padding: 9px 10px 4px;
  margin-top: 8px;
  margin-bottom: 8px;
  margin-right: 15px;
  border-radius: 4px;
  border: 1px solid #CE5656;
}
.tdbc-sitenav .navbar-toggle .icon-bar {
  background-color: #CE5656;
  display: block;
  width: 22px;
  height: 2px;
  border-radius: 1px;
  margin-bottom: 5px;
}
.tdbc-sitenav .navbar-toggle .icon-bar :last-child {
  margin-bottom: 0;
}
@media screen and (min-width: 768px) {
  .tdbc-sitenav .navbar-toggle {
    display: none;
  }
}

.pagination a.active {
  color: #db0a76;
  font-weight: 500;
  text-decoration: none;
}

h1,
.tdbc-h1 {
  font-weight: 500;
  line-height: 1.15;
  margin-bottom: 0.65em;
}

h2,
.tdbc-h2 {
  font-weight: 500;
  line-height: 1.15;
  margin-bottom: 0.65em;
}

h3,
.tdbc-h3 {
  font-weight: 500;
  line-height: 1.15;
  margin-bottom: 0.65em;
}

h4,
.tdbc-h4 {
  font-weight: 500;
  line-height: 1.15;
  margin-bottom: 0.65em;
}

h1,
.tdbc-h1 {
  font-size: 4.2rem;
  font-size: min(max(2.7rem, 5vw), 4.2rem);
}

h2,
.tdbc-h2 {
  font-size: 2rem;
  font-size: min(max(1.5rem, 5vw), 2rem);
}

h3,
.tdbc-h3 {
  font-size: 1.5rem;
}

h4,
.tdbc-h4 {
  font-size: 1.15rem;
  color: #555555;
}

p,
li {
  font-size: 1.15rem;
}

p {
  margin: 0 0 1rem;
  font: normal normal normal 18px/24px Syne;
}

article > ul > li + li,
article > ol > li + li {
  margin-top: 1rem;
}
article * + h2 {
  margin-top: 4rem;
}
article * + h3 {
  margin-top: 2rem;
}

strong {
  font-weight: 500;
}

a:not(.tdbc-button) {
  color: #CE5656;
}

code:not([class*=language]) {
  display: inline-flex;
  padding: 0.15em;
  background-color: #fff;
  color: #555555;
  font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
  border: 1px solid #aaaaaa;
  border-radius: 2px;
  font-size: 0.75em;
  line-height: 1.1;
}

pre code:not([class*=language]) {
  width: 100%;
  max-width: calc(100vw - 2rem);
  overflow-x: auto;
}

blockquote {
  margin-left: 0;
  margin-right: 0;
  padding-left: 1.5rem;
  border-left: 2px solid #db0a76;
  color: #555555;
}
blockquote,
blockquote p {
  font-size: 1.15rem;
}
blockquote + * {
  margin-top: 3rem;
}
blockquote :last-child {
  margin-bottom: 0;
}

.tdbc-lead {
  font-size: 1.35rem;
  letter-spacing: 0.01em;
  margin-bottom: 1em;
  line-height: 1.3;
}

.tdbc-list-unstyled {
  list-style: none;
  padding: 0;
}

hr.wp-block-separator {
  margin: 8rem auto;
  color: #555555;
  width: calc(100% - 4rem);
  max-width: 58rem;
  background: linear-gradient(to left, currentColor calc(50% - 16px), transparent calc(50% - 16px), transparent calc(50% + 16px), currentColor calc(50% + 16px));
  background-color: transparent !important;
  border: none;
  height: 0.1rem;
  overflow: visible;
  position: relative;
}
hr.wp-block-separator::before {
  background: currentColor;
  content: "";
  display: block;
  height: 1.6rem;
  position: absolute;
  top: calc(50% - 0.8rem);
  left: calc(50% - 0.5rem);
  transform: rotate(22.5deg);
  width: 0.1rem;
}
hr.wp-block-separator::after {
  background: currentColor;
  content: "";
  display: block;
  height: 1.6rem;
  position: absolute;
  top: calc(50% - 0.8rem);
  right: calc(50% - 0.5rem);
  transform: rotate(22.5deg);
  width: 0.1rem;
}

.tdbc-button {
  display: inline-flex;
  align-items: center;
  align-self: start;
  justify-content: center;
  min-width: 10ch;
  min-height: 44px;
  padding: 0.25em 1em;
  transition: 180ms ease-in-out;
  transition-property: background, border;
  border-radius: 4px;
  background-color: #CE5656;
  color: #fff;
  font-size: 1.125rem;
  line-height: 1.1;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}
@media screen and (-ms-high-contrast: active) {
  .tdbc-button {
    border: 2px solid currentColor;
  }
}
.tdbc-button:focus {
  outline-color: transparent;
  outline-style: solid;
  box-shadow: 0 0 0 3px #9e2e2e;
}
.tdbc-button--small {
  min-height: 34px;
  font-size: 1rem;
}
.tdbc-button--center {
  align-self: center;
  margin-right: auto;
  margin-left: auto;
}
.tdbc-button__icon {
  width: 1.5em;
  height: 1.5em;
  margin-right: 0.25em;
}
.tdbc-button__icon--end {
  margin-right: 0;
  margin-left: 0.25em;
}
.tdbc-button__icon svg {
  width: 100%;
  height: 100%;
  fill: currentColor;
}
.tdbc-button-outlined {
  border: 2px solid #CE5656;
  background-color: transparent;
  color: #CE5656;
}
.tdbc-button-outlined:hover, .tdbc-button-outlined:focus {
  background-color: #f5dddd;
}
.tdbc-button--secondary {
  background-color: #db0a76;
}
.tdbc-button--secondary:focus {
  box-shadow: 0 0 0 3px #990753;
}
.tdbc-button-outlined--secondary {
  border-color: #f842a0;
  color: #db0a76;
}
.tdbc-button-outlined--secondary:focus {
  box-shadow: 0 0 0 3px #990753;
}
.tdbc-button-outlined--secondary:hover, .tdbc-button-outlined--secondary:focus {
  background-color: #fee4f1;
}
.tdbc-button--light {
  background-color: #fff;
  color: rgba(0, 0, 0, 0.87);
}
.tdbc-button--light:focus {
  box-shadow: 0 0 0 3px #b3b3b3;
}
.tdbc-button-outlined--light {
  border-color: white;
  color: #fff;
}
.tdbc-button-outlined--light:focus {
  box-shadow: 0 0 0 3px #b3b3b3;
}
.tdbc-button-outlined--light:hover, .tdbc-button-outlined--light:focus {
  background-color: rgba(255, 255, 255, 0.15);
}
.tdbc-button--gray {
  background-color: #555555;
}
.tdbc-button--gray:focus {
  box-shadow: 0 0 0 3px #3c3c3c;
}
.tdbc-button-outlined--gray {
  border-color: #9a7676;
  color: #555555;
}
.tdbc-button-outlined--gray:focus {
  box-shadow: 0 0 0 3px #3c3c3c;
}
.tdbc-button-outlined--gray:hover, .tdbc-button-outlined--gray:focus {
  background-color: #eeeeee;
}

.tdbc-button__icon,
.tdbc-icon-button {
  display: inline-flex;
  position: relative;
  width: 1em;
  height: 1em;
  padding: 0;
  border: none;
  background: transparent;
  font-size: 1.5rem;
  cursor: pointer;
}
.tdbc-button__icon svg,
.tdbc-icon-button svg {
  flex-shrink: 0;
  width: 100%;
  height: 100%;
}

.tdbc-icon-button svg {
  fill: currentColor;
  opacity: 0.7;
}
.tdbc-icon-button:focus, .tdbc-icon-button:hover {
  outline: none;
}
.tdbc-icon-button:focus svg, .tdbc-icon-button:hover svg {
  opacity: 1;
}
.tdbc-icon-button:focus::after {
  position: absolute;
  top: -0.3em;
  right: -0.3em;
  bottom: -0.3em;
  left: -0.3em;
  border: 1px solid currentColor;
  border-radius: 50%;
  content: "";
}

.tdbc-card {
  display: flex;
  position: relative;
  flex-direction: column;
  width: 100%;
  border-radius: 8px;
  background-color: #fff;
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.18);
  height: 330px;
  /* stylelint-disable selector-max-type, selector-no-qualifying-type */
}
.tdbc-card-image {
  border-radius: 8px;
  width: 100%;
  height: 181px;
}
.tdbc-card-image picture,
.tdbc-card-image img {
  object-fit: contain;
}
.tdbc-card-text {
  padding: 1rem;
  text-transform: capitalize;
}
.tdbc-card__title {
  margin-bottom: 1rem;
  font-size: 1.15rem;
  line-height: 1.15;
}
.tdbc-card .tdbc-card__title {
  padding: 1ch 1ch 0;
}
.tdbc-card .tdbc-card__title::before {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: 180ms box-shadow ease-in;
  border-radius: 8px;
  content: "";
}
.tdbc-card .tdbc-card__title:focus {
  outline: none;
}
.tdbc-card .tdbc-card__title:focus::before {
  box-shadow: 0 0 0 3px #CE5656;
}
.tdbc-card__content {
  display: flex;
  position: relative;
  flex-direction: column;
  flex-grow: 1;
  font-size: 24px;
}
.tdbc-card__content a {
  text-decoration: none;
  color: rgb(7, 7, 7);
}
.tdbc-card__content a:last-child {
  align-self: start;
  margin-top: auto;
}
.tdbc-card__content p {
  position: relative;
  margin: 0;
  z-index: 1;
}
.tdbc-card__content > ul {
  list-style-type: disc;
  padding-left: 1rem;
}
.tdbc-card__content > ul li + li {
  margin-top: 0.5rem;
}
.tdbc-card--outlined {
  border: 1px solid #aaaaaa;
  background-color: transparent;
  box-shadow: none;
}

a.tdbc-card__link {
  text-decoration: none;
  color: rgb(7, 7, 7);
  transition: all 0.5s ease-in-out;
  border-radius: 8px;
}
a.tdbc-card__link:hover {
  box-shadow: 0 0 0 3px #CE5656;
}

/**
 * a11y-dark theme for JavaScript, CSS, and HTML
 * Based on the okaidia theme: https://github.com/PrismJS/prism/blob/gh-pages/themes/prism-okaidia.css
 * @author ericwbailey
 */
code[class*=language-],
pre[class*=language-] {
  color: #555555;
  background: none;
  font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
  text-align: left;
  white-space: pre;
  word-spacing: normal;
  word-break: normal;
  word-wrap: normal;
  line-height: 1.5;
  tab-size: 4;
  hyphens: none;
}

/* Code blocks */
pre[class*=language-] {
  padding: 1em;
  margin: 2rem 0;
  overflow: auto;
  border-radius: 0.3em;
  max-width: calc(100vw - 2rem);
}

:not(pre) > code[class*=language-],
pre[class*=language-] {
  background: #fff;
}

/* Inline code */
:not(pre) > code[class*=language-] {
  padding: 0.1em;
  border-radius: 0.3em;
  white-space: normal;
}

.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
  color: #76747f;
}

.token.punctuation {
  color: #555555;
}

.token.property,
.token.tag,
.token.constant,
.token.symbol,
.token.deleted {
  color: #4d48e8;
}

.token.boolean,
.token.number {
  color: #348614;
}

.token.selector,
.token.attr-name,
.token.string,
.token.char,
.token.builtin,
.token.inserted {
  color: #171392;
}

.token.operator,
.token.entity,
.token.url,
.language-css .token.string,
.language-scss .token.string,
.style .token.string,
.token.variable {
  color: #d92d7a;
}

.token.function {
  color: #6f34a3;
}

.token.atrule,
.token.attr-value {
  color: #6b65e8;
}

.token.keyword {
  color: #171392;
}

.token.regex,
.token.important {
  color: #348614;
}

.token.important,
.token.bold {
  font-weight: bold;
}

.token.italic {
  font-style: italic;
}

.token.entity {
  cursor: help;
}

@media screen and (-ms-high-contrast: active) {
  code[class*=language-],
pre[class*=language-] {
    color: windowText;
    background: window;
  }

  :not(pre) > code[class*=language-],
pre[class*=language-] {
    background: window;
  }

  .token.important {
    background: highlight;
    color: window;
    font-weight: normal;
  }

  .token.atrule,
.token.attr-value,
.token.function,
.token.keyword,
.token.operator,
.token.selector {
    font-weight: bold;
  }

  .token.attr-value,
.token.comment,
.token.doctype,
.token.function,
.token.keyword,
.token.operator,
.token.property,
.token.string {
    color: highlight;
  }

  .token.attr-value,
.token.url {
    font-weight: normal;
  }
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

.tdbc-content-maxlength {
  max-width: 80ch;
}

.tdbc-w-100 {
  width: 100%;
}

.tdbc-anchor {
  display: inline-block;
  margin-left: 0.25em;
  transition: 180ms opacity ease-in-out;
  opacity: 0.6;
  font-size: 0.65em;
  vertical-align: top;
}
.tdbc-anchor:hover {
  opacity: 1;
}

.tdbc-text-align--left {
  text-align: left;
}

.tdbc-text-align--center {
  text-align: center;
}
.tdbc-text-align--center > a {
  align-self: center !important;
}

.tdbc-text-align--right {
  text-align: right;
}

.tdbc-background--primary {
  background-color: #CE5656;
}

.tdbc-background--secondary {
  background-color: #db0a76;
}

.tdbc-background--background {
  background-color: #f9f9f9;
}

.tdbc-background--gray {
  background-color: #555555;
}

.tdbc-background--light {
  background-color: #fff;
}

.tdbc-ink--primary,
a.tdbc-ink--primary {
  color: #CE5656;
}

.tdbc-ink--primary > a:not(.tdbc-button) {
  color: inherit;
}

.tdbc-ink--secondary,
a.tdbc-ink--secondary {
  color: #db0a76;
}

.tdbc-ink--secondary > a:not(.tdbc-button) {
  color: inherit;
}

.tdbc-ink--text,
a.tdbc-ink--text {
  color: rgb(7, 7, 7);
}

.tdbc-ink--text > a:not(.tdbc-button) {
  color: inherit;
}

.tdbc-ink--gray,
a.tdbc-ink--gray {
  color: #555555;
}

.tdbc-ink--gray > a:not(.tdbc-button) {
  color: inherit;
}

.tdbc-ink--light,
a.tdbc-ink--light {
  color: #fff;
}

.tdbc-ink--light > a:not(.tdbc-button) {
  color: inherit;
}

.tdbc-ink--dark,
a.tdbc-ink--dark {
  color: rgba(0, 0, 0, 0.87);
}

.tdbc-ink--dark > a:not(.tdbc-button) {
  color: inherit;
}

.tdbc-mx-auto {
  margin-right: auto;
  margin-left: auto;
}

.tdbc-my-sm {
  margin-top: 1rem;
  margin-bottom: 1rem;
}

.tdbc-mt-sm {
  margin-top: 1rem;
}

.tdbc-my-md {
  margin-top: 3rem;
  margin-bottom: 3rem;
}

.tdbc-mt-md {
  margin-top: 3rem;
}

.tdbc-my-lg {
  margin-top: 6rem;
  margin-bottom: 6rem;
}

.tdbc-mt-lg {
  margin-top: 6rem;
}

.tdbc-my-xl {
  margin-top: 10rem;
  margin-bottom: 10rem;
}

.tdbc-mt-xl {
  margin-top: 10rem;
}

.tdbc-my-auto {
  margin-top: "auto";
  margin-bottom: "auto";
}

.tdbc-mt-auto {
  margin-top: "auto";
}

.tdbc-mb-none {
  margin-bottom: 0;
}

.hide {
  display: none;
}

.show {
  display: block;
}
.show.flex {
  display: flex;
}

.images-row {
  margin: 2rem 0 4rem;
}
.images-row h5 {
  margin-bottom: 2ch;
}
.images-row .swiper-container {
  border: none;
  width: 100%;
  height: 100%;
  padding: 1.5rem;
}
.images-row .swiper-wrapper {
  height: 300px;
}

.swiper-slide {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.swiper-slide img {
  max-height: 100%;
  max-width: 100%;
  display: block;
  object-fit: contain;
  margin-bottom: 1ch;
  box-shadow: rgba(0, 0, 0, 0.2) 4px 4px 1ch;
}

.lightbox {
  position: fixed;
  z-index: 10;
  left: 0;
  top: 0;
  bottom: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.5);
  opacity: 1;
  visibility: visible;
  transition: all 0.5s ease;
}
.lightbox.hidden {
  opacity: 0;
  visibility: hidden;
}
.lightbox .close {
  position: absolute;
  right: 2.5%;
  top: 2.5%;
  font-size: 2rem;
  cursor: pointer;
}
.lightbox-content {
  display: flex;
  margin: 5%;
  align-items: center;
  justify-content: center;
  height: 100%;
}
.lightbox-content img {
  max-height: 85%;
  border: 5px solid #fff;
}

.image--portrait img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.artist .text-box {
  height: 420px;
  overflow-y: auto;
  padding: 0.5em;
  background: linear-gradient(#f9f9f9 30%, rgba(255, 255, 255, 0)), linear-gradient(rgba(255, 255, 255, 0), #f9f9f9 70%) 0 100%, radial-gradient(50% 0, farthest-side, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0)), radial-gradient(50% 100%, farthest-side, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0)) 0 100%;
  background: linear-gradient(#f9f9f9 30%, rgba(255, 255, 255, 0)), linear-gradient(rgba(255, 255, 255, 0), #f9f9f9 70%) 0 100%, radial-gradient(farthest-side at 50% 0, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0)), radial-gradient(farthest-side at 50% 100%, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0)) 0 100%;
  background-repeat: no-repeat;
  background-color: #f9f9f9;
  background-size: 100% 40px, 100% 40px, 100% 14px, 100% 14px;
  /* Opera doesn't support this in the shorthand */
  background-attachment: local, local, scroll, scroll;
}
.artist .text-box--header {
  text-transform: capitalize;
}
.artist .text-box--content {
  padding-bottom: 2rem;
}

.search-container {
  margin-bottom: 3ch;
}

#hits {
  position: relative;
}
#hits .hit-link {
  color: rgb(7, 7, 7);
}
#hits .hit-link h5,
#hits .hit-link p {
  text-transform: capitalize;
}

.ais-SearchBox-input {
  margin-right: 1ch;
  width: 100%;
  max-width: 330px;
}
.ais-SearchBox-submit, .ais-SearchBox-reset {
  margin-right: 1ch;
  padding: 1px 8px;
  background-color: #CE5656;
  border: none;
  border-radius: 3px;
}
.ais-Hits-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  position: absolute;
  z-index: 50;
  background-color: rgba(249, 249, 249, 0.9);
  margin: 1ch 0 0 0;
  padding: 3rem;
  width: 100%;
  height: 100vh;
  overflow-y: auto;
}
.ais-Hits-item {
  margin-bottom: 2ch;
  padding: 1ch 0 1ch 1ch;
}
.ais-Hits-item p {
  margin-bottom: 0.25rem;
}
.ais-Hits-item:hover {
  background-color: rgba(85, 85, 85, 0.3);
}
.ais-Highlight-highlighted {
  color: #9e2e2e;
}