.fps-showcase {
    --fps-columns-desktop: 4;
    --fps-columns-tablet: 2;
    --fps-columns-mobile: 1;
    --fps-carousel-rows: 1;
    --fps-gap: 34px;
    --fps-image-size: 64px;
    position: relative;
    width: 100%;
    font-family: "Plus Jakarta Sans", Sans-serif;
    color: #231C24;
}

.fps-track {
    gap: var(--fps-gap);
}

.fps-layout-grid .fps-track {
    display: grid;
    grid-template-columns: repeat(var(--fps-columns-desktop), minmax(0, 1fr));
}

.fps-layout-carousel {
    padding-inline: 0;
}

.fps-layout-carousel .fps-track {
    display: grid;
    grid-auto-flow: column;
    grid-template-rows: repeat(var(--fps-carousel-rows), minmax(0, auto));
    grid-auto-columns: calc((100% - (var(--fps-gap) * (var(--fps-columns-desktop) - 1))) / var(--fps-columns-desktop));
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    padding: 2px 0;
}

.fps-layout-carousel .fps-track::-webkit-scrollbar {
    display: none;
}

.fps-card {
    position: relative;
    display: flex;
    align-items: center;
    gap: 22px;
    min-width: 0;
    scroll-snap-align: start;
}

.fps-image-top .fps-card {
    align-items: flex-start;
    flex-direction: column;
}

.fps-image-right .fps-card {
    flex-direction: row;
}

.fps-card-link {
    position: absolute;
    inset: 0;
    z-index: 1;
}

.fps-media {
    width: var(--fps-image-size);
    height: var(--fps-image-size);
    flex: 0 0 var(--fps-image-size);
    overflow: hidden;
    background: #e5e6d8;
}

.fps-media-circle,
.fps-image-shape-circle .fps-media {
    border-radius: 999px;
}

.fps-media-rounded,
.fps-image-shape-rounded .fps-media {
    border-radius: 12px;
}

.fps-media-square,
.fps-image-shape-square .fps-media {
    border-radius: 0;
}

.fps-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.fps-image-placeholder {
    display: grid;
    place-items: center;
    background: #9bc5c8;
    color: #29687C;
    font-weight: 800;
    font-size: calc(var(--fps-image-size) * .34);
}

.fps-content {
    min-width: 0;
}

.fps-name {
    margin: 0 0 4px;
    font-family: "Literata Custom", Georgia, "Times New Roman", serif;
    font-size: 22px;
    font-weight: 500;
    line-height: .98;
    color: #231C24;
}

.fps-meta {
    margin: 0 0 4px;
}

.fps-meta-row {
    margin: 0;
    font-size: 9px;
    line-height: 1.18;
    color: #231C24;
}

.fps-meta-label {
    font-weight: 800;
}

.fps-schedule {
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    width: fit-content;
    margin-top: 1px;
    font-size: 9px;
    font-weight: 600;
    line-height: 1.1;
    color: #29687C;
    text-decoration: none;
}

.fps-schedule:hover {
    color: #29687C;
    text-decoration: underline;
}

.fps-empty {
    margin: 0;
    font-size: 14px;
}

.fps-carousel-arrow {
    position: absolute;
    top: 50%;
    z-index: 3;
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 999px;
    background: rgba(41, 104, 124, .92);
    color: #fff;
    cursor: pointer;
    font-size: 28px;
    line-height: 1;
    display: grid;
    place-items: center;
    transform: translateY(-50%);
    opacity: 0;
    pointer-events: none;
    transition: opacity .16s ease;
}

.fps-showcase:hover .fps-carousel-arrow,
.fps-showcase:focus-within .fps-carousel-arrow {
    opacity: 1;
    pointer-events: auto;
}

.fps-carousel-prev {
    left: -17px;
}

.fps-carousel-next {
    right: -17px;
}

.fps-carousel-arrow:hover {
    background: #29687C;
}

@media (max-width: 980px) {
    .fps-layout-grid .fps-track {
        grid-template-columns: repeat(var(--fps-columns-tablet), minmax(0, 1fr));
    }

    .fps-layout-carousel .fps-track {
        grid-auto-columns: calc((100% - (var(--fps-gap) * (var(--fps-columns-tablet) - 1))) / var(--fps-columns-tablet));
    }
}

@media (max-width: 640px) {
    .fps-layout-grid .fps-track {
        grid-template-columns: repeat(var(--fps-columns-mobile), minmax(0, 1fr));
    }

    .fps-layout-carousel .fps-track {
        grid-auto-columns: calc((100% - (var(--fps-gap) * (var(--fps-columns-mobile) - 1))) / var(--fps-columns-mobile));
    }

    .fps-card {
        gap: 14px;
    }

    .fps-name {
        font-size: 20px;
    }

    .fps-carousel-arrow {
        opacity: 1;
        pointer-events: auto;
    }

    .fps-carousel-prev {
        left: 4px;
    }

    .fps-carousel-next {
        right: 4px;
    }
}