.cw-portfolio-wrap {
    display: flex;
    width: 100%;
}

.cw-portfolio {
    --cw-portfolio-card-width: 25%;
    --cw-portfolio-spv: 2;
    --cw-portfolio-scroll: 1;
    --cw-portfolio-gap: 22px;
    --cw-portfolio-column-gap: var(--cw-portfolio-gap);
    --cw-portfolio-row-gap: var(--cw-portfolio-gap);
    --cw-portfolio-speed: 550ms;
    --cw-portfolio-easing: cubic-bezier(0.22, 1, 0.36, 1);
    --cw-portfolio-card-bg: #f5f1fa;
    --cw-portfolio-card-bg-hover: var(--cw-portfolio-card-bg);
    --cw-portfolio-item-bg: var(--cw-portfolio-card-bg);
    --cw-portfolio-item-bg-hover: var(--cw-portfolio-card-bg-hover);
    --cw-portfolio-accent: #252057;
    --cw-portfolio-accent-hover: var(--cw-portfolio-accent);
    --cw-portfolio-item-accent: var(--cw-portfolio-accent);
    --cw-portfolio-content-gap: 18px;
    --cw-portfolio-card-lift: 0px;
    --cw-portfolio-card-transition: 300ms;
    --cw-portfolio-overlay-color: #dce7f2;
    --cw-portfolio-overlay-opacity: 58%;
    --cw-portfolio-image-blur: 4px;
    --cw-portfolio-image-scale: 1.03;
    --cw-portfolio-image-duration: 350ms;
    --cw-portfolio-button-x: 50%;
    --cw-portfolio-button-y: 50%;
    --cw-portfolio-nav-size: 44px;
    --cw-portfolio-nav-offset: 12px;
    --cw-portfolio-pagination-gap: 18px;
    --cw-portfolio-dot-size: 8px;
    --cw-portfolio-dot-active-scale: 1.35;
    position: relative;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

.cw-portfolio *,
.cw-portfolio *::before,
.cw-portfolio *::after {
    box-sizing: border-box;
}

.cw-portfolio__viewport {
    width: 100%;
    min-width: 0;
    overflow: hidden;
    outline: none;
}

.cw-portfolio--grid .cw-portfolio__viewport {
    overflow: visible;
}

.cw-portfolio__track {
    min-width: 0;
}

/* حالت معمولی: عرض هر کارت درصدی است و ردیف‌ها به‌صورت خودکار ساخته می‌شوند. */
.cw-portfolio--grid .cw-portfolio__track {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
    min-width: 0;
    row-gap: var(--cw-portfolio-row-gap);
    justify-content: right;
}

/*
 * فاصله افقی داخل خود ستون اعمال می‌شود؛ بنابراین 4 کارت با عرض 25٪،
 * 3 کارت با 33.33٪ و 2 کارت با 50٪ بدون شکستن ناخواسته در یک ردیف می‌مانند.
 */
.cw-portfolio--grid .cw-portfolio__slide {
    flex: 0 0 var(--cw-portfolio-item-width, var(--cw-portfolio-card-width));
    width: var(--cw-portfolio-item-width, var(--cw-portfolio-card-width));
    max-width: var(--cw-portfolio-item-width, var(--cw-portfolio-card-width));
    min-width: 0;
    padding-inline: calc(var(--cw-portfolio-column-gap) / 2);
}

.cw-portfolio--slider .cw-portfolio__track {
    display: flex;
    flex-wrap: nowrap;
    gap: var(--cw-portfolio-gap);
    will-change: transform;
    transition-property: transform;
    transition-duration: var(--cw-portfolio-speed);
    transition-timing-function: var(--cw-portfolio-easing);
}

.cw-portfolio--slider .cw-portfolio__slide {
    flex: 0 0 calc((100% - (var(--cw-portfolio-gap) * (var(--cw-portfolio-spv) - 1))) / var(--cw-portfolio-spv));
    min-width: 0;
}

.cw-portfolio--grid .cw-portfolio__slide {
    min-width: 0;
}

.cw-portfolio--grid.cw-portfolio--equal-height .cw-portfolio__slide {
    align-self: stretch;
}

.cw-portfolio--grid.cw-portfolio--auto-height .cw-portfolio__slide {
    align-self: start;
}

.cw-portfolio--grid.cw-portfolio--auto-height .cw-portfolio__card {
    height: auto;
}

.cw-portfolio__slide {
    height: auto;
    --cw-portfolio-item-bg: var(--cw-portfolio-card-bg);
    --cw-portfolio-item-bg-hover: var(--cw-portfolio-card-bg-hover);
    --cw-portfolio-item-accent: var(--cw-portfolio-accent);
}

.cw-portfolio__slide.is-clone {
    pointer-events: none;
}

.cw-portfolio__card {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    min-width: 0;
    overflow: hidden;
    background: var(--cw-portfolio-item-bg);
    text-decoration: none;
    color: inherit;
    transform: translateY(0);
    transition: transform var(--cw-portfolio-card-transition) ease, box-shadow var(--cw-portfolio-card-transition) ease, background-color var(--cw-portfolio-card-transition) ease;
}

.cw-portfolio__card--linked {
    cursor: pointer;
}

.cw-portfolio__card:hover,
.cw-portfolio__card:focus-within {
    transform: translateY(var(--cw-portfolio-card-lift));
    background: var(--cw-portfolio-item-bg-hover, var(--cw-portfolio-item-bg));
}

.cw-portfolio__image-wrap {
    position: relative;
    width: 100%;
    min-height: 0;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.035);
    isolation: isolate;
}

