
.Sidebar {
  display: none;

  @include iflaptop {
    display: flex;
    flex-direction: column;
    gap: rem(40px);
  }

  .Estimation {
    background: $color-green;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: rem(20px);
    border-radius: rem(20px);
    padding: rem(40px);
    margin-top: rem(16px);
    margin-bottom: rem(16px);

    .Title {
      font-family: $font-roboto;
      font-weight: 300;
      font-size: rem(20px);
      line-height: 100%;
      color: $color-white;
      text-transform: uppercase;
    }

    .Estimate {
      font-family: $font-roboto;
      font-weight: 500;
      font-size: rem(24px);
      line-height: 100%;
      color: $color-white;
    }

    .Text {
      font-family: $font-roboto;
      font-weight: 300;
      font-size: rem(20px);
      line-height: 130%;
      color: $color-white;
      text-align: center;
      max-width: 240px;
    }

    .Phone {
      font-family: $font-roboto;
      font-weight: 500;
      font-size: rem(24px);
      line-height: 100%;
      color: $color-white;
      text-transform: uppercase;

      @include ifdesktop {
        font-size: rem(32px);
      }
    }
  }

  .Related, .Warranties {
    display: flex;
    flex-direction: column;
    gap: rem(16px);
    max-width: 300px;

    .Title {
      font-family: $font-roboto;
      font-weight: 400;
      font-size: rem(24px);
      line-height: 100%;
      color: $color-text;
      text-transform: uppercase;
    }

    .List {
      display: flex;
      flex-direction: column;
      gap: 4px;
      list-style-type: disc;
      margin-left: rem(40px);
    }

    .ListItem {
      font-family: $font-roboto;
      font-weight: 400;
      font-size: rem(16px);
      line-height: 130%;
      color: $color-text;
      list-style: unset;

      a {
        color: $color-green;
      }
      a:hover {
        color: $color-green-hover;
        text-decoration: underline;
      }
    }
  }

}