@keyframes bganim {
  0%, 100% { background-color: #ffd02f; }
  50% { background-color: #f59190; }
}
.afront-info-d {
  display: none;
}
.page-afront {
  animation: bganim 6s infinite;
}
.page-afront::before {
  content: "";
  position: fixed;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  z-index: 0;
  background-image: url(/assets/img/afront/banner-m.png);
  background-position: center center 0;
  background-repeat: no-repeat;
  background-size: 100% auto;
}
.page-afront .logo-s9 {
  background-image: url(/assets/img/logo-top-mobile-w.svg);
}
.page-afront #pagew {
  padding-top: 100vh;
}
.page-afront #pagew .top {
  position: fixed;
  z-index: 1;
}

.afront-cont {
  position: relative;
  z-index: 2;
  background-color: #0e0e14;
  color: #fff;
  padding-top: 48px;
  min-width: fit-content;
  background-image: url(/assets/img/afront/bottom-splatter-mob.png);
  background-size: 100% auto;
  background-repeat: no-repeat;
  background-position: center bottom;
  padding-bottom: 33.8%;
  font-size: 14px;
  line-height: 24px;
}
.afront-cont p {
  margin-bottom: 24px;
}
.afront-info-m svg a:hover,
.afront-info-d svg a:hover,
.afront-info-m svg a:focus,
.afront-info-d svg a:focus {
  color: #ffd02f;
}

.afront-info-m svg,
.afront-info-d svg {
  width: 100%;
  height: auto;
  margin-bottom: 48px;
}
.afront-cont img.img-responsive {
  display: block;
  margin: 48px auto;
}
.afcredits {
  display: grid;
  grid-template-rows: minmax(1fr 0);
  width: 100%;
  border: 1px solid #fff;
  margin-top: 32px;
}
.afcredits > div {
  border: 1px solid #fff;
  padding: 58px 20px;
  display: flex;
  justify-content: center;
  align-content: center;
  position: relative;
}

.afcredits .crlbl {
  font-size: 10px;
  line-height: 20px;
  position: absolute;
  left: 16px;
  top: 16px;
  right: 16px;
}

.afcredits .prod {
  display: flex;
  flex-direction: column;
  gap: 32px;
}


@media (min-width: 768px) {
  .afront-cont {
    background-image: url(/assets/img/afront/bottom-splatter.png);
    background-size: 1193px auto;
    padding-bottom: 240px;
  }
}

@media (min-width: 992px) {
  .afront-info-m {
    display: none;
  }
  .afront-info-d {
    display: block;
  }
  .page-afront::before {
    background-image: url(/assets/img/afront/banner.png);
    background-position: center center;
  }
  .afront-info-m svg,
  .afront-info-d svg {
    margin-bottom: 92px;
  }
  .afront-cont {
    padding-top: 64px;
    width: calc(100% - 128px);
    margin: 0 auto 64px auto;
    background-size: 1547px auto;
    padding-bottom: 300px;
    font-size: 21px;
    line-height: 32px;
  }
  .afront-cont p {
    margin-bottom: 32px;
  }
  .afront-cont img.img-responsive {
    float: right;
    margin: 0 0 20px 20px;
  }
  .afcredits {
    grid-template-rows: none;
    grid-template-columns: 2fr 1fr;
    margin-top: 64px;
  }
  .afcredits .prod {
    flex-direction: row;
    gap: 64px;
  }
  .afcredits .crlbl {
    font-size: 12px;
  }
}

@media (min-width: 1200px) {
  .afront-cont {
    background-size: 1934px auto;
    padding-bottom: 375px;
  }
}

@media (min-width: 1520px) {
  .afront-cont img.img-responsive {
    margin: 0 -92px 20px 20px;
  }
}