.OutcasterCrew {
    cursor: grab;
    --cardHeight: 25.68rem;
    --cardWidth: 16.68rem;
}

.OutcasterCrew .swiper-wrapper {
    height: auto !important;
}
    
.OutcasterMember {
    position: relative;
    display: flex;
    align-items: flex-end;
    width: var(--cardWidth);
    height: var(--cardHeight);
    fill: rgba(255, 255, 255, 0.10);
    stroke-width: 1px;
    stroke: var(--Card-Stroke, rgba(249, 245, 214, 0.00));
    backdrop-filter: blur(10px);
}

.OutcasterMember-background {
    position: absolute;
    z-index: -1;
    inset: 0;
    width: 100%;
    height: 100%;
}

.normalBackground {
    opacity: 1;
    transition: opacity 0.3s;
}

.OutcasterMember:is(:hover,:focus) .normalBackground {
    opacity: 0;
}

.hoverBackground {
    opacity: 0;
    transition: opacity 0.3s;
}

.OutcasterMember:is(:hover,:focus) .hoverBackground {
    opacity: 1;
}

.OutcasterMember-photo {
    position: absolute;
    z-index: -1;
    inset: 0.5rem;
    filter: opacity(40%) saturate(70%) contrast(120%);
    transition: filter 0.2s;
}

.OutcasterMember:is(:hover,:focus) .OutcasterMember-photo {
    filter: opacity(100%) saturate(100%) contrast(100%);
}

.OutcasterMember-photo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.OutcasterMember-info {
    padding: 8.69rem 0.75rem 0.75rem;
    color: var(--clr-primary-goldenrod);
    background: linear-gradient(180deg, rgba(140, 63, 54, 0) 0%, rgba(140, 63, 54, 0) 70%);
    transition: background 0.4s;
}

.OutcasterMember:is(:hover,:focus) .OutcasterMember-info {
    background: linear-gradient(180deg, rgba(140, 63, 54, 0) 0%, #8C3F36 70%);
}

.OutcasterMember-badge {
    height: 1.6rem;
    margin-bottom: 1.1rem;
    visibility: visible;
    opacity: 1;
    transition: visibility 0.3s, opacity 0.3s;
}

.OutcasterMember:is(:hover,:focus) .OutcasterMember-badge {
    visibility: hidden;
    opacity: 0;
}

.OutcasterMember-description {
    margin-top: 0;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: margin-top 0.6s 0.1s, max-height 0.3s ease-in-out, opacity 0.3s;
    
}

.OutcasterMember:is(:hover,:focus) .OutcasterMember-description {
    margin-top: 1rem;
    opacity: 1;
    max-height: var(--cardHeight);
}

.OutcasterMember-description > *:last-child {
    margin-bottom: 0;
}

.Swiper--full-interactions {
    display: flex;
    margin-top: 4rem;
    justify-content: space-between;
    align-items: center;
}

.Swiper--full-scrollBar {
    --swiper-scrollbar-bottom: 1.17rem;
    --swiper-scrollbar-size: 0.5rem;
    --swiper-scrollbar-sides-offset: 0%;
    --swiper-scrollbar-bg-color: var(--clr-light-gray);
    --swiper-scrollbar-drag-bg-color: var(--clr-secondary-desertsand);
    position: relative;
    width: 100%;
    max-width: calc(100% - 6.5rem);
    height: 0.8rem;
    background: var(--clr-white-10);
    border-radius: 0.5rem;
}

.Swiper--full-navBtns {
    display: flex;
    gap: 0.5rem;
}

:is(.Swiper--full-next, .Swiper--full-prev) {
    position: unset;
    flex-basis: 2.625rem;
    width: 2rem;
    height: 2rem;
    background-image: url('../icons/arrow.svg');
    background-repeat: no-repeat;
    filter: brightness(0) saturate(100%) invert(79%) sepia(7%) saturate(2110%) hue-rotate(333deg) brightness(110%) contrast(87%);
    border-radius: 50%;
}

:is(.Swiper--full-next, .Swiper--full-prev):is(:hover, :focus) {
    background-color: var(--clr-white-10);
}

.Swiper--full-next {
    transform: scaleX(-1);
}


@media (width >= 48em) {
    .OutcasterCrew {
        --cardWidth: 19.375rem;
        --cardHeight: 29.8125rem;
    }
    .OutcasterMember-description,
    .OutcasterMember-roles {
        font-size: 1.2rem;
    }
}