slideshow.sass

@use 'swiper-bundle.css'
@use 'w3.css'
@use 'nav'
@use 'burger-menu'
@use 'header'
@use 'overlay'

main
  height: auto
  
#menu-mosaic-container
  display: flex
  flex-direction: column
  #mosaic
    display: grid
    column-gap: 1em
    row-gap: 1em
    padding: 10px
    padding-top: 0
    grid-template-columns: repeat(var(--nb-columns), 1fr)
    width: 100%
    /* small */
    --nb-columns: 2
  @media screen and (min-width: 601px)
    #mosaic
      /* medium */
      --nb-columns: 4
  @media screen and (min-width: 993px)
    #mosaic
      /* large */
      grid-template-columns: repeat(auto-fit, minmax(200px, 0.25fr))
  .thumbnail
    aspect-ratio: 1.618
    img
      width: 100%
      height: 100%
      object-fit: cover
      object-position: right top
    :hover
      cursor: pointer
#swiper-container
  overflow: hidden
  #close-swiper
    z-index: 11
  .swiper-wrapper
    overflow: visible
    .swiper-slide
      height: 100vh
      width: 100vw
      display: flex
      flex-direction: column
      justify-content: center
      overflow-x: hidden
    .picture-box
      max-width: 100%
      max-height: calc(100% - 1em)
      display: flex
      flex-direction: column
      position: relative
      @media (orientation: portrait)
        --left-right-margin: 5px
        margin: auto var(--left-right-margin) auto var(--left-right-margin)
      .picture
        max-width: 100%
        max-height: 100%
        object-fit: contain
      .picture-label
        display: block
        position: absolute
        width: 100%
        text-align: center
        top: 100%
        @media only screen and (orientation: landscape)
          padding-bottom: 0.3em
  .swiper-button-prev, .swiper-button-next
    margin: 0
    top: 0
    height: 100vh