.frontpage-banner {
  background-color: $meta-light-fg;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  height: 150px;
  width: calc(100% - 40px);
  max-width: 1920px;
  align-self: center;
  flex: 0 0 150px;
  margin-bottom: 20px;
  color: white;
  text-shadow: 0 0 0.3em #000000;
  text-align: right;
  font-size: 1.6em;
  padding: 10px 20px;
  text-decoration: none;
  margin: 20px 0;
}

frontpage {
  display: flex;
  align-self: center;
  width: calc(100% - 40px);
  max-width: 1200px;
  flex: 2 0 0;

  .frontpage-news {
    display: flex;
    flex-direction: column;
    flex-grow: 2;
  }

  aside.sidebar {
    width: 250px;
    flex: 0 0 250px;
    align-self: flex-start;
    margin-right: 20px;
    display: flex;
    flex-direction: column;

    .categories {
      padding: 10px 10px 20px;
      margin-bottom: 20px;
      background: $newsitem-bg;
      border: $newsitem-border;
    }

    h4 {
      font-size: 14px;
      padding: 0 5px 5px;
      font-weight: bold;
      margin: 0 0 10px;
      border-bottom: 1px solid $border;
    }

    ul {
      margin: 0;
      padding: 0;

      li {
        padding-left: 10px;
        list-style-type: disc;
        list-style-position: inside;
      }
    }

    a {
      padding: 2px 5px;
      display: block;
      text-decoration: none;
      color: $secondary-dark-bg;
      font-size: 14px;
      font-weight: bold;
      display: inline-block;
      max-width: 200px;
    }
  }

  .loading-spinner {
    height: 100px;
    position: relative;
  }  

  newsitem {
    margin-bottom: 30px;
  }

  .asunaside {
    display: block;
    width: 200px;
    height: 480px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: top left;
    align-self: center;
  }
}

@media screen and (max-width: 1000px) {
  frontpage aside.sidebar {
    width: 200px;
    flex: 0 0 200px;

    a {
      max-width: 150px;
    }
  }
}

@media screen and (max-width: 900px){
  frontpage {
    flex-direction: column;

    aside.sidebar {
      width: auto;
      flex: 0 0 auto;
      align-self: stretch;
      margin: 20px 0 30px;
      border-bottom: 1px solid $border;
      order: 2;

      .categories {
        display: flex;
        flex-direction: column;
        align-items: center;

        h4 {
          align-self: stretch;
        }
      }

      a {
        max-width: unset;
      }
    }
  }
}

.daymode.jpegonly frontpage .asunaside {
  background-image: url("/assets/img/asuna_frontpage.jpg");
}
.daymode.avifsupport frontpage .asunaside {
  background-image: url("/assets/img/asuna_frontpage.avif?v=1");
}

.darkmodeon.jpegonly frontpage .asunaside {
  background-image: url("/assets/img/dark_asuna_frontpage.jpg");
}
.darkmodeon.avifsupport frontpage .asunaside {
  background-image: url("/assets/img/dark_asuna_frontpage.avif?v=1");
}

@media screen and (max-width: 480px){
  .frontpage-banner {
    width: 100%;
  }

  frontpage {
    padding: 0 10px;
    margin: 0;
    width: 100%;
  }

  frontpage aside.sidebar a {
    padding: 9px 10px;
  }
}

@media (pointer:coarse) {
  frontpage aside.sidebar a {
    padding: 9px 10px;
  }
}

.darkmodeon {
  .frontpage-banner {
    background-color: $dark_meta-light-fg;
  }

  frontpage {
    aside.sidebar {
      .categories {
        background: $dark_newsitem-bg;
        border: $dark_newsitem-border;
      }

      h4 {
        border-bottom: 1px solid $dark_border;
      }

      a {
        color: $dark_secondary-dark-bg;
      }
    }
  }
}