.stories-layout-switch button,
.stories-sort-switch a {
    color: #94a3b8;
    transition: background-color .15s, color .15s;
}
.stories-layout-switch button:hover,
.stories-sort-switch a:hover {
    color: #fff;
    background: #1e293b;
}
.stories-layout-switch button[aria-pressed="true"],
.stories-sort-switch a[aria-current="page"] {
    color: #fff;
    background: #ec4899;
}
.stories-layout-switch button:focus-visible,
.stories-sort-switch a:focus-visible {
    outline: 2px solid #f472b6;
    outline-offset: 2px;
}
html[data-stories-layout="list"] .stories-collection {
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
}
html[data-stories-layout="list"] .story-card-link {
    display: grid;
    grid-template-columns: 7rem minmax(0, 1fr);
    height: 100%;
}
html[data-stories-layout="list"] .story-card-cover {
    aspect-ratio: auto;
    min-height: 10rem;
    height: 100%;
}
html[data-stories-layout="list"] .story-card-cover > img {
    position: absolute;
    inset: 0;
}
html[data-stories-layout="list"] .story-card-content {
    min-width: 0;
    padding: 1rem;
    overflow-wrap: anywhere;
}
html[data-stories-layout="list"] .story-card-content h2 {
    font-size: 1.125rem;
}
html[data-stories-layout="list"] .story-card-stats {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem 1rem;
}
html[data-stories-layout="list"] .story-card-metadata,
html[data-stories-layout="list"] .story-card-metadata > div,
html[data-stories-layout="list"] .story-card-counts {
    display: contents;
    margin-block: 0;
}
html[data-stories-layout="list"] .story-card-stats span {
    font-size: .75rem;
    white-space: nowrap;
}
html[data-stories-layout="list"] .story-character-badge {
    left: .5rem;
    top: .5rem;
    max-width: calc(100% - 1rem);
    gap: .25rem;
    padding-right: .375rem;
    font-size: .6875rem;
}
html[data-stories-layout="list"] .story-character-badge img {
    width: 1.5rem;
    height: 1.5rem;
}
html[data-stories-layout="list"] .story-video-badge {
    top: auto;
    bottom: .5rem;
    left: .5rem;
    right: auto;
    padding: .25rem .5rem;
    font-size: .625rem;
}
@media (min-width: 640px) {
    html[data-stories-layout="list"] .story-card-link {
        grid-template-columns: 10rem minmax(0, 1fr);
    }
    html[data-stories-layout="list"] .story-card-cover {
        min-height: 13rem;
    }
    html[data-stories-layout="list"] .story-card-content {
        padding: 1.5rem;
    }
    html[data-stories-layout="list"] .story-card-content h2 {
        font-size: 1.5rem;
    }
}