@font-face {
    font-family: 'Proto Grotesk';
    src: local('☺️'), url('https://static.istories.media/public/fonts/Proto_Grotesk-Light-Web.woff2') format('woff2');
    font-weight: light;
    font-style: light;
    font-display: swap;
}

@font-face {
    font-family: 'Proto Grotesk';
    src: local('☺️'), url('https://static.istories.media/public/fonts/Proto Grotesk-Bold-Web.woff2') format('woff2'), url('https://static.istories.media/public/fonts/Proto Grotesk-Bold-Web.woff') format('woff'), url('https://static.istories.media/public/fonts/Proto Grotesk-Bold-Web.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

body,
html {
    height: 100%;
    margin: 0
}

.clickable {
    cursor: pointer
}

.card {
    overflow: hidden;
    white-space: normal
}

.card * {
    box-sizing: border-box
}

.card h1,
.card h2,
.card h3,
.card p {
    margin: 0;
    max-width: 100%
}

#legend {
    font-size: 12px;
    padding: .5rem 0;
    display: inline-block;
    vertical-align: bottom
}

#legend .swatch {
    display: inline-block;
    vertical-align: middle;
    border-radius: .1rem;
    margin-right: .25rem;
    height: 1rem;
    width: .75rem
}

#legend .label {
    display: inline-block;
    vertical-align: middle;
    font-size: 1rem
}

#legend .discrete {
    margin-right: 1rem;
    display: inline-block;
    cursor: pointer
}

#legend .discrete.filtered-out {
    opacity: .3
}

#legend .discrete:last-child {
    margin-right: 0
}

#wrapper {
    position: relative;
    overflow: hidden
}

#cards-outer {
    visibility: hidden
}

#cards-outer.view-carousel {
    overflow: auto
}

#cards-outer.view-carousel #cards-inner {
    white-space: nowrap;
    cursor: move;
    position: relative
}

#cards-outer.view-carousel #cards-inner .card-wrapper {
    white-space: initial
}

#cards-outer.view-carousel #cards-inner .card-wrapper.filtered {
    display: none
}

#cards-outer.view-grid .card-wrapper {
    box-sizing: border-box
}

#cards-outer #cards-inner .card-wrapper {
    display: inline-block;
    vertical-align: top;
    overflow: hidden;
    box-sizing: border-box
}

#cards-outer #cards-inner .card-wrapper:first-child {
    margin-left: 0
}

#cards-outer #cards-inner .card-wrapper:last-child {
    margin-right: 0
}

#cards-outer #cards-inner .card-wrapper .card .image-container {
    overflow: hidden;
    max-width: 100%
}

#cards-outer #cards-inner .card-wrapper .card .image-container .image {
    background-repeat: no-repeat;
    background-position: center;
    height: 100%;
    width: 100%
}

#cards-outer #cards-inner .card-wrapper .card a {
    color: inherit
}

#cards-outer #autoplay button {
    border: none;
    outline: 0;
    border-radius: 50%;
    cursor: pointer;
    line-height: 0;
    transition: .2s opacity
}

#cards-outer #autoplay button .icon {
    box-sizing: border-box;
    display: inline-block
}

#cards-outer #autoplay button:hover {
    opacity: 1!important
}

#cards-outer #autoplay button:not(.playing) .icon {
    width: 0;
    height: 0;
    border-width: .25em 0 .25em .48em;
    border-style: solid;
    border-top-color: transparent!important;
    border-right-color: transparent!important;
    border-bottom-color: transparent!important;
    margin-left: .125em
}

#cards-outer #autoplay button.playing .icon {
    width: .36em;
    height: .45em;
    border-width: 0 .14em 0 .14em;
    border-style: solid;
    background: 0 0;
    margin-left: 0
}

#cards-inner.audio-playing .card-wrapper {
    opacity: .75
}

#cards-inner.audio-playing .card-wrapper.audio-playing {
    opacity: 1
}

#cards-inner.audio-playing .card-wrapper.animate-on-audio {
    animation: grow 1.5s infinite
}

@keyframes grow {
    0% {
        transform: scale(1)
    }
    25% {
        transform: scale(.92)
    }
    40% {
        transform: scale(.97)
    }
    50% {
        transform: scale(.95)
    }
    65% {
        transform: scale(.98)
    }
    70% {
        transform: scale(.94)
    }
    80% {
        transform: scale(.96)
    }
    90% {
        transform: scale(.99)
    }
    100% {
        transform: scale(1)
    }
}

#default-wrapper {
    display: flex;
    flex-direction: column;
    gap: 30px;
    padding: 15px
}

.carousel-mode {
    overflow: auto;
    height: 100vh
}


/*# sourceMappingURL=style.css.map */