Page Comparison

.gridItem__image {
    opacity: 1;
}

.OcuDarcula .gridItem, .OcuLight .gridItem,
.OcuDarcula .gridItem__image, .OcuLight .gridItem__image {
    border-radius: 2%;
}

.gridItem {
  background-color: none | white;
}

.gridItem  {
    background: #E7EAED;
}

/* change the background for a specific item */
.gridItem:nth-child(2) {
    background: red;
}

.gridItem  {
    background-image: url("https://via.placeholder.com/400");
    background-size: contain;
    background-position: center center;
}
.gridItem__image {
  display: none;
}

/* change the background for a specific item */
.gridItem:nth-child(2) {
    background-image: url("https://via.placeholder.com/400");
    background-size: contain;
    background-position: center center;
}
.gridItem__image {
  display: none;
}

.gridItem__title p {
    background-color: #3C9B28;
    // add more options here
}

// add some margin 
.gridItem {
  margin: 3em 2em;
}
.gridItem__title {
    height: 10;
    bottom: -10%;
    // add more options like...
    font-weight: bold;
    color: black;
    white-space: normal;
}

// align text to top line
.gridItem__title p {
    top: 0;
    transform: translateX(-50%);
}

// add some margin 
.gridItem {
  //default width is 18%
  width:14%
  //if you don't want more buttons on one line add margin to compensate
  margin-left: 2%
  margin-right: 2%
}

.grid__container{
  //add padding to make the menu area smaller  
  padding-left:10%
  padding-right:10%
}

//put .page.page--nav--1234 in front of the class 
//replace 1234 with correct id that can be found using the browsers development tools
//examples:
.page.page--nav--1234 .gridItem{
  //only gridItems under page 1234 will be affected
}

.page.page--nav--1234 .grid__container{
  //only the container under page 1234 will be affected
}