:root {
  --row-height: 25px;
  --column-width: 25px;
  --grid-gap: 5px;
}


html, body {
  margin: 0;
  border: 0;
  padding: 0;
  background-color: #fff;
}

main {
  margin: auto;
  width: 100%;
}

.sticky-header-section {
  position: fixed;
  width: 100%;
  z-index: 100000;
  transition: top 0.15s ease-in-out 0s;
  top: var(--sticky-top);
}

.container-grid  {
  display: grid;
  grid-template-columns: repeat(42, var(--column-width, 25px));
  grid-template-rows: repeat(var(--grid-rows-desktop), minmax(var(--row-height, 25px), auto));
  gap: var(--grid-gap, 5px);
  box-sizing: border-box;
  position: relative;
}

.element-coordinates {
  grid-area: var(--grid-area-desktop);
}

.custom-font-size span {
  font-size: var(--font-size-desktop);
}

@media (min-width: 576px) {
  .container-grid {
    max-width: 535px;
  }
  
}

@media (max-width: 768px) {

  .container-grid  {
    max-width: 715px;
    grid-template-columns: repeat(12, 1fr); 
    grid-template-rows: repeat(var(--grid-rows-mobile), minmax(var(--row-height), auto));
  }

  .element-coordinates {
    grid-area: var(--grid-area-mobile);
  }

  .custom-font-size span {
    font-size: var(--font-size-moble);
  }
}

@media (min-width: 992px) {
  .container-grid {
    max-width: 955px;
  }
}

/* [INFO] our minimum container width */
@media (min-width: 1255px) {

  .container-grid {
    max-width: 1255px !important;
  }
}