heroic.css

:root {
  --primary: #8e24aa;
}

/* Hero */

.hero h1,
.hero h2,
.hero h3 {
  --font-weight: 800;
  --typography-spacing-vertical: 1.2rem;
}

.hero h1 {
  --font-size: 3rem;
}

.hero.center {
  text-align: center;
}

/* Article */
article header h2,
article header h3,
article header h4 {
  margin: 0;
}

/* Snippet */
code.snippet,
code.snippet.hljs {
  padding: 1.6rem;
  line-height: 1.6em;
}

footer {
  display: flex;
  justify-content: space-around;
}

/* Extra */
.icon {
  margin-top: 7px;
  position: relative;
  top: 3px;
}

.spacer {
  margin: 40px 0;
}

/* Grid */
.grid.center {
  align-items: center;
  justify-items: center;
  grid-template-columns: 72% auto;
}

.cookieBanner {
  width: 95vw;
  max-width: 800px;
  margin: auto;
  background-color: var(--background);
  border-radius: 10px;
  position: fixed;
  bottom: 16px;
  left: 16px;
  font-size: 15px;
}

nav.container-fluid div {
  display: flex;
}

@media screen and (max-width: 900px) {
  .cookieBanner > .grid {
    align-items: center;
    justify-items: center;
    height: fit-content;
    max-height: 100px;
    grid-template-rows: 3fr 1fr;
    padding: 16px 12px;
  }

  .cookieBanner > .grid .buttons {
    display: flex;
    justify-content: space-between;
    width: 70%;
    margin-top: 8px;
  }
}

.feature {
  background-color: var(--background);
  margin-bottom: 72px;
}

.feature .description {
  margin: auto 15px auto 8px;
}

footer {
  margin-top: 100px;
  padding: 50px;
  font-weight: 700;
  color: var(--secondary);
}

.smallText {
  font-weight: 400;
  font-size: 13px;
}

@media screen and (min-width: 900px) {
  .cookieBanner > .grid {
    grid-template-columns: 8fr 1fr;
    align-items: center;
    justify-content: center;
    max-height: fit-content;
    height: fit-content;
    padding: 16px 24px;
  }
  .cookieBanner > .grid .buttons {
    display: flex;
    justify-content: space-between;
    margin-top: 8px;
    width: 212px;
  }

  .heroicPreview {
    width: 1130px;
  }
}

@media screen and (max-width: 991px) {
  .grid.center {
    grid-template-columns: auto;
  }

  .feature {
    width: 96%;
    padding: 0;
  }

  .feature .description {
    margin: 15px;
  }
}

.cookieBanner > .grid > .buttons button {
  height: fit-content;
  padding: 0;
  width: 100px;
  margin: 0;
  font-size: 14px;
}

a {
  font-weight: 700;
  color: #0d101c;
}

/*changed the width 100% instead of a hardcoded value*/
@media screen and (max-width: 414px) {
  .feature {
    width: 100%;

    margin-bottom: 42px;
  }

  .heroicPreview,
  .feature img {
    width: 100%;
  }
}

@media only screen and (prefers-color-scheme: light) {
  article > footer {
    background-color: var(--card-border-color);
  }
}

@media screen and (min-width: 992px) {
  .grid {
    grid-template-columns: repeat(auto-fill, minmax(370px, 1fr));
  }
}