body {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
}

.container {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 20px;
    padding: 20px;
}
.containermid {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 20px;
    padding: 20px;
    width: 70%; /* Set the container width to 80% */
    margin: 0 auto; /* Center the container horizontally */
    box-sizing: border-box; /* Ensure the padding and border are included in the width */
}
.tile {
    cursor: pointer;
    text-align: center;
    width: 250px; /* Set tile width */
    box-sizing: border-box; /* Include padding in the width */
    padding: 10px; /* Add some padding inside the tile */
}

.tile img {
    max-width: 100%;
    height: auto;
}
.tile p {
    text-align: left; /* Aligns the text to the left */
    margin: 10px 0 0; /* Adds a bit of margin at the top to separate from the image */
}
footer {
    text-align: center;
    margin-top: 20px;
    padding: 10px;
    background-color: #f3f3f3;
}

/* For tablets and PCs */
@media (min-width: 768px) {
    .container {
        flex-direction: row;
    }
}

/* For mobile devices */
@media (max-width: 767px) {
    .container {
        flex-direction: column;
    }
}