div#hero {
  /*min-height: calc(100vh - 50px);*/
}

div#hero .services-container {
  display: grid;
  grid-template-columns: 1fr;
  /*grid-template-rows: 30vh;*/
  gap: 2vw;
}

div#hero .card {
  height: 30vh;
  border: 1px solid rgba(255,255,255,0.56);
  background-size: 50vw calc(20vh);
  background-repeat: no-repeat;
  background-position-y: 20px;
  background-position-x: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  padding: 10px;
  background-color: #005e53;
}

div#hero a,
div#hero a:visited,
div#hero a:hover {
  text-decoration: none;
  color: white;
}

div#hero .card.webmail {
  background-image: url("/assets/email-c5dc010e.svg");
}

div#hero .card.zulip {
  background-image: url("/assets/zulip-logo-3c2b6081.svg");
}

div#hero .card.gitea {
  background-image: url("/assets/gitea-logo-d582f396.svg");
}

div#hero .card.rdgw {
  background-image: url("/assets/rdgw-logo-596a1c5d.svg");
}

div#hero .card.nextcloud {
  background-image: url("/assets/nextcloud-logo-f7acbfd3.svg");
}

div#hero .card.etherpad {
  background-image: url("/assets/etherpad-logo-357d0942.svg");
}

div#hero .card.peertube {
  background-image: url("/assets/peertube-logo-2a2bf66b.svg");
}

@media screen and (min-width: 720px) {
  div#hero .card {
    background-size: 33vw calc(20vh);
  }
  div#hero .services-container {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media screen and (min-width: 1020px) {
  div#hero .card {
    background-size: 25vw calc(20vh);
  }
  div#hero .services-container {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media screen and (min-width: 1600px) {
  div#hero .card {
    background-size: 20vw calc(20vh);
  }
  div#hero .services-container {
    grid-template-columns: repeat(4, 1fr);
  }
}