@import "../Components/headerNoImage.css";

#portfolio .portfolio-prev {
    width: 46%;
}
#portfolio .stripe-container-inner { 
    justify-content: space-between;
    gap: 5.21vw 0;
}
#portfolio .portfolio-prev a {
    display: block;
    position: relative;
    height: 42.03vw; /* 807 */
}
#portfolio .portfolio-prev .prev-content {
    padding: 1.04vw 3.13vw; /* 20 60 */
}
#portfolio .portfolio-prev .prev-content p {
    line-height: 1.3;
}
#portfolio .portfolio-prev .image-container {
    height: 100%;
}
#portfolio .portfolio-prev:not(.type-0):not(.type-3) .prev-content {
    position: absolute;
    z-index: 2;
}

/* Tuype 0 
---------------------------------------------*/
    #portfolio .portfolio-prev.type-0 a,
    #portfolio .portfolio-prev.type-3 a  {
        display: flex;
        flex-flow: wrap;
    }
    #portfolio .type-0 .image-container {
        display: block;
        width: 18.8vw; /* 361 */ 
        height: 27.86vw; /* 535 */
        margin: 0 auto;
    }
    #portfolio .portfolio-prev.type-0 .image-container {
        order: 2;
        margin-top: 1.56vw; /* 30 */
    }
    #portfolio .portfolio-prev.type-0 .prev-content {
        order: 1;
        padding: 0;
    }
    #portfolio .portfolio-prev.type-0 a {
        padding: 1.56vw 3.13vw; /* 30 60 */
        flex-direction: column;
        justify-content: flex-start;
    }

/* Tuype 1
---------------------------------------------*/
    #portfolio .portfolio-prev.type-1 .prev-content {
        top: 17%;
        right: 0;
        width: 77%;
        padding-right: 2.08vw; /* 40 */
    }
    #portfolio .portfolio-prev.type-1 .prev-content h2 {
        text-align: right;
        border-bottom: 1px solid #fff;
        padding-bottom: 0.36vw; /* 7 */
        margin-bottom: 0.52vw; /* 10 */
    }

/* Tuype 2
---------------------------------------------*/
    #portfolio .portfolio-prev.type-2 .prev-content {
        text-align: center;
        bottom: 3.13vw; /* 60 */
        left: 0;
        width: 100%;
    }

/* Tuype 3
---------------------------------------------*/
    #portfolio .type-3 .image-container {
        width: 20.57vw; /* 395 */
        height: 27.5vw; /* 528 */
    }
    #portfolio .portfolio-prev.type-3 a {
        flex-direction: unset;
        justify-content: flex-end;
        padding: 2.08vw; /* 40 */
        height: auto;
    }
    #portfolio .portfolio-prev.type-3 .prev-content {
        padding: 1.56vw 0 0 0; /* 30 0 0 0 */
        width: 18.75vw; /* 360 */
    }
    #portfolio .portfolio-prev.type-3 .prev-content h2 {
        padding-bottom: 0.26vw; /* 5 */
        margin-bottom: 0.52vw; /* 10 */
        border-bottom: 1px solid var(--gray-600);
        text-align: right;
    }

/* Tuype 4
---------------------------------------------*/
    #portfolio .portfolio-prev.type-4 .prev-content {
        width: 87%;
        top: 1.56vw; /* 30 */
        left: 0;
    }

/* Tuype 5
---------------------------------------------*/
#portfolio .portfolio-prev.type-5 .prev-content {
    top: 0;
    right: 7%;
    width: 76%;
}
#portfolio .portfolio-prev.type-5 .prev-content h2 {
    text-align: right;
    padding-bottom: 0.42vw; /* 8 */
    margin-bottom: 0.78vw; /* 15 */
    border-bottom: 1px solid #fff;
}


@media screen and (max-width: 1366px) {

}

@media screen and (max-width: 992px) {

}

@media screen and (max-width: 767px) {

}