:root {
  --clr-background: #eceff1;
  --clr-white: #ffffff;
  --clr-primary: #aa00ff;
  --clr-gray: #263238;

  --font-size: 16px;
  --border-radius: 0.2em;
}

.logo-header {width:19rem; margin-top: 5px;}

.logogastrollobanner {width:600px;}

#kat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 1.5em;
}

#most-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-gap: 1.5em;
}

#home-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 1.5em;
}

.item-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 1.5em;
}


.katcontainer {
  background-color: var(--clr-white);
  border-radius: var(--border-radius);
  padding: 1em;
  border-top: 4px solid #c27106;
  
  p.date {
    font-size: 0.8em;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    margin-bottom: -1em;
    margin-top: 0;
  }
}

.katcontainer h2 {
	font-size: 1.75rem;
    margin-bottom: 0.2em;
    margin-top: 0.5em;
  }

.itemcontainer {
  background-color: none;
  border-radius: var(--border-radius);
  padding: 1em;

}

.itemcontainerimg {
  background-color: none;
  border-radius: var(--border-radius);
  padding: 1em;

}

.itemcontainerimg img{
  border-radius: 10px;
  border: 10px solid #fff;

}

.itemcontainerinfo {
  background-color: #ca6654;
  border-radius: var(--border-radius);
  padding: 1em;

}

.itemcontainerlink {
  background-color:  var(--clr-white);
  border-radius: var(--border-radius);
  padding: 1em;

}

.itemcontainer p {
  color: #fff;
  font-size: 1.25em;
  
}

.itemcontainerinfo p {
  color: #fff;
  font-size: 1.5em;
}

.itemcontainerlink p {
  color: #555555;
  font-size: 1em;
}
 
.special-icon {
	margin-right: 4px;
}




@media screen and (max-width: 1680px) { }

@media screen and (max-width: 1280px) { }
  
@media screen and (max-width: 980px) {

#kat-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
#most-grid {
    grid-template-columns: repeat(3, 1fr);
  }  
  
#home-grid {
    grid-template-columns: repeat(2, 1fr);
  }    

	}

@media screen and (max-width: 736px) { 

#kat-grid, #most-grid, #home-grid, .item-grid {
    grid-template-columns: 1fr;
  }
  
  .logogastrollobanner {width:350px;}


}

@media screen and (max-width: 480px) {


  #kat-grid, #most-grid, #home-grid {
    grid-template-columns: 1fr;
  }
  
   .logogastrollobanner {width:250px;}
  
}