@import '../helpers/helpers';

.tile-estimation {
  &__banner {
    position: relative;
    width: 100%;
    height: 240px;
    background: url('./../img/placeholders/tile-banner-desktop.jpg') no-repeat center center;
    background-size: cover;

    @include media-breakpoint-only(md) {
      background-image: url('./../img/placeholders/tile-banner-tablet.jpg');
      height: 200px;
    }

    @include media-breakpoint-down(sm) {
      background-image: url('./../img/placeholders/tile-banner-mobile.jpg');
      height: 220px;
    }

    &-logo {
      height: auto;
      position: absolute;
      top: 0;

      @include media-breakpoint-up(lg) {
        right: 20px;
        width: 90px;
      }

      @include media-breakpoint-only(md) {
        left: 15px;
        width: 75px;
      }

      @include media-breakpoint-down(sm) {
        right: 10px;
        width: 60px;
      }
    }

    &-info {
      position: relative;
      left: 20px;

      @include media-breakpoint-up(lg) {
        max-width: 570px;
        top: 50px;
      }

      @include media-breakpoint-only(md) {
        top: 50%;
        transform: translateY(-50%);
        max-width: 360px;
        left: 15px;
      }

      @include media-breakpoint-down(sm) {
        max-width: 170px;
        top: 50%;
        transform: translateY(-50%);
        left: 10px;
      }

      &::after {
        content: '';
        position: absolute;
        bottom: -20px;

        width: 90px;
        border-top: 3px solid $blue-dark;

        @include media-breakpoint-up(lg) {
          left: 50%;
          transform: translateX(-50%);
        }

        @include media-breakpoint-only(md) {
          left: 0;
        }

        @include media-breakpoint-down(sm) {
          left: 0;
          width: 25px;
          bottom: -15px;
        }
      }
    }

    &-header {
      text-align: center;
      font-size: 1.375rem;
      font-weight: 700;
      line-height: 32px;
      margin-bottom: 0;

      @include media-breakpoint-only(md) {
        text-align: left;
        max-width: 360px;
        font-size: 1rem;
        line-height: 23px;
      }

      @include media-breakpoint-down(sm) {
        text-align: left;
        max-width: 170px;
        font-size: .875rem;
        font-weight: 700;
        line-height: 19px;
      }
    }

    &-text {
      text-align: center;
      max-width: 430px;
      font-size: 1.125rem;
      font-weight: 400;
      line-height: 24px;
      margin-bottom: 0;

      @include media-breakpoint-up(lg) {
        margin: 10px auto 0;
      }

      @include media-breakpoint-only(md) {
        margin-top: 5px;
        text-align: left;
        max-width: 320px;
        font-size: $font-size-13;
      }

      @include media-breakpoint-down(sm) {
        max-width: 155px;
        text-align: left;
        font-size: $font-size-13;
        font-weight: 400;
        line-height: 17px;
      }
    }
  }
}