@import url('https://fonts.cdnfonts.com/css/ica-rubrik-bold');
@import url('https://fonts.cdnfonts.com/css/poppins');
.portfolio{
    background: linear-gradient(90deg, #0f0d1d -76.72%, #3c72fc 191.51%);
}


.img-container {
    width: 900px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: 450px;
    gap: 50px;
    z-index: 2;
}

/* Responsive styling for smaller screens */
@media (max-width: 768px) {
    .img-container {
        width: 100%;
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        gap: 20px;
    }
}

.img-container .item {
    position: relative;
    transition: 0.5s;
    border-radius: 30px;
}

.img-container .item img {
    width: 100%;
    height: auto; /* Allow height to adjust with width for responsive design */
    object-fit: cover;
    transition: 0.5s;
}

.img-container .item:hover img {
    transform: scale(1.1);
    background: linear-gradient(rgb(0, 0, 0, 0), rgba(0,0,0,1));
}

.img-container .item .content {
    position: absolute;
    bottom: 0;
    color: white;
    padding: 20px;
    transform: translateY(120px);
    opacity: 0;
    transition: 0.5s;
    margin: 0;
    border-radius: 30px;
}

.img-container .item:hover .content {
    opacity: 1;
    transform: translateY(0px);
}

.img-container:hover .item:not(:hover) {
    /* filter: blur(8px); */
}

.content {
    color: white;
    size: 12px;
    background: linear-gradient(90deg, #0f0d1d -76.72%, #3c72fc 191.51%);

}

.content h3 {
    size: 2rem;
    color: white;
}

.slider {
    width: 100%;
    height: var(--height);
    overflow: hidden;
    z-index: 1;
    margin-top: 30px;
    margin-bottom: 30px;
    mask-image: linear-gradient(to right, transparent, white, transparent);
}

.slider .list {
    display: flex;
    width: 100%;
    min-width: calc(var(--width) * var(--quantity));
    position: relative;
}

.slider .list .item {
    width: var(--width);
    height: var(--height);
    position: absolute;
    left: 100%;
    animation: autoRun 10s linear infinite;
    animation-delay: calc((10s / var(--quantity)) * (var(--position) - 1));
}

.slider .list .item img {
    width: 100%;
}


@keyframes autoRun{
    from{
        left: 100%;
    }to{
        left: calc(var(--width) * -1);
    }
}