.pattern-bg {
  min-height: 80vh;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  grid-area: 1/1;
}

.pattern-content {
  /* height: inherit; */
  background-color: #fff;
  grid-area: 1/1;
  display: grid;
  justify-items: center;
  align-content: center;
  text-align: center;
  margin: 125px;
  box-shadow: 0px 20px 100.28px 8.72px rgba(0, 0, 0, 0.35);
  /* background-image: linear-gradient(135deg, #ed21ff 0%, #9e21ff 100%, #9e21ff 100%); */
  z-index: 3;
}

.hashtag {
  padding: 100px 20px;
}

.hashtag hr {
  width: 30%;
  color: #6b8ca0;
  border-top: 5px solid #6b8ca0;
}

.hashtag a {
  color: #6b8ca0;
  text-decoration: none;
  transition-duration: 0.3s;
}

.hashtag a:hover {
  color: #cead64;
  text-decoration: none;
  transition-duration: 0.3s;
}

/* h2 as default h1, see .pattern-content h2 in home.css */

@media (max-width: 900px) {
  /* see .pattern-content h2 for this media in home.css */

  .pattern-content {
    margin: 13%;
  }
}
@media (max-width: 768px) {
  .pattern-bg {
    min-height: 70vh;
  }
}

@media (max-device-width: 576px) {
  .pattern-content {
    margin: 10%;
  }

  .pattern-content h2 {
    color: #6b8ca0;
    font-family: Nord;
    font-size: 34px;
    line-height: 38px;
  }
}

@media (max-width: 500px) {
  /* see .pattern-content h2 for this media in home.css */
}

@media (max-device-width: 476px) {
  .pattern-bg {
    min-height: 60vh;
  }
  .pattern-content {
    margin: 30px;
  }
}

@media (max-width: 410px) {
  /* .hashtag {
    font-size: 20px;
    line-height: 24px;
  } */
  /* .pattern-content {
    margin: 20px;
  } */
}

@media (max-width: 350px) {
  .pattern-bg {
    min-height: 40vh;
  }
  .pattern-content h2 {
    font-size: 23px;
    line-height: 26px;
  }
}