.c-hero {
  --container-x-wide: 1480px;

  font-size: max(1.20rem, min(calc(1.10rem + 0.50vw), 1.56rem));

  font-size: var(--step-1);
  font-weight: 300;
}

.c-hero h1 {
  margin-top: max(1.00rem, min(calc(0.93rem + 0.35vw), 1.25rem));
  margin-top: var(--space-s);
}

.c-hero > .l-container {
  max-width: calc(max(17.5rem, min(82vw, 77.5rem)) + (max(1rem, min(2vw, 2.5rem)) * 2));
  max-width: calc(var(--container-narrow) + (var(--container-gutter) * 2));
}

.c-hero--content-text {
  padding-top: max(3.00rem, min(calc(2.79rem + 1.04vw), 3.75rem));
  padding-top: var(--hero-spacing-start, var(--space-xl));
  padding-bottom: max(3.00rem, min(calc(2.79rem + 1.04vw), 3.75rem));
  padding-bottom: var(--hero-spacing-end, var(--space-xl));
}

.c-hero--content-text > * {
   max-width: 47.5rem;
   max-width: var(--paragraph-max-width);
}

.c-hero--section {
    background-color: #201C40;
    background-color: var(--color-deep-purple);
    color: #FFF;
    color: var(--color-white);
}

@media (min-width: 990px){

.c-hero--section {
      border-top: 4px solid #F2F0EC;
      border-top: 4px solid var(--color-warm-grey);
}
    }

@media (min-width: 990px){

.c-hero--section .c-hero--content-with-image {
    --gap: max(2rem, min(10vw, 120px));

    display: grid;
    gap: max(2rem, min(10vw, 120px));
    grid-gap: max(2rem, min(10vw, 120px));
    grid-gap: var(--gap);
    gap: var(--gap);
    grid-template-columns: calc((100% - max(2rem, min(10vw, 120px)))*0.483) calc((100% - max(2rem, min(10vw, 120px)))*0.516);
    grid-template-columns: calc((100% - var(--gap))*0.483) calc((100% - var(--gap))*0.516);
}
  }

.c-hero--section h1 {
  font-size: max(2.49rem, min(calc(2.11rem + 1.84vw), 3.82rem));
  font-size: var(--step-5);
}

.c-hero--section > .l-container {
  padding-left: max(1rem, min(2vw, 2.5rem));
  padding-left: var(--container-gutter);
  padding-right: max(1rem, min(2vw, 2.5rem));
  padding-right: var(--container-gutter);
}

@media (min-width: 990px) {

.c-hero--section > .l-container {
    --slat-gap: var(--space-2xl);

    padding-right: 0;
    padding-left: calc((100vw - max(17.5rem, min(82vw, 77.5rem))) / 2 );
    padding-left: calc((100vw - var(--container-narrow)) / 2 );
    width: var(--container-x-wide);
    max-width: 100vw;
}
  }

@media (min-width: 1480px) {

.c-hero--section > .l-container {
    padding-left: calc(((var(--container-x-wide) - max(17.5rem, min(82vw, 77.5rem))) / 2 ));
    padding-left: calc(((var(--container-x-wide) - var(--container-narrow)) / 2 ));
}
  }

@media (max-width:990px) {

.c-hero--content-image > .paragraph--type--image,
.c-hero--content .field--name-cpag-image {
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
}
  }

.c-hero .c-image {
  max-width: none;
  max-width: initial;
}

@media (min-width: 990px) {

.c-hero--content-image * {
    height: 100%;
    overflow: hidden;
}
  }

@media (min-width: 990px) {

.c-hero--content-image img {
    width: auto;
    max-width: none;
    max-width: initial;
}
  }

.page-node-type-wr-page .c-hero--content-text,
.page-node-type-page .c-hero--content-text {
  border-bottom: 1px solid #D6D3CF;
  border-bottom: 1px solid var(--color-mid-grey);
  padding-bottom: max(1.50rem, min(calc(1.39rem + 0.52vw), 1.88rem));
  padding-bottom: var(--space-m);
  margin-bottom: max(2.00rem, min(calc(1.86rem + 0.69vw), 2.50rem));
  margin-bottom: var(--space-l);
}



.c-hero--relevance-colour_1 {
  --nation-color: var(--cpag-scotland-bright-teal, #00B6D1);
}

.c-hero--relevance-colour_2 {
  --nation-color:  var(--color-orange);
}

.c-hero--relevance-colour_3 {
  --nation-color:  var(--color-green);
}

.c-hero--relevance-colour_4 {
  --nation-color:  var(--color-hotpink);
}

.c-hero--relevance-colour_5 {
  --nation-color:  var(--color-yellow);
}

.c-hero--section .c-hero--relevance {
  color: var(--nation-color);
  font-weight: 600 ;
}

.page-node-type-template .c-hero--content-text {
  padding-bottom: max(1.50rem, min(calc(1.39rem + 0.52vw), 1.88rem));
  padding-bottom: var(--space-m);
}

.field--name-cpag-template-name {
  --flow-space: var(--space-3xs);
}

.field--name-cpag-about-template {
  font-size: max(1.20rem, min(calc(1.10rem + 0.50vw), 1.56rem));
  font-size: var(--step-1);
  max-width: 47.5rem;
  max-width: var(--paragraph-max-width);
}

.page-node-type-template .c-hero--content {
  padding-bottom: max(1.50rem, min(calc(1.39rem + 0.52vw), 1.88rem));
  padding-bottom: var(--space-m);
  margin-bottom: max(2.00rem, min(calc(1.86rem + 0.69vw), 2.50rem));
  margin-bottom: var(--space-l);
  border-bottom: 1px solid #D6D3CF;
  border-bottom: 1px solid var(--color-mid-grey) ;
}