/**
 * @file
 * custom.css
 *
 * Custom styles for the Panorin theme.
 * Add your own CSS here — colours, typography, spacing tweaks, etc.
 */

/* =====================================================
   Add your custom styles below
   ===================================================== */

/* .node--view-mode-related  */
.node--view-mode-related .text-content p {margin-block-start: 0;}
.node--view-mode-related .field--tags__item:nth-last-child(n + 2)::after {content: "";}
.node--view-mode-related .field--tags__item::before {content: "#";font-weight: bold;}
.node--view-mode-related .teaser__content .field--type-entity-reference .field--tags__items {margin-right: calc(var(--sp0-5) / 2);}
.node--view-mode-related .field--tags__item h3, .node--view-mode-related .field--tags__item h4, .node--view-mode-related .field--tags__item h5{margin-block: 0;}

.node--view-mode-related .teaser__content .field--type-image img {
  width: 100%;
  height: auto;
  display: block;
}

.node--view-mode-related .teaser__content {
  display: flex;
  flex-wrap: wrap;
  column-gap: var(--sp0-75);
  row-gap: 0;
  align-items: flex-start;
}

.node--view-mode-related .teaser__content .field--type-image, .node--view-mode-related .teaser__content .related-content-body {
  flex: 0 0 100%;
  max-width: 100%;
}

.node--view-mode-related .teaser__content .related-content-body .related-entity-reference{
  display: flex;
  flex-wrap: wrap;
  column-gap:0;
  row-gap: 0;
}

.node--view-mode-related .teaser__top h2, .node--view-mode-related .teaser__top h3 {
	font-size: var(--sp1-5);
	line-height: var(--sp2);
}

@media (min-width: 62.5rem) {
  .node--view-mode-related .teaser__content .field--type-image {
    flex: 0 0 33%;
    max-width: 33%;
  }
  .node--view-mode-related .teaser__content .related-content-body {
    flex: 1;
    min-width: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
  }
  .node--view-mode-related .teaser__content .related-content-body .field--name-body{
    flex: 100%;
    min-width: 0;
  }
	
}


/* simple lightbox  */
.sl-wrapper .sl-image {border-radius: 7px;}
.sl-wrapper .sl-image .sl-caption{border-radius: 0 0 7px 7px;background: rgba(0, 0, 0, .5);}
/* plyr video player  */
.plyr{border-radius: 7px;}