.c-hero {
  --box-space: var(--space-xl) calc(var(--container-gutter) + ((var(--container-x-wide) - var(--container-wide)) / 2));
  --hero-background-color: var(--color-alto-lighter);
  background-color: #f8f8f8;
  background-color: var(--hero-background-color);

}


.section-page.c-hero {
  --hero-background-color: var(--color-secondary);
  /*--box-space: var(--space-xl) calc(var(--container-gutter) + ((var(--container-x-wide) - var(--container-wide)) / 2 )) ;*/
}

.section-page.c-hero .c-hero--text>*:not(.button--secondary) {
  color: white;
}

.section-page.c-hero .c-hero--text>.button--primary:hover {
  color: #101e8e;
  color: var(--color-primary);
}

.c-hero .l-container {
  width: max(16rem, min(100vw, 95rem));
  width: var(--container-x-wide);
  max-width: 100vw;
  padding: 0;
}

@media (min-width: 75em) {

.c-hero .l-container {
    padding-right: 0;
    padding-left: calc(max(16rem, min(100vw, 95rem)) + ((max(16rem, min(98vw, 85rem)) - max(16rem, min(98vw, 85rem))) / 2));
    padding-left: calc(var(--container-gutter) + ((var(--container-x-wide) - var(--container-wide)) / 2));
}
  }

@media (min-width: 75em) {

.c-hero .l-container {
    --box-space: var(--space-xl) 0 var(--space-3xl);
    display: grid;
    grid-template-columns: 1fr 40%;
    overflow: hidden;
}

    .c-hero .l-container:not(:has(.c-hero--image)) {
      grid-template-columns: 1fr;
    }
  }

@media (min-width: 75em) {

.section-page .l-container {
    --box-space: var(--space-4xl) 0;
    grid-template-columns: 1fr 50%;
}
  }

@media (min-width: 75em) {

.c-hero--image {
    order: 3;
    position: relative;
    display: flex;
    align-items: center;
}
  }

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

.c-hero--image img {
  -o-object-fit: cover;
     object-fit: cover;
}

.c-hero--text {
  --flow-space: var(--space);
  position: relative;
}

@media (min-width: 75em) {

.c-hero--image img {
    -webkit-clip-path: polygon(24% 0%, 100% 0%, 100% 100%, 0% 100%);
            clip-path: polygon(24% 0%, 100% 0%, 100% 100%, 0% 100%);
}
  }

/*@media (--bp-large) {
  .c-hero--text:after {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 100%;
    background-image: url(/images/Cutout.svg);
    background-repeat: no-repeat;
    background-size: cover;
    height: 100%;
    width: 200px;
    background-position: 0 100%;
  }
  .section-page .c-hero--text:after {
    background-image: url(/images/Cutout_blue.svg);
    background-image: none;
  }
  .subsite-page .c-hero--text:after {
    display: none;
  }
}*/

.subsite-page .l-container {
  display: flex;
}


.c-hero--homepage {
  background-color: #101e8e;
  background-color: var(--color-primary);
}

.c-hero--homepage__images {
  display: flex;
}

@media (min-width: 75em) {
  .c-hero--homepage {
    overflow: visible;
  }

  .c-hero--homepage__images .homepage-image {
    position: absolute;
    overflow: hidden;
    width: 320px;
    /*height: 250px;*/
  }

  .c-hero--homepage__images .homepage-image:nth-of-type(1) {
    border-radius: 0 8rem 8rem 0;
    top: 5rem;
  }

  .c-hero--homepage__images .homepage-image:nth-of-type(2) {
    border-radius: 8rem 0 0 8rem;
    right: -3rem;
  }

  .c-hero--homepage__images .homepage-image:nth-of-type(3) {
    border-radius: 5rem;
    right: 3rem;
    bottom: -3rem;
    width: 250px;
  }
}

.c-hero--homepage .l-container {
  width: max(16rem, min(100vw, 95rem));
  width: var(--container-x-wide);
  max-width: 100vw;
  padding: 0;
}

@media (min-width: 75em) {

.c-hero--homepage .l-container {
    display: flex;
    padding-right: 0;
    padding-left: 0;
    overflow: visible;
}
  }

@media (min-width: 75em) {

.c-hero--homepage .c-hero--text {
    max-width: 543px;
    margin-left: auto;
    margin-right: auto;
}
  }

.c-hero--homepage.section-page .c-hero--text:after {
  display: none;
}

.c-hero--homepage .button--primary {
  border: 1px solid white;
}

.c-hero--text .c-member-content-label {
  padding-top: 2rem;
  display: inline-block;
  background-color: #EEEFF5;
  background-color: var(--color-torea-blue-light);
  color: #1365DF;
  color: var(--color-new-lochmara);
  font-size: max(0.88rem, min(calc(0.75rem + 0.33vw), 1.00rem));
  font-size: var(--type--1);
  font-weight: 600;
  padding-bottom: max(1rem, min(calc(1.40rem + 1.41vw), 1.5rem));
  padding-bottom: var(--space);
  border-radius: 0.5rem;
  padding: 5px 10px 5px 10px;
}

.section-page.c-hero .c-hero--text .c-member-content-label.c-section-page-label {
  color: #1365DF;
  color: var(--color-new-lochmara);
}