@media (max-width: 480px) {

  /* Grid container with multiple columns */
  .grid-container {
    padding: 1% 0;
    width: 100vw;
    margin: 0 auto;
    box-sizing: border-box;
  }

  .masonry {
    display: flex;
    column-count: 2;
  }

  /* Card styling */
  .grid-box {
    width: 140px;
    box-sizing: border-box;
    border-radius: 10px;
    box-shadow: 2px 4px 8px rgba(0,0,0,0.1);

    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    margin: 16px 0 0 0;
    word-wrap: break-word;   /* Allows breaking long words */
    overflow-wrap: break-word; /* Modern equivalent */
    hyphens: auto;           /* Optional: adds hyphens when breaking words */

    background-color: #fff;
    border: 2px solid #ddd;
    padding: 8px 8px;
    text-align: center;
  }

  .star-rating {
    position: relative;
    font-size: 25px;
  }

  .stars {
    font-family: monospace;
    white-space: nowrap;
    pointer-events: none;
  }

  .stars.background {
    color: #eee;
    z-index: 0;
  }
  
  .stars.foreground {
    position: absolute;
    top: -3px;
    left: 0;
    overflow: hidden;
    z-index: 1;
  }

  /*1.0 - Mildly Bad */
  .level-1-0  { color: #F9E79F; }

  /* 1.5 to 2.0 - Bad */
  .level-1-5  { color: #F7D857; }
  .level-2-0  { color: #F4D03F; }

  /* 2.5 to 3.0 - Worse */
  .level-2-5  { color: #F0A932; }
  .level-3-0  { color: #E67E22; }

  /* 3.5 to 4.0 - Terrible */
  .level-3-5  { color: #B34714; }
  .level-4-0  { color: #990000; }

  /* 4.5 to 5.0 - Absolutely Terrible */
  .level-4-5  { color: #4D0000; font-weight: bold; }
  .level-5-0  { color: #000000; font-weight: bold; }


  /* Title on top, centered */
  .grid-box h3 {
    margin: 0 0 0 0;
    font-weight: bold;
    font-size: 1em;
    color: #222;
    flex-shrink: 0;
  }

  .meta-row {
    flex-direction: column;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #666;
    margin: 8px 0;
  }


  .meta-row .date {
    font-size: 1em;
    text-align: center;
  }

  .meta-row .severity {
    text-align: center;
  }

  /* Container for source links, centered horizontally */
  .sources-container {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: auto; /* push sources to bottom if box grows */
  }

  /* Each source link styled as a circle with number */
  .source-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background-color: #0077CC;
    color: white;
    font-weight: bold;
    text-decoration: none;
    font-size: 0.8em;
    transition: background-color 0.3s ease;
  }

  .source-link:hover {
    background-color: #005a99;
  }

  /* Trick: add a spacer to push meta+links down */
  .grid-box {
    justify-content: flex-start;
  }

  .grid-box > .spacer {
    flex-grow: 1; /* pushes meta-row + links to bottom */
  }
}