.grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 20px;
    padding: 20px;
  }



  .grid-item {
    background-color: #f2f2f2;
    padding: 20px;
    text-align: center;
    font-size: 16px;

  }

  @media (max-width: 768px) {
    .grid-container {
      grid-template-columns: repeat(2, 1fr);
    }
  }

  @media (max-width: 480px) {
    .grid-container {
      grid-template-columns: 1fr;
    }
  }




  :root {
    --grid-columns: 4;
    --grid-item-width: 200px;
    --grid-gap: 20px;
  }

  .grid-container {
    display: grid;
    grid-template-columns: repeat(var(--grid-columns), var(--grid-item-width));
    grid-gap: var(--grid-gap);
    padding: var(--grid-gap);
  }

  @media (max-width: 768px) {
    :root {
      --grid-columns: 2;
      --grid-item-width: 150px;
    }
  }

  @media (max-width: 480px) {
    :root {
      --grid-columns: 1;
      --grid-item-width: 100%;
    }
  }

  .entity-img{
    width: 100%; /* or any custom size */
    height: 100%;
    object-fit: contain;
    -webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE 10 and IE 11 */
    user-select: none; /* Standard syntax */
  }

p img {
    height: 1em;
    width: auto;
}

p {
  font-size: 3em;
}