.main {
  margin: auto;
  flex: 1;
}
.media-modal .main {
  padding: 2rem;
}
.gslide-inline .ginlined-content {
  padding: 0 !important;

  
}
.media-root {
  height: 100%;
  padding: 33px;
  overflow: auto;
}
/* .main:has(.media-root.transcription) { */
/*   width: min(1500px, 95vw); */
/* } */
/* .main:has(.media-root.audio) , */
/* .main:has(.media-root.video) , */
/* .main:has(.media-root.image) { */
/*   width: min(800px, 95vw); */
/* } */
.media-root audio  {
  width: 100%;
}
.media-image {

  
  width: 100%;
  object-fit: contain;
}
.media-links {
  display: flex;
  justify-content: start;
  align-items: center;
  /* gap: 1rem; */
  /* .line:has( + .pio)::after { */
  .line:is(div):nth-child(2):has( + .pio )::after {
    content: "";
    padding-right: 0.5rem;
    margin-right: 0.5rem;
    border-right: 2px solid color-mix(in oklab, currentcolor 40%, transparent);

  }
  & > * {
    position: relative;
    display: inline-block;
  }
}
.media-header {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.pio span {
  padding-left: 0.5ch;
}
@media screen and (max-width: 600px){
  .pio .pio-newberry,
  .pio .pio-digital,
  .pio .pio-collections,
  .pio .pio-dc {
    display: none;
  }
  .pio .pio-ndc {
    display: inline;
  }
}
@media screen and (min-width: 600px){
  .pio .pio-newberry,
  .pio .pio-digital,
  .pio .pio-collections {
    display: inline;
  }
  .pio .pio-dc,
  .pio .pio-ndc {
    display: none;
  }
}



.transcription .container:not(.modal-content) {
  min-height: 100vh;
}
.transcription .container {
  max-width: min(800px, 95vw);
  margin: 0 auto;
}
.transcription .container:has(.metadata){
  max-width: 100%;
}
#content {
  display: flex;
  flex-wrap: wrap;
  align-items: start;
  gap: 1rem;
  padding-inline: 1rem;
} 
.transcription .image-container, .metadata {
  flex: 1;
}
@media screen and (max-width: 800px) {
  #content {
    flex-direction: column; 
  }
  .image-container {
    flex: 1;
  }
}

.transcription .image-container {
  width: min(800px, 100%);
  position: relative;
  padding-bottom: 33px;
}

.transcription .image-container img {
  width: 100%;
  height: auto;
  display: block;
}
.transcription .mini-header {
  display: flex;
  flex-direction: column;
  align-items: start;
  gap: 1rem;
  margin-bottom: 2rem;
}
.transcription .title-links {
  display: flex;

  justify-content: space-between;
  gap: 1rem;
  & .cta {
    text-align: right;
  }
}
.transcription .breadcrumbs {
  /* text-transform: uppercase; */
}

.transcription .metadata {
  position: sticky; 
  top: var(--header-height);
  padding: 2rem;
}

.transcription .item-link {
  display: block;
  width: 100%;
  text-align: center;
}
.transcription .cta {
  font-size: 1.33rem;
  padding-block: 1rem;
  
}
.transcription .transcription-container {
  font-family: monospace;
  background: color-mix(in oklab, var(--background) 91%, var(--primary-color));
  background: var(--surface);
  background: var(--surface-2);
  padding: 1rem;
  border-radius: 4px;
  margin-top: 1rem;
  white-space: pre-wrap;
  font-size: 0.9rem;
  line-height: 1.8;
  display: flex;
  flex-direction: column;
}
.transcription-text {

white-space: pre-wrap;
  word-wrap: break-word; /* Deprecated, but good for older IE support */
  overflow-wrap: break-word;
  font-size: 0.9rem;

}

.transcription .transcription-label {
  text-transform: uppercase;
  font-size: 0.9rem;
  margin-bottom: 0.5rem;
  color: var(--secondary-color);
}
.transcription .transcription-status {
  font-size: 0.9rem;
  opacity: 0.76;
}
.media-container {
  /* font-size: 1.25rem; */
  padding-block: 33px;  
}
.media-description {
  /* font-size: 1.25rem; */
  padding-left: 33px;
  border-left: 33px solid color-mix(in oklab, currentcolor 40%, transparent);
  /* margin-left: 9px; */
  display: flex;
  flex-direction: column;
  gap: 0.76rem;
  & .is-source {
    padding-right: 33px;
    text-align: right;
  }
}