/* This stuff deals with the platform table on the index page*/
.platforms {
    width: 100%;
    margin-bottom: 40px; /* Space between sections */
}

.platform-group {
    margin-bottom: 20px;
}

.headers {
    text-align: center;
    margin-bottom: 20px;
}

/* Flexbox styling for the platform table */
.table {
    display: flex;
    flex-wrap: wrap;
    justify-content: center; /* Aligns items with reduced space between them */
    gap: 10px; /* Reduced gap between images */
}

.table a {
    flex: 1 1 23%; /* Adjusted width for four items per row with smaller gap */
    max-width: 23%; /* Ensures items do not exceed this width */
    box-sizing: border-box;
    text-align: center;
    margin: 5px 0; /* Reduced vertical margin */
}

.table img {
    width: 100%;
    height: auto;
    transition: transform 0.25s ease;
    max-width: 300px; /* Set a maximum size for the images */
    margin: 0 auto; /* Center the image if it's smaller than the container */
}

.table img:hover {
    transform: scale(1.1);
}

/* Specific headers for each group */
.platform-group h2 {
    text-align: center;
    font-size: 1.5em;
    margin-bottom: 15px;
}
/* Media query for smaller screens (mobile devices) */
@media (max-width: 768px) {
    .table a {
        flex: 1 1 30%; /* Three items per row */
        max-width: 30%;
    }
}

/* Media query for very small screens (e.g., small mobile devices) */
@media (max-width: 480px) {
    .table a {
        flex: 1 1 45%; /* Two items per row */
        max-width: 45%;
    }
}