/* body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    background-color: #000;
} */

.diamond-grid {
    margin-top: 100px;
    margin-right: 80px;
    display: grid;
    grid-template-columns: repeat(5, 100px); /* 5 diamonds per row */
    grid-gap: 180px;
}

.diamond {
    width: 250px;
    height: 250px;
    background-color: #333; /* Dark gray diamonds */
    position: relative;
    transform: rotate(45deg);
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid #fff; /* White border for the diamonds */
}

.diamond-inner {
    width: 60%;
    height: 60%;
    background: linear-gradient(to right, rgba(255, 255, 255, 1), rgba(128, 128, 128, 1));
    transform: rotate(-45deg);
    z-index: -1;
}

/* For medium screens (tablets and smaller) */
@media (max-width: 1200px) {
    .diamond-grid {
        grid-template-columns: repeat(3, 100px); /* 3 diamonds per row */
        grid-gap: 140px; /* Reduce spacing */
    }
    .diamond {
        width: 200px;
        height: 200px;
    }
    .diamond-inner h3 {
        font-size: 20px;
    }

}

/* For small screens (mobile) */
@media (max-width: 576px) {
    .diamond-grid {
        grid-template-columns: repeat(2, 100px); /* 2 diamonds per row */
        grid-gap: 120px; /* Further reduce spacing */
    }

    .diamond {
        width: 180px;
        height: 180px;
    }

    .diamond-inner h3 {
        font-size: 18px;
    }
    
}