.speakers-browser {
        --speakers-gap: 1rem;
}

.speakers-browser__header {
        max-width: 45rem;
}

.speakers-browser__status:empty {
        display: none;
}

.speakers-browser__detail-slot:empty {
        display: none;
}

.speakers-browser__grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
}

.speakers-browser.is-masonry .speakers-browser__grid {
        display: block;
}

.speakers-browser__sizer,
.speakers-browser__gutter {
        display: none;
}

.speakers-browser.is-masonry .speakers-browser__sizer,
.speakers-browser.is-masonry .speakers-browser__gutter {
        display: block;
}

.speakers-browser.is-masonry .speakers-browser__sizer,
.speakers-browser.is-masonry .speakers-browser__item {
        width: calc((100% - (2 * var(--speakers-gap))) / 3);
}

.speakers-browser.is-masonry .speakers-browser__gutter {
        width: var(--speakers-gap);
}

.speakers-browser__item {
        min-width: 0;
}

.speakers-browser.is-masonry .speakers-browser__item {
        margin-bottom: var(--speakers-gap);
}

.speakers-browser__button {
        min-height: 4.75rem;
}

.speakers-browser__button,
.speakers-browser__button *,
.speakers-browser__detail-panel,
.speakers-browser__detail-panel * {
        font-family: "Titillium Web", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.speakers-browser__thumbnail {
        flex: 0 0 4.75rem;
        min-height: 4.75rem;
}

.speakers-browser__initials {
        letter-spacing: .04em;
}

.speakers-browser__detail.is-entering .speakers-browser__detail-panel {
        animation: speakers-detail-enter .42s cubic-bezier(.22, 1, .36, 1) both;
}

.speakers-browser__detail.is-leaving .speakers-browser__detail-panel {
        animation: speakers-detail-leave .18s ease-in both;
}

.speakers-browser__portrait .speakers-browser__initials {
        font-size: 2rem;
}

.speakers-browser__meta {
        letter-spacing: 1.8px;
}

.speakers-browser__presentation > p:first-of-type {
        display: inline;
}

.speakers-browser__motto > :last-child,
.speakers-browser__presentation > :last-child {
        margin-bottom: 0;
}

@keyframes speakers-detail-enter {
        from {
                opacity: 0;
                transform: translateX(-3rem);
        }
        to {
                opacity: 1;
                transform: translateX(0);
        }
}

@keyframes speakers-detail-leave {
        from {
                opacity: 1;
                transform: translateX(0);
        }
        to {
                opacity: 0;
                transform: translateX(-2rem);
        }
}

@media (min-width: 992px) {
        .speakers-browser.has-detail .speakers-browser__layout {
                display: grid;
                grid-template-columns: calc((100% - (2 * var(--speakers-gap))) / 3) minmax(0, 1fr);
                gap: var(--speakers-gap);
                align-items: start;
        }

        .speakers-browser.has-detail .speakers-browser__detail-slot {
                display: block;
                min-width: 0;
        }

        .speakers-browser.has-detail .speakers-browser__grid {
                grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        .speakers-browser.is-masonry.has-detail .speakers-browser__grid .speakers-browser__sizer,
        .speakers-browser.is-masonry.has-detail .speakers-browser__grid .speakers-browser__item {
                width: calc((100% - var(--speakers-gap)) / 2);
        }

        .speakers-browser.is-masonry.has-detail .speakers-browser__detail-slot .speakers-browser__item {
                width: 100%;
                margin-bottom: 0;
        }
}

@media (max-width: 991.98px) {
        .speakers-browser__grid {
                grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        .speakers-browser.is-masonry .speakers-browser__sizer,
        .speakers-browser.is-masonry .speakers-browser__item {
                width: calc((100% - var(--speakers-gap)) / 2);
        }
}

@media (max-width: 575.98px) {
        .speakers-browser__grid {
                grid-template-columns: 1fr;
        }

        .speakers-browser__header {
                scroll-margin-top: calc(var(--drupal-displace-offset-top, 0px) + var(--isdc-navbar-height, 0px) + 1rem);
        }

        .speakers-browser.is-masonry .speakers-browser__sizer,
        .speakers-browser.is-masonry .speakers-browser__item {
                width: 100%;
        }
}

@media (prefers-reduced-motion: reduce) {
        .speakers-browser__button,
        .speakers-browser__item,
        .speakers-browser__detail-panel {
                animation: none !important;
                transition: none !important;
        }
}