.intro {
  padding: 0 3em;
  overflow: hidden; }
  .intro img {
    width: 100%;
    height: auto;
    display: block; }
  .intro h1, .intro .mobile {
    position: absolute;
    left: 50%;
    width: calc(100% + 1rem);
    top: 50%;
    margin: 0;
    -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
    font-size: 8.75vw; }
  .intro__content {
    --padding: var(--step-4);
    padding-top: var(--padding);
    padding-bottom: var(--padding); }
  .intro .mobile {
    font-size: var(--step-6);
    font-family: 'Oswald', serif;
    font-display: 'swap';
    text-transform: uppercase;
    font-weight: 600; }

.hero {
  position: relative;
  font-size: var(--step-5); }

@media screen and (max-width: 768px) {
  .intro {
    padding: 0 1em; }
    .intro h1, .intro .mobile {
      font-size: var(--step-5);
      right: 0.5em; } }

@media screen and (min-width: 601px) {
  .intro .mobile {
    display: none; } }

@media screen and (max-width: 540px) {
  .intro h1, .intro .mobile {
    font-size: var(--step-3); } }