@use "sass:list";
@use "../partials/palette";

.Hero {
  display: block;
  width: 100%;
  padding: 5rem 0;
  color: palette.$white;
  position: relative;
  text-align: center;
}

.Hero--i18n {
  position: absolute;
  top: 1.125rem;
  right: 1.125rem;
  width: auto;
  margin: 0 0 0 auto;
  border-radius: 0.25rem;
  background-color: list.nth(palette.$purple, 8);
  p {
    line-height: 2rem;
    margin: 0 0.75rem;
  }
}

.Hero--copy {
  display: inline-block;
  margin: 0 auto;
  max-width: 37.5rem; /* 600px */

  .h5 {
    display: inline-block;
    font-weight: 400;
    padding-bottom: 0.25rem;
    border-bottom: 0.1875rem solid list.nth(palette.$purple, 4);
  }

  h1 {
    margin-top: 0.25rem;
    margin-bottom: 1.125rem;
  }
}
