@import "../../src/scss/variables.scss";
@import "../../src/scss/mixins.scss";

.component-home {
  display: flex;
  background: $olive;
  min-height: calc(100vh - #{$footer-height});
  padding: $header-height-mobile 40px 0 40px;

  .drop {
    width: 100%;
    padding: 40px 70px 10px 70px;
  }

  .title {
    display: block;
    color: $white;
    font-size: $font-28;
    text-align: center;
  }

  .subtitle {
    display: block;
    min-height: 30px;
    color: $white;
    font-size: $font-18;
    text-align: center;
  }

  .privacy {
    display: block;
    color: $white;
    font-size: $font-12;
    text-align: left;
    padding-bottom: 50px;
  }

  .logo {
    width: 100%;
  }
}

@media (min-width: map-get($grid-breakpoints, 'md')) {
  .component-home {
    padding: $header-height 40px 0 40px;

    .logo {
      width: calc(100% + 100px);
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
    }
  }
}