/* CSS Document for Screens */



/* Container rules */
.sidebarLinks {
    display: flex;
    flex-wrap: wrap;        /* Allows items to move to the next row */
    gap: 25px;              /* Spacing between columns and rows */
    width: 100%;
    box-sizing: border-box;
}

/* Individual item rules */
.sidebarLinks .announce {
    /* Calculates a perfect 3-column width accounting for the gaps */
    flex: 0 0 calc((100% - (25px * 2)) / 3); 
    box-sizing: border-box;
}

/* Make sure the clickable links and content fill the cards */
.sidebarLinks .announce a {
    display: block;
    text-decoration: none;
}

/* Responsive design for tablets (2x3 grid) */
@media (max-width: 768px) {
    .sidebarLinks .announce {
        flex: 0 0 calc((100% - 20px) / 2); 
    }
}

/* Responsive design for mobile phones (1-column stack) */
@media (max-width: 480px) {
    .sidebarLinks .announce {
        flex: 0 0 100%; 
    }
}