@import '../../marketplace.css';

.root {

}

/* heroContainer gives the height for HeroSection */
/* Safari has a bug with vw padding inside flexbox. Therefore we need an extra div (container) */
.heroContainer {
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - var(--topbarHeight));
  padding: 0;

  @media (--viewportMedium) {
    min-height: calc(100vh - var(--topbarHeightDesktop));
    border: solid 24px #FFF;
  }

  @media (--viewportLarge) {
    border: solid 36px #FFF;
  }
}

.hero {
  flex-grow: 1;
  justify-content: flex-end;
  padding-bottom: 98px;

  @media (--viewportMedium) {
    justify-content: center;
    padding-top: 60px;
    border-radius: 4px;
  }
}
