:root {
  --content-padding-inline-breakpoint-lg: var(--spacing-1000);
  --content-padding-inline-breakpoint-md: var(--spacing-750);
}

body {
  display: flex;
  flex-direction: column;
}

p {
  text-wrap: pretty;
}

@layer jui {
    #position-banner {
      margin-top: 3rem;
    }
    @media screen and (width >= 65em) {
       #position-banner {
           margin-bottom: 5rem;
       }
    }
    @media screen and (width >= 87.5em) {
        #position-banner {
            margin-bottom: 7rem;
        }
    }
}

@layer component {
  footer .mod-menu {
    display: grid;
    grid-auto-flow: column;
    gap: 2.5rem;
    margin-top: 2.5rem;
  }
}

@layer base {
  a {
    word-break: break-word;
  }

  a.no-hover-effect:hover, a.no-hover-effect:focus {
    background: none;
    box-shadow: none;
    color: inherit;
  }
}