div { border: 1px solid transparent; } /* Dummy rule */


/* Keep your existing .tile-card styles, then add: */
.grid-container {
    display: grid;
    /* This is the magic line for responsiveness */
    grid-template-columns: repeat(3, 1fr);
    #gap: 2px;
    #padding: 16px;
}

/* Ensure tiles look consistent in a grid */
.tile-card {
    margin: 0; /* Let the grid gap handle spacing */
    width: auto; /* Allow grid to determine width */
}

.tile-card {
    /* Layout & Sizing */
    #width: 150px;
    #height: 150px;
    aspect-ratio: 1 / 1;
    padding: 24px;
    margin: 2px;
    display: flex;
    flex-direction: column;
    gap: 8px;

    /* Visual Style */
    background-color: #747474ff;
    #border-radius: 15px; /* Rounded corners for a modern mobile look */
    border: 1px solid #000000ff;
    
    /* Shadow for depth */
    box-shadow: 0 4px 6px -1px rgba(228, 4, 4, 0.1), 
                0 2px 4px -1px rgba(0, 0, 0, 0.06);

    /* Animation */
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    cursor: pointer;
    
    /* Prevent text selection when tapping */
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

/* Hover state (Desktop) */
@media (hover: hover) {
    .tile-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    }
}

/* Active state (Touch/Click) */
.tile-card:active {
    transform: scale(0.96);
    background-color: #d10707ff;
}

/* Inner Content Styling */
.tile-card h2 {
    margin: 0;
    font-size: 1.25rem;
    color: #000000ff;
}

.tile-card p {
    margin: 0;
    font-size: 0.95rem;
    color: #000000ff;
    line-height: 1.5;
}