layout.css

@layer components {
  /*! purgecss start ignore */
  .banner,
  .banner-default,
  .banner-with-tick,
  .banner-default-with-tick {
    @apply block relative p-gutterHalf mx-0 mt-gutter mb-gutterHalf clear-both text-left font-medium text-smaller border-4 border-solid border-green leading-tight text-green;
  }

  .banner:focus,
  .banner-default-with-tick:focus {
    @apply outline-yellow;
    outline-style: solid;
    outline-offset: 1px;
    outline-width: 3px;
  }

  .banner-dangerous {
    @apply border-red text-red mt-gutterHalf;
  }

  .banner-dangerous p {
    @apply my-gutterHalf;
  }

  .banner-dangerous p:last-child {
    @apply mb-0;
  }

  .banner-dangerous p:first-child {
    @apply mt-0;
  }

  .banner-title {
    @apply font-sans text-title border-none pl-0 mb-gutterHalf;
  }

  .banner-with-tick,
  .banner-default-with-tick {
    background-position: 15px 15px;
    @apply bg-tick bg-no-repeat bg-[1em] py-gutterHalf px-gutterAndAHalf;
  }

  .banner-list-bullet {
    @apply mb-0 font-normal;
  }

  .column-main .heading-large,
  .column-main > .heading-medium {
    @apply mx-0 mb-8 mt-gutterHalf break-words;
  }

  .column-main .heading-large.top-gutter-0,
  .column-main > .heading-medium.top-gutter-0 {
    @apply mt-0;
  }

  #content {
    @apply pb-gutter outline-none;
  }

  @variant md {
    #content {
      padding-bottom: 90px;
    }
  }

  /* This was previously the %site-width-container mixin */
  #content,
  .global-cookie-message p {
    max-width: 960px;
    @apply my-0 mx-gutterHalf;
  }

  @variant md {
    #content,
    .global-cookie-message p {
      @apply mx-gutter;
    }
  }

  @variant lg {
    #content,
    .global-cookie-message p {
      @apply mx-auto;
    }
  }

  /* Home page was built with different CSS - override */
  #content.home-page-content {
    max-width: none;
    @apply mx-0 pb-0;
  }

  /*! purgecss end ignore */
}