blog/src/components/molecules/Search/SearchResults.module.css

.searchResults {
  position: absolute;
  left: 0;
  right: 0;
  z-index: 10;
  top: 0;
  bottom: 0;
  background: var(--body-background-color);
  animation: fadein 0.3s;
  overflow: scroll;
  -webkit-overflow-scrolling: touch;
  height: 91vh;
}

.results {
  composes: container from '../../Layout.module.css';
  padding: var(--spacer) calc(var(--spacer) / 2);
  margin-bottom: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

@media (min-width: 60rem) {
  .results {
    padding-left: 0;
    padding-right: 0;
  }
}

.results li {
  display: block;
  flex: 0 0 48%;
  margin-bottom: var(--spacer);
}

@media (min-width: 40rem) {
  .results li {
    flex-basis: 31%;
  }
}

.results li::before {
  display: none;
}

.results img {
  margin-bottom: 0;
}

.results a {
  display: block;
}

.results a > div {
  margin-bottom: 0;
}

.results a:hover h4,
.results a:focus h4 {
  color: var(--link-color);
}

@keyframes fadein {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}