$e404-bg: $body-bg !default;
$e404-color: $body-color !default;

.page-404 {
   padding: 70px 0;
   background: $e404-bg;
}

.page-404-content {
   position: relative;
   padding-left: 120px;
   max-width: 1180px;
   margin: 0 auto;

   &::before {
      content: ':(';
      position: absolute;
      left: 0;
      top: 20px;
      font-size: 108px;
      font-weight: $font-weight-bold;
      opacity: .5;
   }

   > * {
      color: $e404-color;
   }

   .btn {
      border: 2px solid $brand-primary;
      margin-top: $spacer-lg;
      margin-right: calc(#{$grid-gutter-width} / 2);
   }

   @media screen and (max-width: $sm - 1) {
      @include delete-before;

      padding-left: 0;
   }

   @media screen and (max-width: $xs - 1) {
      .btn {
         margin-right: 0;
         width: 100%;
      }
   }
}

.page-404-content-new {
   max-width: 1180px;
   margin: 0 auto;

   > .wpj-col-4 {
      max-width: 120px;
   }

   .emoji {
      margin-top: 20px;
      font-size: 108px;
      font-weight: $font-weight-bold;
      opacity: .5;
   }

   .btns > .wpj-col-center {
      display: flex;
      flex-wrap: wrap;
   }

   .btn {
      margin-top: $grid-gutter-width;
      margin-right: calc(#{$grid-gutter-width} / 2);
   }

   @media screen and (max-width: $md - 1) {
      > .wpj-col-4 {
         display: none;
      }
   }

   @media screen and (max-width: $xs - 1) {
      .w-btn-wrapper {
         width: 100%;
      }

      .btn {
         margin-right: 0;
         width: 100%;
      }
   }
}
