.TranslateImageColumn {
    aspect-ratio: 16/10;
    border-radius: 8px;
    left: 0;
    max-width: 330px;
    overflow: hidden;
    position: absolute;
    top: 0;
    width: 20%;
    z-index: 1000
}

.TranslateImageColumn__inner {
    height: 100%;
    position: relative;
    width: 100%
}

.TranslateImageColumn__inner__row {
    -webkit-clip-path: inset(0 0 0 0);
    clip-path: inset(0 0 0 0);
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%
}

.TranslateImageColumn__image {
    position: absolute;
    transition: transform .45s cubic-bezier(.25, 1, .5, 1)
}

.TranslateImageColumn__image--left,
.TranslateImageColumn__image--right {
    transform: scale(1.2);
    visibility: hidden
}

.TranslateImageColumn__image.current {
    transform: scale(1);
    z-index: 10
}

.TranslateImageColumn__image img {
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    width: 100%
}

:root {
    --z-under: 0;
    --z-default: 1;
    --z-above: 2;
    --z-header: 20;
    --z-overlay: 20;
    --z-loader: 100;
    --red: #ff2803;
    --yellow: #f9b71b;
    --blue: #1795f0;
    --green: #30e462;
    --ultra-dark: #000;
    --dark: #150c0f;
    --medium-dark: #201317;
    --sand: #f4f5ef;
    --white: #fff;
    --large: 1440px;
    --desktop: 1280px;
    --tablet-h: 1024px;
    --tablet: 979px;
    --tablet-w: 768px;
    --mobile-w: 640px;
    --mobile: 480px
}

.ProjectsList {
    --font-color: var(--dark);
    background-color: var(--sand);
    overflow: hidden;
    padding-bottom: 24px;
    padding-top: 24px;
    position: relative;
    z-index: var(--z-above)
}

.ProjectsList--cases {
    background-color: var(--white)
}

.ProjectsList--cases .Perspective__container__face--front,
.ProjectsList--cases .Perspective__container__face--top {
    background-color: var(--white) !important
}

.ProjectsList--cases .ProjectsList__marquees {
    margin-top: 0 !important
}

.ProjectsList--appear .ProjectsList__marquees__marquee:first-child .Perspective__container {
    transition-delay: .1s
}

.ProjectsList--appear .ProjectsList__marquees__marquee:nth-child(2) .Perspective__container {
    transition-delay: .2s
}

.ProjectsList--appear .ProjectsList__marquees__marquee:nth-child(3) .Perspective__container {
    transition-delay: .3s
}

.ProjectsList--appear .ProjectsList__marquees__marquee:nth-child(4) .Perspective__container {
    transition-delay: .4s
}

.ProjectsList--appear .ProjectsList__marquees__marquee:nth-child(5) .Perspective__container {
    transition-delay: .5s
}

.ProjectsList--appear .ProjectsList__marquees__marquee:nth-child(6) .Perspective__container {
    transition-delay: .6s
}

.ProjectsList--appear .ProjectsList__marquees__marquee:nth-child(7) .Perspective__container {
    transition-delay: .7s
}

.ProjectsList--appear .ProjectsList__marquees__marquee:nth-child(8) .Perspective__container {
    transition-delay: .8s
}

.ProjectsList--appear .ProjectsList__marquees__marquee:nth-child(9) .Perspective__container {
    transition-delay: .9s
}

.ProjectsList--appear .ProjectsList__marquees__marquee:nth-child(10) .Perspective__container {
    transition-delay: 1s
}

.ProjectsList__marquees {
    margin-top: 200px
}

@media (max-width:640px) {
    .ProjectsList__marquees {
        margin-top: 40px
    }
}

.ProjectsList__marquees__marquee .Perspective__container__face--back {
    background-color: var(--study--color)
}

.ProjectsList__marquees__marquee .Perspective__container {
    transition: transform .55s cubic-bezier(.25, 1, .5, 1)
}

.ProjectsList__marquees__marquee .Perspective__container__face {
    transition: opacity .3s cubic-bezier(.65, 0, .35, 1)
}

.ProjectsList__marquees__marquee .Perspective__container__face--top {
    background-color: var(--sand)
}

.ProjectsList__marquees__marquee .Perspective__container__face--back {
    opacity: 1
}

.ProjectsList__marquees__marquee .Perspective__container__face--back .COCustom {
    opacity: 1 !important
}

.ProjectsList__marquees__marquee .Perspective__container__face--back .CText {
    opacity: .5
}

.touch-device .ProjectsList__marquees__marquee .Perspective__container__face--back .CText {
    opacity: 1
}

.ProjectsList__marquees__marquee .Perspective__container__face--back:after {
    opacity: .2
}

.touch-device .ProjectsList__marquees__marquee .Perspective__container__face--back:after {
    opacity: 0 !important
}

.ProjectsList__marquees__marquee:hover .Perspective__container {
    transform: translateZ(calc(var(--height)*-1)) rotateX(-180deg)
}

.ProjectsList__marquees__marquee:hover .Perspective__container__face--top .CText {
    opacity: 0
}

.ProjectsList__marquees__marquee:hover .Perspective__container__face--top:after {
    opacity: .2 !important
}

.ProjectsList__marquees__marquee:hover .Perspective__container__face--back .CText {
    opacity: 1 !important
}

.ProjectsList__marquees__marquee:hover .Perspective__container__face--back:after {
    opacity: 0 !important
}

.ProjectsList__marquees__content {
    align-items: center;
    display: flex;
    height: auto;
    justify-content: center;
    width: 100%
}

.ProjectsList__marquees__link {
    color: var(--dark);
    padding: 0 32px
}

.ProjectsList__marquees__link .COCustom {
    background-color: var(--dark)
}

.ProjectsList__marquees__link .CText {
    white-space: nowrap
}

.ProjectsList__image {
    aspect-ratio: 16/10;
    border-radius: 8px;
    left: 0;
    max-width: 330px;
    overflow: hidden;
    pointer-events: none;
    position: absolute;
    top: 90px;
    width: 20%;
    will-change: transform
}

.ProjectsList__image img {
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    width: 100%
}

.ProjectsList__button {
    display: flex;
    justify-content: center;
    padding: 32px 24px
}