/* ---------------------------------------------------------------
Global
--------------------------------------------------------------- */

html {
    height: 100%;
    font-family: sans-serif;
    font-size: 14px;
    line-height: 1.5;
    user-select: none;
}

body {
    height: 100%
}

img {
    width: 100%;
}

b {
    font-weight: bold;
}

/* ---------------------------------------------------------------
Variables
--------------------------------------------------------------- */

:root {
    --space-sm: 1rem;
}

/* ---------------------------------------------------------------
Main
--------------------------------------------------------------- */

.Main {
    height: 100%;
}

/* ---------------------------------------------------------------
 Slideshow
--------------------------------------------------------------- */

.Slideshow {
    height: 100%;
    overflow: hidden;
    cursor: pointer;
}

/* ---------------------------------------------------------------
Slideshow MediaContainer
--------------------------------------------------------------- */

.Slideshow-container {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    display: flex;
}

.Slideshow-container--caption {
    flex-direction: column;
    padding: 1rem;
}

.Slideshow-container--media {
    flex-direction: row;
    width: 100%;
}

.Slideshow.is-caption .Slideshow-container--media {
    display: none;
}

.Slideshow.is-media .Slideshow-container--caption {
    display: none;
}

@media (max-aspect-ratio: 1/1) {
    .Slideshow[data-orientation="portrait"] .Slideshow-container--media {
        flex-direction: row;
    }
    .Slideshow[data-orientation="landscape"] .Slideshow-container--media {
        flex-direction: column;
    }
    .Slideshow-container--caption {
        width: 100%;
    }
}

@media (min-aspect-ratio: 1/1) {
    .Slideshow[data-orientation="portrait"] .Slideshow-container--media {
        flex-direction: row;
    }
    .Slideshow[data-orientation="landscape"] .Slideshow-container--media {
        flex-direction: column;
    }
    .Slideshow-container--caption {
        width: 50%;
        justify-content: flex-end;
    }
}

/* ---------------------------------------------------------------
SlideCaption Text
--------------------------------------------------------------- */

@media (max-aspect-ratio: 1/1) {
    .Slideshow[data-orientation="portrait"] .SlideCaption:last-child {
        display: none;
    }
}

@media (min-aspect-ratio: 1/1) {
    .Slideshow[data-orientation="landscape"] .SlideCaption:last-child {
        display: none;
    }
}

/* ---------------------------------------------------------------
SlideMedia
--------------------------------------------------------------- */

.SlideMedia {
    position: relative;
    width: 100%;
    height: 100%;
}

.SlideMedia-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    background-size: cover;
    background-position: center;
}

@media (max-aspect-ratio: 1/1) {
    .Slideshow[data-orientation="portrait"] .SlideMedia:last-child {
        display: none;
    }
}

@media (min-aspect-ratio: 1/1) {
    .Slideshow[data-orientation="landscape"] .SlideMedia:last-child {
        display: none;
    }
}

/* ---------------------------------------------------------------
Footer
--------------------------------------------------------------- */

.Footer {
    position: absolute;
    display: none;
    padding: 1rem;
    pointer-events: none;
    user-select: auto;
    max-height: 100%;
    overflow: hidden;
}

body[data-mode="caption"] .Footer {
    display: block;
}

@media (max-aspect-ratio: 1/1) {
    .Footer {
        left: 0;
        bottom: 0;
        right: 0;
    }
}

@media (min-aspect-ratio: 1/1) {
    .Footer {
        left: 50%;
        bottom: 0;
        right: 0;
    }
}

.Footer a {
    pointer-events: all;
}