/*mobile first css grid*/
.grid-container3 {
    display: grid;
    /* Default: 1 column for mobile */
    grid-template-columns: 1fr;
    gap: 20px;
}

.item3 {
    background-color: rgba(75, 75, 96, 0.7);
    color: white;
    padding: 20px;
    text-align: center;
    border: 1px solid blue;
    border-radius: 15px;
    align-content: center;
    object-fit: cover;
    box-shadow: 0 8px 6px 0 rgba(0, 0, 255, 0.3);
}

    .item3 img {
        width: 100%;
        height: 100%; /* Forces image to fill the grid cell height */
        object-fit: cover; /* Prevents distortion */
        border-radius: 15px;
    }

/* Tablet/PC: 3 columns when screen is wider than 768px */
@media (min-width: 768px) {
    .grid-container3 {
        grid-template-columns: repeat(3, 1fr);
    }
}

/*mobile first css grid*/
.grid-container2 {
    display: grid;
    /* Default: 1 column for mobile */
    grid-template-columns: 1fr;
    gap: 20px;
}

/* Tablet/PC: 3 columns when screen is wider than 768px */
@media (min-width: 768px) {
    .grid-container2 {
        grid-template-columns: repeat(2, 1fr);
    }
}