@import 'variables', 'mixin';

/**
 * Table of Contents:

 * 1.0 - error-404__number
 * 2.0 - error-404__products
*/

.error404 {
      .error-404__products-h {
            color: #000;
            font-size: 35px;
            line-height: 35px;
            margin-bottom: 20px;
            position: relative;
            z-index: 1;
            font-family: 'gilroy-regular', sans-serif;
            font-weight: 400;
            text-align: center;
            margin-bottom: 30px;
      }

      .product-box {
            border: unset !important;
            box-shadow: unset !important;
            display: block !important;

            .imagewrapper {
                  height: 350px;
                  width: 100%;
                  object-fit: cover;
            }

            &:hover {
                  box-shadow: unset !important;
            }

            .product-box-desc {
                  padding: 20px 0 !important;
                  text-align: start !important;
            }

            .product-box-img__hov,
            .product-box-img {
                  height: 320px;
                  border: 1px solid rgba(#000, 20%);

                  @include media-max(1600px) {
                        height: 350px;
                  }
            }

            &-desc__price {
                  bdi {
                        font-size: 16px;
                        line-height: 16px;
                        color: #333333;
                        font-weight: 300;
                  }
            }

            &-desc__h {
                  font-size: 18px;
                  line-height: 25px;
                  color: #333333;
                  font-weight: bold;
                  margin-bottom: 5px;
            }
      }
}

.error-404 {

      /* 1.0 - error-404__number */
      &__number {
            font-family: $header-font-family;
            font-size: 200px;
            font-weight: 700;
            color: $header-color;
            line-height: 1;
            margin: 30px 0 0;

            @include media-max(sm) {
                  font-size: 130px;
            }
      }

      &__p {
            a {
                  color: darken($primary-color, 50%);
                  @extend %link-color;
            }
      }


      /* 2.0 - error-404__products */
      &__products {
            margin-top: 100px;
      }
}