main.main {
  & > a {
    opacity: 0;
    animation-name: anim_fromTop-32;
    animation-duration: 500ms;
    animation-timing-function: ease;
    animation-fill-mode: forwards;
    & > img {
    }
  }

  & div.text {
    opacity: 0;
    animation-name: anim_fromBottom-32;
    animation-duration: 500ms;
    animation-timing-function: ease;
    animation-fill-mode: forwards;
    animation-delay: 100ms;

  }
}

.note {
  max-width: 35rem;
  margin: 0 auto;


}
.note-header {
  padding-top: 3rem;
  margin-bottom: 3rem;
  opacity: 0;
  animation-name: anim_fromTop-32;
  animation-duration: 600ms;
  animation-timing-function: ease;
  animation-fill-mode: forwards;
  animation-delay: 100ms;
}
.note-footer {
  padding: 6rem 0;
}
.note-date {
  color: var(--color-text-grey);
  display: block;
  opacity: 0;
  animation-name: anim_fromRight-32;
  animation-duration: 500ms;
  animation-timing-function: ease;
  animation-fill-mode: forwards;
  animation-delay: 400ms;
}
.note-tags {
  display: flex;
  margin-bottom: 1.5rem;
  opacity: 0;
  animation-name: anim_fromRight-32;
  animation-duration: 500ms;
  animation-timing-function: ease;
  animation-fill-mode: forwards;
  animation-delay: 300ms;

  & li {
    margin-right: .5rem;
  }
  & a {
    padding: .5rem 1rem;
    display: block;
    background: var(--color-light);
    &:hover {
      background: var(--color-black);
      color: var(--color-white);
    }
  }
}