#mainBlockContentDiv {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-between;
  width: 100%;
  min-height: calc(100vh - var(--nav-height));
  padding: calc(var(--bfs) * 3);
}

@media (max-width: 600px) {
  #mainBlockContentDiv {
    width: 90%;
    margin: 0 auto;
    padding: 0;
  }
}

#divForBlogs {
  --gap: calc(var(--bfs) * 6);
  width: min(70%, 1400px);
  display: grid;
  grid-gap: var(--gap) var(--gap);
  grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
  grid-auto-rows: minmax(300px, auto);
}

#rubrikPanel {
  width: min(20%, 600px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
}

#rubrikPanel > h2 {
  font-size: var(--bfs2);
  font-weight: 700;
  margin-bottom: var(--bfs);
  color: var(--grey);
}

#rubrikPanel > a {
  font-size: var(--bfs);
  font-weight: 500;
  margin-bottom: calc(var(--bfs) * 0.5);
  color: var(--orange);
  text-decoration: none;
}

@media (max-width: 900px) {
  #mainBlockContentDiv {
    flex-direction: column-reverse;
    align-items: center;
    justify-content: flex-start;
    gap: calc(var(--bfs) * 3);
  }

  #divForBlogs {
    width: 100%;
  }

  #rubrikPanel {
    width: 100%;
  }
}

#addNewPostButton {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  border-radius: 30px;
  border: 0.5px solid var(--orange);
  text-decoration: none;
}

#addNewPostButton > img {
  color: var(--orange);
  width: 30%;
  opacity: 0.2;
}

.blog-block {
  box-shadow: rgb(56, 62, 67) 0px 20px 30px -10px;
  transition: box-shadow 0.3s ease-in-out;
}

.blog-block:hover {
  box-shadow: var(--orange-light) 0px 1px 2px, var(--orange-light) 0px 2px 4px,
    var(--orange-light) 0px 4px 8px, var(--orange-light) 0px 8px 16px,
    var(--orange-light) 0px 16px 32px, var(--orange-light) 0px 32px 64px;
}