/* Base Layout */
    .grid-container {
      display: grid;
      grid-template-columns: 42% repeat(7, 1fr); /* 42% text + 7 equal columns */
      gap: .5rem;
      align-items: start;
      padding: 1rem;
      font-family: Arial, sans-serif;
      transition: all 0.4s ease;
    }

    /* Text Column */
    .grid-text {
      grid-column: 1; /* occupy first column */
      transition: all 0.4s ease;
    }

    /* Icons Wrapper: let children align directly to grid */
    .grid-icons {
      display: contents; /* children map directly to the 7 grid columns */
    }

    /* Each Icon+Label */
    .grid-item {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 0.1rem;
    /*border: 1px solid #ddd;
      padding: 0.5rem;
      border-radius: 6px;*/
      transition: all 0.4s ease;
    }

    /* Placeholder for image/icon */
    .icon-box {
      width: 40px;
      height: 40px;
      border-radius: 6px;
      transition: transform 0.3s ease;
      margin-top: 11px; 
    }

    /* Hover: enlarge icon */
    .grid-item:hover .icon-box {
      transform: scale(1.1);
    }

    /*  Responsive Layout for mobile/tablet */
    @media (max-width: 900px) {
      .grid-container {
        grid-template-columns: 1fr; /* stack everything */
      }

      .grid-icons {
        display: grid; /* restore grid for icons */
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
      }

      /* Last icon spans full width + centers */
       /* .grid-icons .grid-item:last-child {
        grid-column: span 2;
        justify-content: center; */
  
  /* Place Polish flag under Spanish flag (column 2, row 4) */
  .pl-flag {
    grid-column: 2;
    grid-row: 4;
  }

  /* All others flow naturally */
}
.icon-link {
  display: flex;
  align-items: center;
  text-decoration: none;
  color: black;!important; /* make link text black */
}

.icon-label {
  margin-left: 0.5rem;
  font-weight: 600;
  transition: color 0.2s;
}

/* When link is active, make label red */
.icon-link.active .icon-label {
  color: #f02210;
}
.icon-link:visited,
.icon-link:hover,
.icon-link:active,
.icon-link:focus {
 color: black;  !important;         /* keep text black in all states */
 text-decoration: none; !important; /* no underline ever */
}
.icon-label {
  color: inherit !important;        /* Inherit color from .icon-link */
}