.cw-portfolio__image-wrap[style*="aspect-ratio: auto"],
.cw-portfolio__image-wrap[style*="aspect-ratio:auto"] {
    aspect-ratio: auto !important;
}

.cw-portfolio__image {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 100%;
    transform: scale(1);
    filter: blur(0);
    transition: transform var(--cw-portfolio-image-duration) ease, filter var(--cw-portfolio-image-duration) ease;
}

.cw-portfolio__image-link {
    position: absolute;
    inset: 0;
    z-index: 4;
}

.cw-portfolio__overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background: var(--cw-portfolio-overlay-color);
    opacity: 0;
    transition: opacity var(--cw-portfolio-image-duration) ease;
}

.cw-portfolio__button {
    position: absolute;
    left: var(--cw-portfolio-button-x);
    top: var(--cw-portfolio-button-y);
    z-index: 6;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    max-width: calc(100% - 24px);
    text-align: center;
    white-space: nowrap;
    text-decoration: none;
    transform: translate(-50%, -50%) scale(.96);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--cw-portfolio-image-duration) ease, transform var(--cw-portfolio-image-duration) ease, color .2s ease, background-color .2s ease, border-color .2s ease;
}

/* Hover behavior is intentionally tied to the whole card, not only the image. */
.cw-portfolio__card:hover .cw-portfolio__overlay,
.cw-portfolio__card:focus-within .cw-portfolio__overlay {
    opacity: var(--cw-portfolio-overlay-opacity);
}

.cw-portfolio__card:hover .cw-portfolio__image,
.cw-portfolio__card:focus-within .cw-portfolio__image {
    filter: blur(var(--cw-portfolio-image-blur));
    transform: scale(var(--cw-portfolio-image-scale));
}

.cw-portfolio--button-hover .cw-portfolio__card:hover .cw-portfolio__button,
.cw-portfolio--button-hover .cw-portfolio__card:focus-within .cw-portfolio__button {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
    pointer-events: auto;
}

.cw-portfolio__content {
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding-top: var(--cw-portfolio-content-gap);
}

.cw-portfolio__title-row {
    display: flex;
    align-items: center;
    min-width: 0;
}

.cw-portfolio__title {
    min-width: 0;
    line-height: 1.5;
}

.cw-portfolio__decoration {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--cw-portfolio-item-accent);
    line-height: 1;
    transition: color .2s ease;
}

.cw-portfolio__decoration i {
    color: currentColor;
    line-height: 1;
}

.cw-portfolio__decoration svg {
    display: block;
    width: 1em;
    height: 1em;
    fill: currentColor;
    color: currentColor;
}

.cw-portfolio__card:hover .cw-portfolio__decoration,
.cw-portfolio__card:focus-within .cw-portfolio__decoration {
    color: var(--cw-portfolio-accent-hover, var(--cw-portfolio-item-accent));
}

