.gridview .gridview-items
  {
    display: grid;
    gap: 1em;
    grid-template-columns: repeat(auto-fit, minmax(120px, 320px));
  }

  .gridview .gridview-content
  {
    margin-top: 2em;
  }

.griditem-plain {
  display: grid;
  grid-template-areas:
    "title  icon"
    "h1 icon  "
    "h2 icon";
  border-radius: .8em;
  padding: 1em;
  cursor: pointer;
  height: 160px;
  color: #fff;
}

.griditem {
  display: grid;
  grid-template-areas:
    "title  icon"
    "h1 icon  "
    "h2 icon";
  border-radius: .8em;
  padding: 1em;
  cursor: pointer;
  height: 160px;
  color: #fff;
}

  .griditem:hover {
    transition: .5s;
    background-color: hsl(from var(--color-base) h s calc(l + 25));
  }

.gridview .griditem .title {
  grid-area: title;
  font-size: 2em;
  font-weight: 700;
  color: white;
  font-family: 'Segoe UI', Garamond, Helvetica, sans-serif;
  text-shadow: black 0px 0px 2px, black 0px 0px 5px;
}

.gridview .griditem .hdg1 {
  grid-area: h1;
  font-size: 1.2em;
  font-weight: 500;
  padding-left: .4em;
  white-space:nowrap;
  margin: auto 0;
}

.gridview .griditem .hdg2 {
  grid-area: h2;
  font-size: .9em;
  font-weight: 300;
  padding-left: .5em;
  margin: auto 0;
}

.gridview .griditem .icon {
  grid-area: icon;
  font-size: 5em;
  margin: auto;
  margin-right: 0px;
  opacity: 0.3;
}

.gridview .griditem:hover .icon {
  transition: .5s;
  opacity: 1;
}

  .gridview .griditem .background
  {
    background-color: black;
    border-radius: .4em;
  }

.gridview .griditem img {
  border-radius: .3em;
  object-fit: cover;
  width: 100%;
  height: 200px;
  opacity: 50%;
  text-align: center;
}

  .griditem:hover img
  {
    transition: .2s;
    opacity: 100%;
  }