@use "@fwrlines/swatch/src/main" as swatch;
@use "@fwrlines/stylebook/src/main" as stylebook;
@use "@fwrlines/destination/src/main" as destination;

@use "@fwrlines/stylebook/src/mixins";
@use "@fwrlines/stylebook/src/globals" as *;

@use 'swiper/swiper.scss';
@use 'swiper/components/navigation/navigation.scss';

html {
  //height:auto;
  //min-height:100%;
}

#main {
  height: 100%;
}

.page {
  min-height:100%;
}

.style1 {
  border-bottom: 1px solid var(--light-metadata);
}

p.contentful {
  line-height:1.5em;
  
}

#page_documentary {
  .swiper-slide {

    height:100%;
    display:flex;
    flex-direction:column;
    img {
      height:100%;
      max-height:20em;

      @include mixins.media($from:$sm-md) {
        max-height:40em;
      } 
    }
  }

}

#page_documentary__partners{
  .card.front-face {
    display:flex;
    flex-direction:column;

    & > .section:first-child {
      flex-grow:1;

    }
  }
}

#page_documentary__quote{
  background:url('/documentary/ilustracion.png') center / cover no-repeat;
  height:23em;
  display:flex;
  flex-direction:column;
  justify-content:center;

  @include mixins.media($from:$sm-md) {
    height:50em;
  } 
}

#page_documentary__video {
  .i-content .viewer {
    position: relative;
    height: 0;
    padding-bottom: 56.25%;

    iframe {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }

  }


}