header.scss

@import 'src/styles/base/breakpoint';
@import 'src/styles/base/color';
@import 'src/styles/base/z-index';

header {
  display: flex;
  align-items: center;
  flex-direction: column;
  overflow: hidden;
  width: 85%;
  z-index: $z-header;
  position: fixed;
  top: 48px;

  @media #{$tablet} {
    width: 100%;
  }

  @media #{$large-phone} {
    top: 0;
  }
  .header-top {
    background: radial-gradient(
      51.85% 47.89% at 50% 13.32%,
      #343641 0%,
      $dark-2 100%
    );
    width: 100%;
    .header-text {
      padding: 0 1rem 1rem 1rem;
      color: $grey-bright;
    }
  }
  .header-content {
    display: flex;
    flex-direction: column;
    @media #{$tablet} {
      margin: 0;
    }
    @media #{$large-phone} {
      margin: 60px 0 0 0;
    }
    .header-content-top {
      display: flex;
      flex-direction: row;
      &.header-content-top-right {
        justify-content: flex-end;
      }
      .header-text {
        padding: 2rem 1rem;
        flex: 1;
      }
      .header-text-desktop {
        display: flex;
        flex: 1;
        padding: 2rem 1.25rem;
        color: $grey-bright;
      }
      .header-back-button {
        padding: 0 0.75rem;
      }
      @media #{$large-phone} {
        .header-text {
          padding: 0 1rem 1rem 1rem;
          color: $grey-bright;
        }
        .header-text-desktop {
          display: none;
        }
        .header-feedbacks-button {
          display: none;
        }
      }
    }
  }
}

.building-title {
  text-align: center;
}