.info.svelte-1fhvhfr {
    display: -webkit-box;
    display: flex;
    -webkit-box-pack: justify;
    justify-content: space-between;
    font-family: var(--mono);
    margin-bottom: 8px;
    -webkit-box-align: center;
    align-items: center;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    -webkit-transition: -webkit-transform calc(var(--1s) * .25);
    transition: -webkit-transform calc(var(--1s) * .25);
    transition: transform calc(var(--1s) * .25);
    transition: transform calc(var(--1s) * .25), -webkit-transform calc(var(--1s) * .25);
    -webkit-font-smoothing: antialiased
}

.id.svelte-1fhvhfr {
    border: 1px solid var(--color-fg);
    display: inline-block;
    min-width: 4em;
    width: auto;
    max-width: 100%;
    text-align: center;
    padding: 4px;
    border-radius: 2em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.info.svelte-1fhvhfr p:where(.svelte-1fhvhfr) {
    font-size: var(--14px, 14px);
    text-transform: uppercase
}

p.svelte-1fhvhfr {
    margin: 0
}

a.svelte-1fhvhfr {
    display: block;
    text-decoration: none;
    cursor: pointer
}

a.svelte-1fhvhfr:focus-visible {
    outline: 2px solid var(--color-focus)
}

.story.svelte-1fhvhfr:hover .info:where(.svelte-1fhvhfr) {
    -webkit-transform: translateY(-4px);
    transform: translateY(-4px)
}

.story.svelte-1fhvhfr:not(.youtube:where(.svelte-1fhvhfr)):hover .screenshot:where(.svelte-1fhvhfr) img:where(.svelte-1fhvhfr),
.story.svelte-1fhvhfr:not(.resource:where(.svelte-1fhvhfr)):hover .screenshot:where(.svelte-1fhvhfr) img:where(.svelte-1fhvhfr) {
    -webkit-transform: translate(-50%, 0) scale(1.05);
    transform: translate(-50%) scale(1.05)
}

.story.youtube.svelte-1fhvhfr:hover .screenshot:where(.svelte-1fhvhfr) img:where(.svelte-1fhvhfr),
.story.resource.svelte-1fhvhfr:hover .screenshot:where(.svelte-1fhvhfr) img:where(.svelte-1fhvhfr) {
    -webkit-transform: translate(-50%, 50%) scale(1.05);
    transform: translate(-50%, 50%) scale(1.05)
}

.screenshot.svelte-1fhvhfr {
    background: var(--story-bg, var(--color-default-story-bg, "#ddd"));
    aspect-ratio: 1;
    position: relative;
    overflow: hidden
}

span.icon--play.svelte-1fhvhfr {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 4em;
    aspect-ratio: 1;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: var(--z-top)
}

img.svelte-1fhvhfr {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 90%;
    height: 90%;
    object-fit: contain;
    -webkit-transform: translate(-50%, -50%) scale(1);
    transform: translate(-50%, -50%) scale(1);
    aspect-ratio: 6/7;
    -webkit-transform-origin: center center;
    transform-origin: center center;
    -webkit-transition: -webkit-transform calc(var(--1s) * .25);
    transition: -webkit-transform calc(var(--1s) * .25);
    transition: transform calc(var(--1s) * .25);
    transition: transform calc(var(--1s) * .25), -webkit-transform calc(var(--1s) * .25);
}

.youtube.svelte-1fhvhfr img:where(.svelte-1fhvhfr),
.resource.svelte-1fhvhfr img:where(.svelte-1fhvhfr) {
    bottom: 50%;
    -webkit-transform: translate(-50%, 50%);
    transform: translate(-50%, 50%);
    -webkit-transform-origin: center center;
    transform-origin: center center;
    aspect-ratio: auto
}

.text.svelte-1fhvhfr {
    font-family: var(--sans);
    margin-top: 12px
}

h3.short.svelte-1fhvhfr {
    color: var(--color-fg);
    font-size: clamp(var(--24px, 24px), 6vw, var(--28px, 28px));
    line-height: 1;
    margin: 0 0 8px;
    letter-spacing: -.8px
}

.resource.svelte-1fhvhfr h3.short:where(.svelte-1fhvhfr) {
    font-size: clamp(var(--20px, 20px), 6vw, var(--24px, 24px))
}

.footer.svelte-1fhvhfr h3.short:where(.svelte-1fhvhfr) {
    display: none
}

p.tease.svelte-1fhvhfr {
    color: var(--color-secondary-gray, var(--color-fg));
    font-size: var(--16px)
}

.footer.svelte-1fhvhfr p.tease:where(.svelte-1fhvhfr) {
    color: var(--color-secondary-gray, var(--color-fg));
    font-size: clamp(var(--16px), 4vw, var(--20px, 20px));
    font-weight: 700;
    line-height: 1.2
}

@media (min-width: 960px) {
    h3.short.svelte-1fhvhfr {
        font-size: clamp(var(--24px, 24px), 2.75vw, var(--32px, 32px))
    }
}