body {
  background: #101114;
}
main {
  color: #fff;
  width: 80%;
  padding: 10vh 10% 5% 10%;
  overflow: hidden;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-gap: 5vh;
}
@media screen and (max-width: 768px) {
  main {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.logo-wrapper {
  height: 10vh;
  width: 70%;
  padding: 15%;
  background: rgba(77, 115, 153, 0.1);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition-duration: 0.5s;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.logo-wrapper:hover {
  transition-duration: 0.5s;
  background: rgba(245, 250, 255, 0.2);
}
.logo-wrapper > img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: none;
}