.cw-portfolio__subtitle {
    line-height: 1.8;
}

.cw-portfolio__nav {
    position: absolute;
    top: 50%;
    z-index: 20;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--cw-portfolio-nav-size);
    height: var(--cw-portfolio-nav-size);
    padding: 0;
    border: 1px solid transparent;
    appearance: none;
    cursor: pointer;
    transform: translateY(-50%);
    transition: color .2s ease, background-color .2s ease, border-color .2s ease, opacity .2s ease;
}

.cw-portfolio__nav:disabled {
    opacity: .35;
    cursor: not-allowed;
}

.cw-portfolio--dir-ltr .cw-portfolio__nav--prev,
.cw-portfolio--dir-rtl .cw-portfolio__nav--next {
    left: var(--cw-portfolio-nav-offset);
}

.cw-portfolio--dir-ltr .cw-portfolio__nav--next,
.cw-portfolio--dir-rtl .cw-portfolio__nav--prev {
    right: var(--cw-portfolio-nav-offset);
}

.cw-portfolio--nav-outside.cw-portfolio--dir-ltr .cw-portfolio__nav--prev,
.cw-portfolio--nav-outside.cw-portfolio--dir-rtl .cw-portfolio__nav--next {
    left: calc((var(--cw-portfolio-nav-size) + var(--cw-portfolio-nav-offset)) * -1);
}

.cw-portfolio--nav-outside.cw-portfolio--dir-ltr .cw-portfolio__nav--next,
.cw-portfolio--nav-outside.cw-portfolio--dir-rtl .cw-portfolio__nav--prev {
    right: calc((var(--cw-portfolio-nav-size) + var(--cw-portfolio-nav-offset)) * -1);
}

.cw-portfolio__nav svg {
    display: block;
    width: 20px;
    height: 20px;
}

.cw-portfolio__pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: var(--cw-portfolio-pagination-gap);
}

.cw-portfolio__dot {
    width: var(--cw-portfolio-dot-size);
    height: var(--cw-portfolio-dot-size);
    padding: 0;
    border: 0;
    border-radius: 999px;
    appearance: none;
    cursor: pointer;
    transform: scale(1);
    transition: transform .2s ease, background-color .2s ease;
}

.cw-portfolio__dot.is-active {
    transform: scale(var(--cw-portfolio-dot-active-scale));
}

.cw-portfolio--draggable .cw-portfolio__viewport {
    cursor: grab;
    touch-action: pan-y;
}

.cw-portfolio--draggable.is-dragging .cw-portfolio__viewport {
    cursor: grabbing;
}

.cw-portfolio.is-dragging .cw-portfolio__track {
    transition: none !important;
}

.cw-portfolio.is-dragging .cw-portfolio__slide,
.cw-portfolio.is-dragging .cw-portfolio__slide * {
    user-select: none;
}

.cw-portfolio__viewport:focus-visible,
.cw-portfolio__nav:focus-visible,
.cw-portfolio__dot:focus-visible,
.cw-portfolio__button:focus-visible,
.cw-portfolio__card--linked:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 3px;
}

@media (hover: none), (pointer: coarse) {
    .cw-portfolio--button-hover .cw-portfolio__button {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
        pointer-events: auto;
    }

    .cw-portfolio--button-hover .cw-portfolio__overlay {
        opacity: calc(var(--cw-portfolio-overlay-opacity) * .35);
    }

    .cw-portfolio--button-hover .cw-portfolio__image {
        filter: blur(calc(var(--cw-portfolio-image-blur) * .35));
    }
}

@media (prefers-reduced-motion: reduce) {
    .cw-portfolio__track,
    .cw-portfolio__card,
    .cw-portfolio__image,
    .cw-portfolio__overlay,
    .cw-portfolio__button,
    .cw-portfolio__nav,
    .cw-portfolio__dot {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}

.cw-portfolio.is-static-slider .cw-portfolio__nav,
.cw-portfolio.is-static-slider .cw-portfolio__pagination {
    display: none !important;
}

.cw-portfolio__title,
.cw-portfolio__subtitle {
    margin-block-start: 0;
    margin-block-end: 0;
}