.fc {
    min-height: 22rem;
    padding: 3rem 0;
    background: var(--brand-white);
    color: #eee;
    position: relative;
    z-index: 1;
}

.fc-title {
    color: var(--brand-primary);
}

.fc-list {
    max-width: 560px;
    color: var( --brand-ink);
}

    .fc-list li {
        padding-left: 1.1rem;
        position: relative;
        margin: .25rem 0;
    }

        .fc-list li::before {
            content: "•";
            position: absolute;
            left: 0;
            color: #666;
            line-height: 1;
        }

.fc-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: none;
    background: var(--brand-accent);
    color: var(--brand-white);
    display: grid;
    place-items: center;
    z-index: 1101;
    box-shadow: 0 3px 10px rgba(0,0,0,.3);
    transition: background .15s, transform .15s, opacity .2s;
}

.fc-prev {
    left: 12px;
}

.fc-next {
    right: 12px;
}

.fc-btn:hover {
    background: var(--btn-primary-hov);
}

.fc-btn:active {
    transform: translateY(-50%) scale(.98);
}

.fc-btn[disabled] {
    opacity: .5;
    pointer-events: none;
}

.fc-btn.is-pressed {
    opacity: .6;
}

.fc-dots {
    display: flex;
    justify-content: center;
    gap: .5rem;
    margin-top: 1rem;
}

    .fc-dots button {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        border: 1px solid var(--brand-primary);
        background: none;
        padding: 0;
        transition: transform .15s, background .15s;
    }

        .fc-dots button.active {
            background: var(--brand-accent);
            transform: scale(1.1);
        }

.fc-icon {
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 3;
}

.fc-prev .fc-icon {
    transform: scaleX(-1);
}