.kss_portfolio {
    width: 100%;
}

.kss_portfolio__inner {
    display:grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 2rem;
    position: relative;
    color: black;
    max-width: unset!important;
}

.kss_portfolio__inner .slick-list {
    margin-bottom: 3rem;
}

.kss_portfolio__inner .slick-arrow {
    position: absolute;
    bottom: 2rem;
}
.kss_portfolio__inner .slick-arrow.slick-prev {
    left: 0;
}
.kss_portfolio__inner .slick-arrow.slick-next {
    right: 0;
}

.kss_portfolio .slick-dots {
    display: flex;
    justify-content: center;
    gap:2rem;
    bottom: -2rem;
}

.kss_portfolio .slick-dots li {
    font-size: 1.25rem;
}

.kss_portfolio .slick-dots .slick-active {
    color: var(--kss-primary-color);
}

.flip-card {
    background-color: transparent;
    grid-column: span 3 / span 3;
    width: 100%;
    height: 300px;
    perspective: 1000px;
}

@media screen and (max-width: 1200px){
    .flip-card {
        grid-column: span 4 / span 4;
    }
}

@media screen and (max-width: 768px){
    .flip-card {
        grid-column: span 6 / span 6;
    }
}

@media screen and (max-width: 576px){
    .kss_portfolio__inner {
        display:block;
        grid-template-columns: repeat(12, 1fr);
        margin: unset;
    }
    
    .flip-card {
        grid-column: span 12 / span 12;
        margin-bottom: 1rem;
    }
}

.flip-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    background-color: var(--kss-color-white);
    transition: transform 0.6s;
    transform-style: preserve-3d;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
}

.flip-card:hover .flip-card-inner {
    transform: rotateY(180deg);
}

.flip-card-front,
.flip-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    border-radius: 15px;
}

.flip-card-front {
    background-color: white;
    color: black;
}

.flip-card-front img {
    width: 100%;
    height: 100%;
}

.flip-card-back {
    background-color: var(--kss-color-white);
    color: black;
    transform: rotateY(180deg);
}

.flip-card-back__inner {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
}

.flip-card-back span {
    display: block;
    margin: 1rem;
    overflow: hidden;
}

.flip-card-back span p {
    font-size: 18px;
}

.flip-card-back .card-btn{
    color: var(--kss-color-black);
    text-decoration: none;
    font-size: var(--kss-copy-text);
    border: 1px solid var(--kss-primary-color);
    border-radius:var(--kss-brand-border-radius-default);
    width: fit-content;
    padding: 0.5rem 1rem;
    margin-bottom: 1rem;
}

.flip-card-back .card-btn:hover{
    background-color: var(--kss-primary-color);
    color: var(--kss-color-black);
    text-decoration: none;
    border: 1px solid transparent;
    border-radius:var(--kss-brand-border-radius-default);
    width: fit-content;
    padding: 0.5rem 1rem;
    transition: all 0.35s ease-in-out;
}