.diagonal-image-row-container {
    width: 100%;
    overflow: hidden;
}

.diagonal-image-row {
    display: flex;
    align-items: center;
    position: relative;
    height: 400px;
    width: 100%;
    background-color: #000000;
    gap: 15px;
}

.diagonal-image-item {
    flex: 1;
    height: 100%;
    position: relative;
    overflow: hidden;
}

.diagonal-image-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease;
}

.diagonal-image-item a {
    display: block;
    width: 100%;
    height: 100%;
}

.diagonal-image-item:hover img {
    transform: scale(1.05);
}

/* First image - rectangle on left, diagonal cut on right */
.diagonal-image-first {
    clip-path: polygon(0 0, 100% 0, calc(100% - 100px) 100%, 0 100%);
    margin-right: -50px;
    flex: 0.9;
}

/* Middle images - parallelogram shape with equal opposite sides */
.diagonal-image-middle {
    clip-path: polygon(100px 0, 100% 0, calc(100% - 100px) 100%, 0 100%);
    margin-left: -50px;
    margin-right: -50px;
    flex: 1.1;
}

/* Last image - diagonal cut on left, rectangle on right */
.diagonal-image-last {
    clip-path: polygon(100px 0, 100% 0, 100% 100%, 0 100%);
    margin-left: -50px;
    flex: 0.9;
}

/* Responsive design */
@media (max-width: 768px) {
    .diagonal-image-row {
        height: 300px;
        gap: 10px;
    }
    
    .diagonal-image-first {
        clip-path: polygon(0 0, 100% 0, calc(100% - 60px) 100%, 0 100%);
        margin-right: -30px;
    }
    
    .diagonal-image-middle {
        clip-path: polygon(60px 0, 100% 0, calc(100% - 60px) 100%, 0 100%);
        margin-left: -30px;
        margin-right: -30px;
    }
    
    .diagonal-image-last {
        clip-path: polygon(60px 0, 100% 0, 100% 100%, 0 100%);
        margin-left: -30px;
    }
}

@media (max-width: 480px) {
    .diagonal-image-row {
        height: 200px;
    }
}