/* Error 404 */

.error-404 {
   min-height: calc(100vh - 200px);
   background: url(../assets/fondo-404.webp) center/cover no-repeat;
   background-color: var(--color-white);
   display: flex;
   align-items: center;
   position: relative;
   overflow: hidden;

   .error-404__wrapper {
      width: 100%;
   }

   .error-404__content {
      display: flex;
      flex-direction: row;
      align-items: center;
      flex-wrap: wrap;
   }

   .error-404__illustration {
      width: 30%;

      img {
         max-width: 100%;
         height: auto;
         display: block;
      }
   }

   .error-404__text {
      text-align: left;
      width: 70%;
   }

   .error-404__number {
      color: var(--color-blue);
      display: block;
      font-size: 4rem;
      font-weight: 700;
      line-height: 1;
      margin-bottom: 1rem;
      width: 100%;
   }

   .error-404__title {
      color: #242424;
      font-size: 1.25rem;
      font-weight: 500;
      margin-bottom: 1rem;
   }

   .error-404__message {
      color: #242424;
      font-size: 1rem;
      margin-bottom: 2rem;
   }

   .error-404__buttons {
      margin-top: 1rem;
      text-align: center;
      width: 100%;

      a {
         margin: 0 auto;
         width: 100%;
      }
   }

   @media screen and (min-width: 768px) {
      .error-404__number {
         font-size: 10rem;
      }

      .error-404__buttons {
         a {
            width: auto;
         }
      }
   }

   @media screen and (min-width: 992px) {
      .error-404__number {
         font-size: 15rem;
      }

      .error-404__title {
         font-size: 3.5rem;
      }

      .error-404__illustration {
         padding-right: 5rem;
      }

      .error-404__message {
         font-size: 1.5rem;
      }
   }
}