.detailMask {
    -webkit-mask-image: url(../media/detailProjectMask.svg);
    -webkit-mask-position: center center;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: cover;

    mask-image: url(../media/detailProjectMask.svg);
    mask-position: center center;
    mask-repeat: no-repeat;
    mask-size: cover;
}

.project {
    position: relative;
    aspect-ratio: 1900 / 604;
    object-fit: cover;
    width: 90vw;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 50px;

    background-color: var(--lightBlue);
}

.project .content {
    padding: 40px;
}

.project .mockup {
    position: absolute;
    width: 30%;
    height: auto;
    bottom: -250px;
    z-index: -1;

}

.project .bba.left {
    left: 1% !important;
    width: 70%;
}

.project .bba.right {
    right: 1% !important;
    width: 70%;
    animation-delay: 650ms !important;
}

.project .bba.left,
.project .bba.right {
    bottom: -70%;
    animation: mockup-bba;
    animation-duration: .3s;
    animation-timing-function: ease-out;
    animation-delay: 250ms;
    animation-fill-mode: backwards;
}


.project .left {
    left: 18%;
    bottom: -40%;
    animation: mockup;
    animation-duration: .3s;
    animation-timing-function: ease-out;
    animation-delay: 250ms;
    animation-fill-mode: backwards;
}

.project .right {
    right: 18%;
    bottom: -40%;
    animation: mockup;
    animation-duration: .3s;
    animation-timing-function: ease-out;
    animation-delay: 600ms;
    animation-fill-mode: backwards;
}

.project .arrow-btn {
    width: 80px;
    rotate: 180deg;
}

@keyframes mockup {
    0% {
        bottom: -200%;
    }

    60% {
        bottom: -32%;
    }

    100% {
        bottom: -40%;
    }
}

@keyframes mockup-bba {
    0% {
        bottom: -200%;
    }

    60% {
        bottom: -62%;
    }

    100% {
        bottom: -70%;
    }
}

/* tekst */


.details {
    display: flex;
    background-color: var(--blue);
    padding: 10px 40px;
    border-radius: 20px;
    justify-content: space-between;
    width: 80vw;
    margin-bottom: 100px;
}

.details .item {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--white);
    font-family: "Funnel Display", sans-serif;
    font-weight: 200;
}

.title {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 50px;
}

.title img{
    max-width: 100px;
}

.imageGrid {
    width: 90vw;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.imageCollumn {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.imageGrid img {
    width: 100%;
    height: auto;
    border-radius: 50px;
}

@media screen and (max-width: 768px) {
    .imageGrid img{
        border-radius: 1%;
    }
}