html {
    position: relative;
    min-height: 100%;
    font-size: 14px;
}

/* Clean Typography & Centering for the Date Heading */
h1 {
    text-align: center;
    /* Uses clean, premium system fonts (Apple's San Francisco, Android's Roboto) */
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: 1.8rem;
    font-weight: 700;
    color: #1E293B; /* Sophisticated slate dark color instead of harsh pure black */
    margin-top: 24px;
    margin-bottom: 8px;
    letter-spacing: -0.02em; /* Gives headings a high-end, tighter editorial feel */
}

/* Update your bin labels to match the new typography theme */
.bin-label {
    margin-top: 12px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-weight: 500; /* Medium weight looks cleaner than super bold on small text */
    font-size: 0.95rem;
    color: #475569; /* Slightly softer grey text to match your palette */
}

/* 1. The Main Outer Container */
#collections-container {
    display: flex; /* Tells items to sit in a row */
    flex-wrap: wrap; /* Crucial: Allows items to drop to the next line if crowded */
    gap: 20px; /* Spacing between the bins */
    justify-content: center; /* Centers the bins on the screen */
    padding: 15px;
    width: 100%;
    box-sizing: border-box;
}

/* 2. The Card Wrapper around each Bin */
.bin-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    /* This calculation targets 3 per row by default, taking the gaps into account.
       'flex-grow: 1' lets them expand nicely, while 'max-width' prevents them 
       from getting ridiculously huge on desktop screens. */
    flex: 1 1 calc(33.333% - 20px);
    min-width: 140px; /* Drops to a new row when the screen is too narrow for 140px */
    max-width: 200px; /* Keeps the bins looking sharp on larger screens */
}

/* 3. The SVG Image Itself */
.web-bin {
    width: 100%; /* Fills up the container width dynamically */
    max-width: 120px; /* Absolute ceiling size so the asset stays looking crisp */
    height: auto; /* Maintains your custom tight-cropped ratio */
}

/* 4. The Text Label Below the Bin (Optional) */
.bin-label {
    margin-top: 10px;
    font-family: sans-serif;
    font-weight: 600;
    font-size: 0.95rem;
    color: #333;
}