@use "mixins";

.page-main {
  a {
    align-items: center;
    display: flex;
    height: calc(50vh - 128px);
    justify-content: center;
    padding: 64px;
    text-decoration: none;

    @media (max-width: mixins.$breakpoint) {
      height: 50vh;
    }

    &.driftingnebula {
      background: url("/assets/driftingnebula 2022-03-09.jpeg");
      background-position: center center;
      background-repeat: no-repeat;

      &:hover {
        filter: hue-rotate(180deg);
      }
    }

    &.holllo {
      background: url("/assets/holllo-mark-square-pattern.png");
      background-color: #1f1731;
      background-repeat: repeat;
      background-size: 48px;

      &:hover {
        filter: grayscale(100%);
      }
    }

    img {
      max-width: 256px;
    }
  }
}