*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

ul[role="list"],
ol[role="list"],
li {
  list-style: none;
}

a:not([class]) {
  text-decoration-skip-ink: auto;
}

img,
picture,
svg,
video,
canvas {
  max-width: 100%;
  height: auto;
}

iframe {
  border: none;
}

input,
button,
textarea,
select {
  font: inherit;
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
}

p {
  text-wrap: pretty;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  text-wrap: balance;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
    transition: none;
  }
}

:root {
  --black: #0a0203;
  --white: #ffffff;
  --surface-grey: #eeeeee;
  --bolton-green: #286140;
  --bury-orange: #f57f45;
  --manchester-purple: #8f1a95;
  --oldham-pink: #f388af;
  --rochdale-blue: #96cfea;
  --salford-blue: #1c57a5;
  --stockport-red: #ac1e2d;
  --thameside-stone: #d3c5a0;
  --trafford-green: #c7db48;
  --wigan-yellow: #ffd84a;

  --spacing-xs: 0.25rem;
  --spacing-s: 0.5rem;
  --spacing-m: 1rem;
  --spacing-l: 1.5rem;
  --spacing-xl: 2rem;
  --spacing-xxl: 4rem;
  --spacing-xxxl: 6rem;

  --responsive-spacing-sm: clamp(0rem, 0.3rem + 1.27vw, 1.5rem);
  --responsive-spacing: clamp(1rem, 0.57rem + 2.025vw, 3rem);
  --responsive-spacing-lg: clamp(3rem, 2.438rem + 3vw, 6rem);
  
  --font-size-h1: clamp(2.25rem, 1.25rem + 4.444vw, 5.25rem);
  --margin-h1: clamp(1rem, 1rem + 1vw, 2.5rem);
  --font-size-h2: clamp(2rem, 1.333rem + 2.963vw, 4rem);
  --margin-h2: clamp(1rem, 0.75rem + 1vw, 2rem);
  --font-size-h3: clamp(1.75rem, 1.417rem + 1.481vw, 2.75rem);
  --margin-h3: clamp(0.75rem, 0.5rem + 0.5vw, 1.75rem);
  --font-size-h4: clamp(1.5rem, 1.333rem + 0.741vw, 2rem);
  --margin-h4: clamp(0.75rem, 0.5rem + 0.4vw, 1.25rem);
  --font-size-h5: clamp(1.25rem, 1.083rem + 0.741vw, 1.75rem);
  --font-size-h6: clamp(1.125rem, 1rem + 0.556vw, 1.5rem);
  --font-size-body: clamp(1rem, 0.917rem + 0.37vw, 1.25rem);

   /* Grid */
  --grid-template-columns: repeat(12, 1fr);
  --grid-gap: var(--responsive-spacing);

  /* Misc */
  --max-container-width: 1920px;
  --border-radius: 0.75rem;
  --aspect-ratio: 16 / 9;
  --box-shadow: 0 0 0.25rem 0 rgba(0, 0, 0, 0.25);
  --transition-all: all ease 0.3s;
}


.grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  margin: 0 auto;
  width: 100%;
  gap: var(--grid-gap);
}

[class*="col-"] {
  grid-column: span 12;
}

.col-12 {
  grid-column: span 12;
}

.col-11 {
  grid-column: span 11;
}

.col-10 {
  grid-column: span 10;
}

.col-9 {
  grid-column: span 9;
}

.col-8 {
  grid-column: span 8;
}

.col-7 {
  grid-column: span 7;
}

.col-6 {
  grid-column: span 6;
}

.col-5 {
  grid-column: span 5;
}

.col-4 {
  grid-column: span 4;
}

.col-3 {
  grid-column: span 3;
}

.col-2 {
  grid-column: span 2;
}

.col-1 {
  grid-column: span 1;
}

@media (min-width: 375px) {
  .col-sm-10 {
    grid-column: span 10;
  }

  .col-sm-9 {
    grid-column: span 9;
  }

  .col-sm-8 {
    grid-column: span 8;
  }

  .col-sm-7 {
    grid-column: span 7;
  }

  .col-sm-6 {
    grid-column: span 6;
  }

  .col-sm-5 {
    grid-column: span 5;
  }

  .col-sm-4 {
    grid-column: span 4;
  }

  .col-sm-3 {
    grid-column: span 3;
  }

  .col-sm-2 {
    grid-column: span 2;
  }
}

@media (min-width: 768px) {
  .col-md-10 {
    grid-column: span 10;
  }
  .col-md-9 {
    grid-column: span 9;
  }
  .col-md-8 {
    grid-column: span 8;
  }
  .col-md-6 {
    grid-column: span 6;
  }
  .col-md-4 {
    grid-column: span 4;
  }
  .col-md-3 {
    grid-column: span 3;
  }
  .col-md-2 {
    grid-column: span 2;
  }
}

@media (min-width: 1200px) {
  .col-lg-12 {
    grid-column: span 12;
  }
  .col-lg-10 {
    grid-column: span 10;
  }
  .col-lg-9 {
    grid-column: span 9;
  }
  .col-lg-8 {
    grid-column: span 8;
  }
  .col-lg-7 {
    grid-column: span 7;
  }
  .col-lg-6 {
    grid-column: span 6;
  }
  .col-lg-5 {
    grid-column: span 5;
  }
  .col-lg-4 {
    grid-column: span 4;
  }
  .col-lg-3 {
    grid-column: span 3;
  }
  .col-lg-2 {
    grid-column: span 2;
  }
}

@media (min-width: 1440px) {
  .col-xl-12 {
    grid-column: span 12;
  }
  .col-xl-10 {
    grid-column: span 10;
  }
  .col-xl-9 {
    grid-column: span 9;
  }
  .col-xl-8 {
    grid-column: span 8;
  }
  .col-xl-7 {
    grid-column: span 7;
  }
  .col-xl-6 {
    grid-column: span 6;
  }
  .col-xl-5 {
    grid-column: span 5;
  }
  .col-xl-4 {
    grid-column: span 4;
  }
  .col-xl-3 {
    grid-column: span 3;
  }
  .col-xl-2 {
    grid-column: span 2;
  }
}

body {
  font-family: "Inter", sans-serif;
  color: var(--black);
}

h1 {
  font-size: var(--font-size-h1);
  line-height: 1;
  font-weight: 700;
  margin-bottom: var(--margin-h1);

  &:only-child {
    margin-bottom: 0;
  }

  &.white {
    color: #ffffff;
  }
}

h2 {
  font-size: var(--font-size-h2);
  line-height: 1;
  font-weight: 700;
  margin-bottom: var(--margin-h2);

  &:only-child {
    margin-bottom: 0;
  }

  &.white {
    color: #ffffff;
  }
}

h3 {
  font-size: var(--font-size-h3);
  line-height: 1;
  font-weight: 700;
  margin-bottom: var(--margin-h3);

  &:only-child {
    margin-bottom: 0;
  }

  &.white {
    color: #ffffff;
  }
}

h4 {
  font-size: var(--font-size-h4);
  line-height: 1;
  font-weight: 600;
  margin-bottom: var(--margin-h4);

  &.white {
    color: #ffffff;
  }
}

h5 {
  font-size: var(--font-size-h5);
  line-height: 1.1;
  font-weight: 600;
  margin-bottom: 1rem;

  &.white {
    color: #ffffff;
  }
}

h6 {
  font-size: var(--font-size-h6);
  line-height: 1.1;
  font-weight: 600;
  margin-bottom: 1rem;

  &.white {
    color: #ffffff;
  }
}

p {
  font-size: var(--font-size-body);
  line-height: 1.6;
  margin-bottom: 1rem;
  font-weight: 400;

  &:last-child {
    margin-bottom: 0;
  }

  &:only-child {
    margin-bottom: 0;
  }

  &.small {
    font-size: 0.875rem;
    line-height: 1.6;
  }

  &.large {
    font-size: 1.1rem;
    line-height: 1.6;
  }

  &.white {
    color: #ffffff;
  }
}

ul,
ol {
  li {
    font-size: var(--font-size-body);
    line-height: 1.6;
  }
}

a {
  text-decoration: none;
  font-weight: 400;
  scroll-behavior: smooth;
  color: var(--black);

  &:hover,
  &:focus {
    text-decoration: underline;
  }

  &:focus-visible {
    outline: 0.125rem solid yellow;
    outline-offset: 0.125rem;
    box-shadow: 0 0 0 0.125rem blue;
    border-radius: 0.25rem;
  }

  &.phone-number {
    font-size: 3.063rem;
    font-weight: 700;
    margin-bottom: 1rem;
  }
}
/* 
@media (min-width: 1440px) {
  h1 {
    font-size: 4.765rem;
  }

  h2 {
    font-size: 3.25rem;
  }

  h3 {
    font-size:  2.75rem;
  }

  h4 {
    font-size: 2.25rem;
  }

  h5 {
    font-size: 1.75rem;
  }

  h6 {
    font-size: 1.5rem;
  }

  p, ul, li, a {
    font-size: 1.25rem;
  }
} */

.bold {
  font-weight: bold;
}

.accordion {
  padding: 3rem 1rem;

  h3 {
    margin-bottom: 0;
  }

  .accordion-button {
    all: unset;
    border-top: 1px solid var(--black);
    width: calc(100% - 1rem);
    padding: 1rem 0.5rem;
    cursor: pointer;
    outline: none;
    text-align: left;
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
    transition: all 0.3s ease;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    line-height: 1.5;

    &[aria-expanded="true"] {
      svg {
        transform: rotate(45deg);
      }
    }

    &:hover,
    &:focus {
      background-color: unset;
    }

    &:focus-visible {
      border-radius: 0.25rem;
    }

    svg {
      position: static;
      margin-left: 1rem;
    }

    .bg-stockport-red &,
    .bg-salford-royal-blue &,
    .bg-bolton-dark-green &,
    .bg-manchester-purple &,
    .bg-black & {
      border-top: 1px solid var(--white);
    }
  }

  .accordion-item {
    &:last-child {
      border-bottom: 1px solid var(--black);

      .bg-stockport-red &,
      .bg-salford-royal-blue &,
      .bg-bolton-dark-green &,
      .bg-manchester-purple &,
      .bg-black & {
        border-bottom: 1px solid var(--white);
      }
    }
  }

  .accordion-panel {
    max-height: 0;
    overflow: hidden;
    padding: 0 0.5rem 1.5rem;
    transition: max-height 0.3s ease, padding 0.3s ease;

    p,
    ul,
    ol {
      margin-top: 0;
      max-width: 43.75rem;
    }

    ul,
    ol {
      padding-left: 1.5rem;

      li {
        list-style: initial;
        padding-left: 0.5rem;
        margin: 1rem 0;
        line-height: 1.6;
      }
    }

    ol {
      li {
        list-style: decimal;
      }
    }

    a {
      text-decoration: underline;
      font-weight: 600;

      &:hover,
      &:focus {
        text-decoration: none;
      }
    }
  }

  .col-md-6 & {
    .col-lg-4,
    .col-lg-8 {
      grid-column: span 12;
    }
  }
}

@media (min-width: 1440px) {
  .accordion {
    padding: 3rem 0;

    .layout-one-column & {
      padding: 1.5rem 0;

      .accordion-container {
        min-width: 43.75rem;
      }
    }

    .layout-two-column &,
    .layout-three-column & {
      padding: 1rem 0;
    }
  }
}

button,
.button {
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  border: 2px solid var(--black);
  color: #ffffff;
  background-color: var(--black);
  padding: 0.75rem 0.75rem 0.75rem 1.25rem;
  border-radius: 4rem;
  font-size: 1rem;
  line-height: 1.6;
  letter-spacing: 2%;
  transition: background-color ease 0.3s;
  text-decoration: none;
  margin: 1rem 0;
  position: relative;

  &[target="_blank"] {
    svg {
      margin: 0 0 0.15rem 0.5rem;
    }
  }

  svg {
    display: block;
    margin-left: 0.5rem;
    transition: all ease 0.3s;
    height: 1rem;
    min-width: 1rem;

    .shaft {
      stroke: #ffffff;
      stroke-linecap: round;
    }

    .shaft,
    .point {
      fill: none;
      stroke-linejoin: round;
      stroke-width: 2px;
      transition: all ease 0.3s;
    }

    .point {
      stroke: #ffffff;
    }
  }

  &:hover,
  &:focus {
    cursor: pointer;
    color: var(--black);
    background-color: #ffffff;
    text-decoration: none;

    svg {
      .shaft,
      .point {
        stroke: var(--black);
      }
    }
  }

  &:focus-visible {
    outline: 0.125rem solid yellow;
    outline-offset: 0.125rem;
    box-shadow: 0 0 0 0.125rem blue;
    border-radius: 4rem;
  }

  &.button--secondary {
    border: 2px solid var(--black);
    color: var(--black);
    background-color: transparent;

    svg {
      .shaft,
      .point {
        stroke: var(--black);
        transition: all ease 0.3s;
      }
    }

    &:hover,
    &:focus {
      color: #ffffff;
      background-color: var(--black);

      svg {
        .shaft,
        .point {
          stroke: #ffffff;
        }
      }
    }
  }

  &.button--tertiary {
    border: none;
    background-color: transparent;
    border-radius: 0;
    padding: 0.5rem 1.5rem 0.5rem 0;
    margin: 0.25rem 0;
    color: var(--black);
    border-bottom: 2px solid var(--black);
    position: relative;

    svg {
      position: absolute;
      right: 0rem;
      transition: all ease 0.3s;

      .shaft,
      .point {
        stroke: var(--black);
        transition: all ease 0.3s;
      }
    }
  }
}

.link {
  padding-bottom: 0.25rem;
  border-bottom: 2px solid black;
  position: relative;
  color: var(--black);
  display: flex;
  align-items: center;
  align-self: flex-start;

  svg {
    display: block;
    margin-left: 0.5rem;
    transition: all ease 0.3s;
    height: 1rem;
    min-width: 1rem;
    margin-right: -0.5rem;

    .shaft {
      stroke: var(--black);
      stroke-linecap: round;
    }

    .point {
      stroke: var(--black);
    }

    .shaft,
    .point {
      fill: none;
      stroke-linejoin: round;
      stroke-width: 2px;
      transition: all ease 0.3s;
    }

  }

  &:hover,
  &:focus {
    cursor: pointer;
    color: var(--black);
    text-decoration: none;

    svg {
      .shaft,
      .point {
        stroke: var(--black);
      }
    }
  }
}


@media (min-width: 1440px) {
  button,
  .button {
    font-size: 1.25rem;
    line-height: 1.3;
    letter-spacing: 2%;
    margin: 1.5rem 0;
    padding: 0.75rem 1.25rem 0.75rem 2rem;

    &+.button {
      margin: 0;
    }

    svg {
      height: 1.25rem;
      min-width: 1.25rem;
      right: 0.5rem;
    }
  }

  .link {
    font-size: 1.25rem;

    svg {
      bottom: 0.45rem;
    }
  }

}
.card {
  box-shadow: 0 0 0.5rem 0 rgba(0, 0, 0, 0.1);
  border-radius: 0.75rem;
  background-color: #ffffff;

  .image-wrapper {
    img {
      border-radius: 0.75rem 0.75rem 0 0;
      aspect-ratio: 16 / 9;
      width: 100%;
      object-fit: cover;
    }
  }

  .content-wrapper {
    padding: 1rem;

    h3,
    p {
      color: var(--black);
    }

    .button {
      margin-bottom: 0;

      &[target="_blank"] {
        svg {
          margin: 0 0 0.25rem 0.25rem;
        }
      }
    }
  }
}

@media (min-width: 768px) {
  .card {
    height: 100%;
    display: flex;
    flex-direction: column;

    .content-wrapper {
      padding: 1rem;
      flex: 1;
      display: flex;
      flex-direction: column;

      h3 {
        font-size: 2rem;
      }

      p {
        margin-bottom: 2rem;
      }

      .button {
        margin-top: auto;
        align-self: flex-start;
      }
    }
  }

}

@media (min-width: 1200px) {
  .card {
    .content-wrapper {
      padding: 2rem;

      h3 {
        font-size: 2.441rem;
      }
    }
  }
}
.checkbox-filter {
    margin: 2rem 0;
    max-width: 20rem;
    padding: 0;

    .filter-title {
        font-size: 1.953rem;
        line-height: 1;
        font-weight: 600;
    }
    
    .accordion-item {
        margin-bottom: 0.5rem;

        .checkbox,
        .checkbox input,
        label {
            cursor: pointer;
        }

        .checkbox {
            margin: 1rem 0.5rem;
        }

        label {
            margin-left: 0.5rem;
        }
    }
}

.content-item-list {
  margin-bottom: 3rem;
  margin-top: var(--responsive-spacing);

  .grid {
    grid-gap: 0.75rem;
  }

  .articles,
  .top-articles {
    margin: 0 1rem;
  }

  .articles {
    margin-top: 0.75rem;
  }

  .news-item {
    transition: all ease 0.3s;
    display: flex;

    &:hover {
      text-decoration: none;

      h3 {
        text-decoration: underline;
        text-decoration-thickness: 3px;
        text-decoration-color: var(--thameside-stone);
      }

      img {
        transform: scale(1.05);
      }
    }

    .content {
      overflow: hidden;
      display: flex;
      flex-direction: column;
      flex: 1;

      .img-wrapper {
        width: 100%;
        aspect-ratio: 1.59 / 1;
        overflow: hidden;
        position: relative;
        border-radius: 0.75rem;
        margin-bottom: 0.5rem;

        img {
          object-fit: cover;
          object-position: center;
          width: 100%;
          height: 100%;
          transition: all ease 0.3s;
        }
      }

      .information {
        padding: 1rem 0;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        color: var(--black);
        flex: 1;

        h3 {
          font-size: clamp(1rem, 0.6909rem + 1.4545vw, 2rem);
          line-height: 1.3;
        }

        .title-full {
          display: none;
        }

        footer {
          display: flex;
          flex-direction: row;
          flex-wrap: wrap;
          padding: 0 0 0.75rem 0;
          background-color: var(--white);
          margin-top: auto;

          P {
            margin-right: 1rem;
            margin-bottom: 0;
            color: rgba(80, 90, 95, 1);
            display: flex;
            align-items: center;
            font-size: 0.75rem;

            svg {
              margin-right: 0.5rem;
            }
          }
        }
      }

      .featured & {
        background-color: var(--rochdale-blue);
        border-radius: 0.75rem;
        overflow: hidden;
        margin: 1rem 1rem 0.5rem;

        &:hover {
          h3 {
            text-decoration-color: var(--black);
          }
        }

        .img-wrapper {
          border-radius: 0.75rem 0.75rem 0 0;
          aspect-ratio: unset;
          margin-bottom: 0;
          max-height: 28rem;

          img {
            border-radius: 0;
          }
        }

        .information {
          padding: 1rem 1rem 0;

          h3 {
            font-size: 1.25rem;
            margin: 0;
            line-height: 1.3;
          }

          .title-full {
            display: block;
          }

          .title-truncated {
            display: none;
          }

          p {
            margin: 0.5rem 0;
          }

          footer {
            background-color: var(--rochdale-blue);

            p {
              color: var(--black);
              margin: 0.5rem 0.5rem 0.5rem 0;

              svg {
                path,
                rect,
                circle {
                  stroke: var(--black);
                }
              }
            }
          }
        }
      }
    }

    .top-articles &,
    .articles & {
      .content {
        display: grid;
        grid-template-columns: repeat(12, 1fr);
      }

      .img-wrapper {
        grid-column: span 4;
      }

      .information {
        grid-column: span 8;
        padding: 0 0 0 1rem;

        h3 {
          margin-bottom: 0;
          font-size: clamp(1rem, 0.6909rem + 1.4545vw, 2rem);
        }

        p {
          display: none;
        }

        footer {
          p {
            display: flex;
            margin-top: 0.5rem;
            margin-right: 0.6rem;

            &.date {
              svg {
                height: 1rem;
                width: 20px;
              }
            }

            svg {
              margin-right: 0.25rem;
            }
          }
        }
      }
    }
  }
}

@media (min-width: 560px) {
  .content-item-list {
    .news-item {
      .content {
        .information {
          footer {
            p {
              font-size: 1rem;
              margin-right: 1rem;
            }
          }
        }
      }
    }
  }
}

@media (min-width: 768px) {
  .content-item-list {
    .grid {
      grid-gap: 1.5rem;
    }

    .articles {
      margin-top: 1rem;
    }

    .news-item {
      display: flex;
      height: 100%;

      .content {
        .information {
          flex: 1;

          .title-full {
            display: block;
            margin: 0.5rem 0;
            font-size: 1.75rem;
            line-height: 1.1;
          }

          .title-truncated {
            display: none;
          }
        }

        .featured & {
          margin-bottom: 0;

          .information {
            h3 {
              font-size: 2rem;
              line-height: 1.1;
            }
          }
        }

        .top-articles &,
        .articles & {
          display: flex;
          flex-direction: column;
          flex: 1;

          .img-wrapper {
            grid-column: span 12;
          }

          .information {
            grid-column: span 12;
            padding: 0;
          }
        }
      }
    }
  }
}

@media (min-width: 1200px) {
  .content-item-list {
    .grid {
      grid-gap: 1.5rem;
    }

    .articles,
    .top-articles {
      margin: 0;
    }

    .articles {
      padding-top: 1.5rem;
    }

    .news-item {
      &.featured {
        height: 100%;
        padding-bottom: 0;
      }

      .top-articles & {
        &:last-child {
          .content {
            padding-bottom: 0;
          }
        }

        &:first-child {
          .content {
            padding-top: 0;
          }
        }
      }

      .content {
        .articles &,
        .top-articles & {
          display: grid;
          grid-template-columns: repeat(12, 1fr);

          .img-wrapper {
            grid-column: span 4;
          }

          .information {
            grid-column: span 8;
          }
        }

        .img-wrapper {
          margin-bottom: 0;
        }

        .information {
          padding-top: 0;

          .top-articles & {
            margin-left: 1rem;
          }

          .title-full {
            font-size: clamp(1.5rem, 0.25rem + 1.6667vw, 1.75rem);
            line-height: 1.1;
          }

          footer {
            padding-bottom: 0.5rem;

            p {
              font-size: 1rem;
              margin-right: 1rem;

              &:last-child {
                margin-right: 0;
              }
            }
          }
        }

        .featured & {
          margin: 0;

          .img-wrapper {
            margin-bottom: 0;
          }

          .information {
            padding: 1.5rem;

            h3 {
              line-height: 1.1;
            }

            p {
              margin-top: 0.5rem;
              padding-right: 2rem;
              line-height: 1.4;
            }

            footer {
              padding-bottom: 0;
              margin-top: 0;

              p {
                font-size: 1rem;
                margin: 0 1.5rem 0 0;
                padding-right: 0;
              }
            }
          }
        }

        .top-articles & {
          padding: 0.75rem 0;
        }
        
        .articles & {
          display: flex;
          padding: 0;

          .title-full {
            margin-top: 1rem;
          }

          p {
            display: block;
            margin-top: 0.5rem;
          }

          .information {
            padding: 0;
          }
        }
      }
    }
  }
}

footer {
  background-color: var(--black);
  padding: 4rem 1rem 3rem;

  p {
    color: var(--white);
    line-height: 1.1;
  }

  nav {
    margin-bottom: 3rem;
    ul {
      li {
        margin-right: 1.5rem;
        margin-bottom: 0.5rem;

        h2 {
          color: var(--white);
          font-size: var(--font-size-h4);
          margin-bottom: var(--spacing-m);
        }

        a {
          color: var(--white);
          line-height: 1.5rem;
        }

        ul {
          margin-bottom: var(--spacing-xl);
          flex-direction: column;
        }
      }
    }
  }

  .social-links {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(2, 1fr);
    grid-column-gap: 1.75rem;
    grid-row-gap: 1rem;
    max-width: 24rem;
    align-self: flex-start;
    margin-bottom: 2rem;

    .fscs {
      grid-area: 1 / 4 / 5 / 5;
    }

    .mbs {
      grid-area: 1 / 1 / 3 / 4;
      padding-right: 0.5rem;
    }

    ul {
      grid-area: 3 / 1 / 5 / 4;
      display: flex;
      margin-bottom: 0;
      margin-top: 1rem;
      align-items: flex-start;

      li {
        margin-right: 2.75rem;

        a {
          height: 2.75rem;
          width: 2.75rem;
          display: block;

          img {
            height: 2.75rem;
            width: 2.75rem;
          }
        }
      }
    }
  }
}

@media (min-width: 768px) {
  footer {
    .container {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
    }

    nav {
      margin-top: 0;

      ul {
        display: flex;
      }
    }

    .social-links {
      ul {
        li {
          &:hover,
          &:focus {
            img {
              transform: scale(1.5);
            }
          }

          a {
            img {
              transition: all ease 0.3s;
            }
          }
        }
      }
    }
  }
}

@media (min-width: 1200px) {
  footer {
    padding: 6rem 0;

    nav {
      ul {
        li {
          ul {
            margin-bottom: unset;
          }
        }
      }
    }
  }
}

.glide {
  position: relative;
  width: 100%;
  box-sizing: border-box;
}

.glide * {
  box-sizing: inherit;
}

.glide-track {
  overflow: hidden;
}

.glide-slides {
  position: relative;
  width: 100%;
  list-style: none;
  backface-visibility: hidden;
  transform-style: preserve-3d;
  touch-action: pan-Y;
  overflow: hidden;
  margin: 0;
  padding: 0;
  white-space: nowrap;
  display: flex;
  flex-wrap: nowrap;
  will-change: transform;
}

.glide-slides--dragging {
  user-select: none;
}

.glide-slide {
  width: 100%;
  height: 100%;
  flex-shrink: 0;
  white-space: normal;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}

.glide-slide a {
  user-select: none;
  -webkit-user-drag: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

.glide-arrows {
  -webkit-touch-callout: none;
  user-select: none;
}

.glide-bullets {
  -webkit-touch-callout: none;
  user-select: none;
}

.glide--rtl {
  direction: rtl;
}

/*# Theme */

.glide-arrow {
  position: absolute;
  display: block;
  top: 50%;
  z-index: 2;
  color: white;
  text-transform: uppercase;
  padding: 0.5rem 0.75rem;
  background-color: transparent;
  border: 0.125rem solid rgba(255, 255, 255, 0.5);
  border-radius: 4px;
  box-shadow: 0 0.25rem 0.5rem 0 rgba(0, 0, 0, 0.1);
  text-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.1);
  opacity: 1;
  cursor: pointer;
  transition: opacity 150ms ease, border 300ms ease-in-out;
  transform: translateY(-50%);
  line-height: 1;
}

.glide-arrow:focus {
  outline: none;
}

.glide-arrow:hover {
  border-color: white;
}

.glide-arrow--left {
  left: 2rem;
}

.glide-arrow--right {
  right: 2rem;
}

.glide-arrow--disabled {
  opacity: 0.33;
}

.glide-bullets {
  display: flex;
  list-style: none;
  justify-content: center;
}

.glide-bullet {
  background-color: rgba(10, 2, 3, 0.75);
  width: 0.75rem;
  height: 0.75rem;
  padding: 0;
  border-radius: 50%;
  border: 2px solid transparent;
  transition: all 300ms ease-in-out;
  cursor: pointer;
  line-height: 0;
  box-shadow: 0 0.25rem 0.5rem 0 rgba(0, 0, 0, 0.1);
  margin: 0.625rem;
}

.glide-bullet:focus {
  outline: none;
}

.glide-bullet:hover, .glide-bullet:focus {
  border: 2px solid white;
  background-color: var(--manchester-purple);
}

.glide-bullet--active {
  background-color: var(--manchester-purple);
}

.glide--swipeable {
  cursor: grab;
  cursor: -moz-grab;
  cursor: -webkit-grab;
}

.glide--dragging {
  cursor: grabbing;
  cursor: -moz-grabbing;
  cursor: -webkit-grabbing;
}
.jotform-form {
  padding: 0 1rem 3rem;

  input,
  textarea,
  select {
    font: inherit;
    border-radius: 0.375rem;
    border: 0.125rem solid black;
    min-height: 2.375rem;
    padding: 0.375rem;

    &.form-validation-error {
      border-color: var(--stockport-red);
    }
  }

  button {
    padding-right: 1.25rem;
  }

  select {
    background-color: #fff;
    appearance: none;
    background-image: url("/images/arrow-down.svg");
    background-repeat: no-repeat;
    background-position: right 0.5rem center;
    background-size: 0.813rem;
    width: 100% !important;
    max-width: 31.25rem;
  }

  textarea {
    width: 100% !important;
    max-width: 31.25rem;
  }

  .form-textbox {
    width: 100% !important;
    max-width: 31.25rem;
  }

  .form-line {
    padding-top: 2rem;
    max-width: 768px;
  }

  .form-label {
    font-weight: 600;
  }

  .form-sub-label {
    font-size: 1rem;
  }

  .form-input-wide {
    margin-top: 1rem;
    display: flex;
    flex-direction: column;

    [data-type="control_fullname"] & {
      max-width: 31.25rem;
    }

    div:has(.form-sub-label-container) {
      display: flex;
      gap: 1rem;

      .form-sub-label-container {
        display: flex;
        flex-direction: column;
        align-self: flex-start;
        gap: 0.5rem;

        [data-type="control_fullname"] & {
          width: 50%;
        }
      }
    }

    .form-sub-label-container {
      display: flex;
      flex-direction: column;
      gap: 0.5rem;
    }
  }

  .form-radio,
  .form-checkbox {
    height: 2.063rem;
    width: 2.063rem;
    border: 0.125rem solid black;
  }

  .form-radio-item,
  .form-checkbox-item,
  .rating-item {
    display: flex;
    align-items: center;
    margin-top: 1rem;

    &:last-child {
      margin-bottom: 0;
    }

    .form-radio,
    .form-checkbox {
      margin-right: 0.5rem;
    }
  }

  .date-separate {
    display: none;
  }

  [data-component="datetime"] {
    display: none;
  }

  .form-submit-button {
    margin-top: 0;
  }

  .form-error-message {
    background-color: var(--stockport-red);
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='15' fill='none'%3E%3Cpath fill='%23fff' fill-rule='evenodd' d='M7 14.515a7 7 0 1 1 0-14 7 7 0 0 1 0 14m-.814-5.86h1.628v-5.21H6.186zM7 11.259a.82.82 0 0 0 .814-.824A.816.816 0 0 0 7 9.631a.813.813 0 1 0 0 1.628' clip-rule='evenodd'/%3E%3C/svg%3E");
    background-position: 0.375rem;
    background-repeat: no-repeat;
    background-size: 0.875rem;
    border-radius: 0.25rem;
    color: #fff;
    display: flex;
    align-items: center;
    font-size: 0.75rem;
    margin-top: 0.5rem;
    padding: 0.25rem 0.5rem 0.25rem 1.625rem;
    width: auto;
    align-self: flex-start;
    color: #fff;

    img {
      display: none;
    }
  }

  .error-navigation-inner {
    padding: 1rem;
    border: 0.125rem solid var(--stockport-red);
    background-color: var(--stockport-red);
    color: white;
    border-radius: 0.75rem;
    max-width: 768px;
    display: flex;
    align-items: center;
    gap: 1rem;
    justify-content: space-between;
    margin-top: 1rem;
    flex-wrap: wrap;

    p {
      margin-bottom: 1rem;
    }

    button {
      background-color: var(--white);
      color: var(--black);
      border: 0.125rem solid var(--white);
      margin: 0;

      &:hover,
      &:focus {
        background-color: var(--black);
        border: 0.125rem solid var(--white);
        color: var(--white);
      }
    }
  }

  .form-single-column,
  .form-multiple-column {
    margin-top: -1rem;
  }
}

@media (min-width: 768px) {
  .jotform-form {
    .form-multiple-column {
      &[data-columncount="2"] {
        display: grid;
        grid-template-columns: repeat(2, 1fr);

        .form-sub-label-container {
          width: 100%;
        }
      }

      &[data-columncount="3"] {
        display: grid;
        grid-template-columns: repeat(3, 1fr);

        .form-sub-label-container {
          width: 100%;
        }
      }
    }
  }
}

body {
  overflow-x: hidden;
  padding-top: 4.938rem;

  &.no-scroll {
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    right: 0;
    overflow-y: scroll;
  }
}

.container {
  max-width: 1920px;
  margin: 0 auto;
}

.layout-one-column {
  width: 100%;
  padding: 3rem 1rem;

  .title-container {
    margin-bottom: 1rem;
  }

  &:has(.container section) {
    padding: 3rem 1rem;
  }

  &.remove-padding-top {
    padding-top: 0;

    &:has(.container section) {
      padding-top: 0;
    }
  }

  &.remove-padding-bottom {
    padding-bottom: 0;

    &:has(.container section) {
      padding-bottom: 0;
    }
  }

  &.no-padding {
    padding-top: 0;
    padding-bottom: 0;

    &:has(.container section) {
      padding-top: 0;
      padding-bottom: 0;
    }
  }

  .container {
    text-align: left;

    .button {
      align-self: auto;
    }

    .subtitle {
      margin: 0;
    }

    .content-align-left & {
      align-items: flex-start;
    }

    .content-align-right & {
      align-items: flex-end;
    }

    .content-align-center & {
      align-items: center;
    }

    section,
    div {
      text-align: left;
    }

    section {
      margin-bottom: 2rem;
    }

    a {
      text-decoration: underline;
      font-weight: 600;

      &:hover,
      &:focus {
        text-decoration: none;
      }

      p {
        font-weight: 600;
      }
    }

    ul,
    ol {
      padding-left: 1.5rem;

      li {
        list-style: initial;
        padding-left: 0.5rem;
        margin: 1rem 0;
        line-height: 1.5;
      }
    }

    ol {
      li {
        list-style: decimal;
      }
    }
  }

  .main-content {
    .content-align-center & {
      display: flex;
      flex-direction: column;
      align-items: center;
    }
  }
}

.layout-two-column {
  padding: 3rem 1rem;

  .title-container {
    margin-bottom: 1rem;
  }

  &.remove-padding-top {
    padding-top: 0;
  }

  &.remove-padding-bottom {
    padding-bottom: 0;
  }

  &.no-padding {
    padding-top: 0;
    padding-bottom: 0;
  }

  .subtitle {
    margin: 0;
  }

  .grid {
    gap: 1.5rem;
  }

  img {
    border-radius: 0.75rem;
    aspect-ratio: 16 / 9;
    width: 100%;
    object-fit: cover;
  }

  .left {
    display: flex;
    flex-direction: column;
    justify-content: center;

    &.align-content-center {
      justify-content: center;
    }

    &.align-content-top {
      justify-content: flex-start;
    }

    &.align-content-bottom {
      justify-content: flex-end;
    }
  }

  .right {
    display: flex;
    flex-direction: column;
    justify-content: center;

    &.align-content-center {
      justify-content: center;
    }

    &.align-content-top {
      justify-content: flex-start;
    }

    &.align-content-bottom {
      justify-content: flex-end;
    }
  }

  ul,
  ol {
    padding-left: 1.5rem;

    li {
      list-style: initial;
      padding-left: 0.5rem;
      margin: 1rem 0;
      line-height: 1.5;
    }
  }

  ol {
    li {
      list-style: decimal;
    }
  }
}

.layout-three-column {
  width: 100%;
  padding: 3rem 1rem;

  &.remove-padding-top {
    padding-top: 0;
  }

  &.remove-padding-bottom {
    padding-bottom: 0;
  }

  &.no-padding {
    padding: 0;
  }

  .subtitle {
    margin: 0;
  }

  ul,
  ol {
    padding-left: 1.5rem;

    li {
      list-style: initial;
      padding-left: 0.5rem;
      margin: 1rem 0;
      line-height: 1.5;
    }
  }

  ol {
    li {
      list-style: decimal;
    }
  }

  .grid {
    padding: 0;
    gap: 2rem;

    .col-md-4 {
      display: flex;
      flex-direction: column;

      &.align-content-center {
        justify-content: center;
      }

      &.align-content-top {
        justify-content: flex-start;
      }

      &.align-content-bottom {
        justify-content: flex-end;
      }
    }
  }

  .category-cta {
    margin: 0 0 1.5rem;

    &:last-child {
      margin: 0;
    }
  }
}

.layout-list {
  padding: 2rem 1rem;

  .title-container {
    margin-bottom: 1rem;
  }

  &.remove-padding-top {
    padding-top: 0;
  }

  &.remove-padding-bottom {
    padding-bottom: 0;
  }

  &.no-padding {
    padding-top: 0;
    padding-bottom: 0;
  }

  .align-content-center & {
    justify-content: center;
  }

  .align-content-top & {
    justify-content: flex-start;
  }

  .align-content-bottom & {
    justify-content: flex-end;
  }

  .grid {
    gap: 1.5rem;
  }
}

@media (min-width: 768px) {
  .layout-one-column {
    .card {
      max-width: 674px;
    }
  }
}

@media (min-width: 1200px) {
  body {
    padding-top: 6.125rem;

    &.active {
      overflow-y: scroll;
    }
  }

  .container {
    padding: 0 3rem;

    &.news {
      margin-bottom: 0;
    }
  }

  main {
    max-width: 2600px;
    margin: 0 auto;

    &:before {
      content: "";
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0);
      opacity: 0;
      transition: all ease 0.3s;
      position: fixed;
      display: none;
      top: 0;
      left: 0;
      z-index: 20;
    }

    &.active {
      &:before {
        opacity: 0.4;
        display: block;
      }
    }
  }

  .layout-one-column,
  .layout-two-column,
  .layout-three-column {
    padding: 6rem 0;

    &.remove-padding-top {
      padding-top: 0;
    }

    &.remove-padding-bottom {
      padding-bottom: 0;
    }

    &.no-padding {
      padding: 0;
    }

    .title-container {
      margin-bottom: 0rem;
    }

    .container {
      padding: 0 3rem;

      .container {
        padding: 0;
      }

      section {
        margin-bottom: 3rem;

        &:last-child {
          margin-bottom: 0;
        }
      }
    }

    .category-cta {
      margin: 0;
      align-self: unset;
    }

    .grid {
      gap: 3rem;
    }
  }

  .layout-list {
    padding: 6rem 0;

    &.remove-padding-top {
      padding-top: 0;
    }

    &.remove-padding-bottom {
      padding-bottom: 0;
    }

    &.no-padding {
      padding: 0;
    }

    .subtitle {
      margin: 0;
    }

    &.align-content-center {
      justify-content: center;
    }

    &.align-content-top {
      justify-content: flex-start;
    }

    &.align-content-bottom {
      justify-content: flex-end;
    }

    .grid {
      gap: 3rem;
    }
  }
}

@media (min-width: 1800px) {
  .container {
    padding: 0 6rem;
  }

  .layout-one-column,
  .layout-two-column,
  .layout-three-column,
  .layout-list {
    .container {
      padding: 0 6rem;
    }
  }
}

header {
  position: fixed;
  top: 0;
  width: 100vw;
  padding: 0.5rem 0;
  transition: transform 0.3s ease-in-out;
  z-index: 101;
  background-color: var(--white);

  &.active {
    transform: translate(-0%, -150%);
  }

  &.scrolled {
    box-shadow: 0 0 1rem 0px rgba(0, 0, 0, 0.1);

    &:before {
      box-shadow: 0 0 1rem 0px rgba(0, 0, 0, 0.1);
    }
  }

  .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
  }

  .logo {
    z-index: 101;
    margin-left: 0.75rem;
    width: 10.313rem;
    padding: 0.25rem;
    margin-bottom: -0.25rem;
    display: flex;
    align-items: center;
  }

  .menu-buttons {
    display: flex;
    align-items: flex-start;
    margin-right: 0.75rem;
  }

  button,
  .button {
    background-color: transparent;
    color: var(--black);
    border: none;
    padding: 0;
    margin-right: 1rem;
    z-index: 101;

    &.log-in {
      display: flex;
      flex-direction: column-reverse;
      align-items: center;
      margin-top: 0;
      margin-bottom: 0;
      padding: 4px;
      line-height: 1;
      font-size: 0.9rem;

      &:focus-visible {
        border-radius: 4px;
      }

      img {
        height: 1.25rem;
        margin-bottom: 0.375rem;
      }

      svg {
        display: none;
      }
    }
  }

  .nav-container {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  nav {
    position: fixed;
    top: 0;
    left: 200%;
    padding: 5rem 1rem 0;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 100%;
    height: 100vh;
    transition: left 0.3s ease;

    &.active {
      left: 0;
      overflow: scroll;
    }

    button {
      background-color: transparent;
      color: var(--black);
      border: none;
      padding: 0;
      margin-right: 1rem;
      z-index: 101;

      svg {
        display: none;
      }

      .open {
        display: block;
        transform: rotate(-90deg);
        fill: var(--black);
        height: unset;
      }

      .close {
        display: none;
      }

      &.closeMenu {
        z-index: unset;
        margin: 1rem 0.25rem;
        padding: 0.25rem;

        &:before {
          content: "";
          display: block;
          background-image: url(/images/arrowLeftBlackSmall.svg);
          width: 0.75rem;
          height: 0.75rem;
          background-size: contain;
          background-position: center;
          background-repeat: no-repeat;
          transform: rotate(180deg);
          margin-right: 0.5rem;
        }

        &:focus-visible {
          border-radius: 4px;
        }
      }
    }

    p {
      margin-top: 0;
    }

    .level-one {
      overflow-y: scroll;
      padding-bottom: 1rem;

      .level-two {
        position: fixed;
        top: 5rem;
        left: -200%;
        padding: 0 1rem 8rem;
        background-color: #fff;
        display: flex;
        flex-direction: column;
        width: 100%;
        height: 100vh;
        transition: all 0.3s ease;
        overflow-y: scroll;
        z-index: 1000;

        &.active {
          left: 0;
        }

        li {
          padding: 0;
          border-bottom: 2px solid rgba(10, 2, 3, 0.1);

          &:last-child {
            border-bottom: none;
          }

          .submenu-button {
            line-height: 1.625rem;
            font-size: 1rem;
            font-weight: 600;
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin: 0;

            &:hover {
              cursor: default;
            }

            .chevron {
              transform: rotate(-90deg);
              height: 2rem;
            }
          }

          a {
            line-height: 1.625rem;
            font-size: 1rem;
            font-weight: 600;
            display: flex;
            justify-content: space-between;
            align-items: center;
            color: var(--black);
          }
        }

        .level-three {
          position: fixed;
          top: 5rem;
          left: -200%;
          padding: 0 1rem 16rem;
          background-color: #fff;
          display: flex;
          flex-direction: column;
          width: 100%;
          height: 100vh;
          transition: left 0.3s ease;
          overflow-y: scroll;
          z-index: 2000;

          &.active {
            left: 0;
          }

          li {
            a {
              font-size: 1rem;
              font-weight: 600;
              line-height: 1.375rem;
              color: var(--black);
              display: flex;
              flex-direction: column;
              justify-content: center;
              align-items: flex-start;

              &:after {
                display: none;
              }
            }

            p {
              font-size: 0.875rem;
              line-height: 1.375rem;
              color: rgba(80, 90, 95, 1);
              margin-bottom: 0;
              margin-top: 0.25rem;
            }

            &.promo {
              display: block;

              .img-wrapper {
                grid-column: span 4;
                border-radius: 0.75rem;
                overflow: hidden;
                aspect-ratio: 1.59 / 1;
                width: 100%;
              }

              img {
                object-fit: cover;
                width: 100%;
                height: 100%;
              }

              h4 {
                font-size: 1rem;
                font-weight: 600;
                line-height: 1.375rem;
                margin-top: 0.5rem;
              }

              .button {
                display: none;
              }

              .square {
                position: relative;
                width: 100%;
                height: 207px;
                overflow: hidden;
                border-radius: 0.75rem;

                &.bg-black {
                  path {
                    fill: var(--white);
                  }
                }

                &.bg-white {
                  path {
                    fill: var(--black);
                  }
                }

                &.bg-surface-grey {
                  path {
                    fill: var(--black);
                  }
                }

                &.bg-bolton-dark-green {
                  path {
                    fill: var(--wigan-yellow);
                  }
                }

                &.bg-bury-orange {
                  path {
                    fill: var(--rochdale-blue);
                  }
                }

                &.bg-manchester-purple {
                  path {
                    fill: var(--salford-blue);
                  }
                }

                &.bg-oldham-pink {
                  path {
                    fill: var(--bolton-green);
                  }
                }

                &.bg-rochdale-blue {
                  path {
                    fill: var(--thameside-stone);
                  }
                }

                &.bg-salford-royal-blue {
                  path {
                    fill: var(--manchester-purple);
                  }
                }

                &.bg-stockport-red {
                  path {
                    fill: var(--bury-orange);
                  }
                }

                &.bg-thameside-stone {
                  path {
                    fill: var(--oldham-pink);
                  }
                }

                &.bg-trafford-green {
                  path {
                    fill: var(--bolton-green);
                  }
                }

                &.bg-wigan-yellow {
                  path {
                    fill: var(--trafford-green);
                  }
                }
              }

              .shape {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                display: block;
              }
            }
          }
        }
      }

      li {
        border-bottom: 2px solid rgba(10, 2, 3, 0.1);

        &:last-child {
          border-bottom: none;
        }

        .submenu-button {
          line-height: 1.625rem;
          font-size: 1rem;
          font-weight: 600;
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin: 0;
          width: 100%;
          padding: 1rem 0.5rem;

          &:hover {
            cursor: default;
          }

          &:focus-visible {
            outline: 2px solid yellow;
            outline-offset: -4px;
            box-shadow: 0 0 0px 4px blue inset;
            border-radius: 4px;
          }
        }

        a {
          line-height: 1.625rem;
          font-size: 1rem;
          font-weight: 600;
          display: flex;
          justify-content: space-between;
          align-items: center;
          color: var(--black);
          width: 100%;
          padding: 1rem 0.5rem;

          &:focus-visible {
            outline: 2px solid yellow;
            outline-offset: -4px;
            box-shadow: 0 0 0px 4px blue inset;
            border-radius: 4px;
          }
        }
      }
    }

    .mobile-menu-button {
      font-optical-sizing: auto;
      font-weight: 500;
      font-style: normal;
      display: inline-flex;
      justify-content: center;
      align-items: center;
      border: 0.25rem solid var(--black);
      color: #ffffff;
      background-color: var(--black);
      padding: 0.75rem 2.25rem 0.75rem 1.25rem;
      border-radius: 2rem;
      font-size: 1rem;
      line-height: 1.6;
      letter-spacing: 2%;
      transition: all ease 0.3s;
      text-decoration: none;
      margin: 1rem 0 2rem;
      text-align: center;
      width: 100%;
      z-index: unset;

      svg {
        position: unset;
        margin-right: 0.5rem;

        path {
          fill: var(--white);
          transition: fill 0.3s ease-in-out;
        }
      }

      &:hover {
        svg {
          path {
            fill: var(--black);
          }
        }
      }
    }
  }

  .animatedArrowSVG {
    display: none;
  }

  .hamburger {
    display: flex;
    flex-direction: column; /* icon on top, text below */
    align-items: center;
    justify-content: center;
    gap: 0.375rem; /* space between bars and text */
    padding: 0.25rem;
    cursor: pointer;
    border: none;
    background: none;
    color: var(--black);
    margin: 0;
    align-self: center;

    &:focus-visible {
      border-radius: 4px;
    }
  }

  .bars {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 1.25rem;
  }

  .bar {
    width: 1.5rem;
    height: 0.188rem;
    background-color: black;
    transition: transform 0.3s, opacity 0.3s;
  }

  .open .bar:nth-child(1) {
    transform: translateY(8.5px) rotate(45deg);
  }

  .open .bar:nth-child(2) {
    opacity: 0;
  }

  .open .bar:nth-child(3) {
    transform: translateY(-8.5px) rotate(-45deg);
  }

  .menu-text,
  .closed-text {
    font-size: 0.9rem;
    text-align: center;
    transition: opacity 0.3s ease-in-out;
    line-height: 1;
  }

  .open .menu-text {
    opacity: 0;
  }

  .open .closed-text {
    opacity: 1;
  }

  .closed-text {
    opacity: 0;
  }
}

#skiptocontent a {
  position: fixed;
  top: 0;
  width: 100%;
  padding: 1rem;
  background-color: var(--wigan-yellow);
  z-index: 300;
  outline-offset: -1px;
  outline: 2px solid var(--black);
  transform: translateY(-100%);
  opacity: 0;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

#skiptocontent a:focus {
  transform: translateY(0);
  opacity: 1;
}

.announcement-banner {
  width: 100vw;

  .announcement-banner-items {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 1rem;

    p {
      margin: 0.5rem 0;
    }

    a {
      margin: 0.5rem 0;
      font-weight: 600;
      text-decoration: none;

      &:hover,
      &:focus {
        text-decoration: underline;
        text-decoration-thickness: 0.125rem;
        text-underline-offset: 0.375rem;
      }
    }
  }
}

@media (min-width: 1200px) {
  header {
    padding: 0;

    .logo {
      margin-left: 0;
      padding: 0;
    }

    .nav-container {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      position: relative;
      width: 100%;
    }

    .menu-buttons {
      margin-left: auto;
      margin-bottom: 0;
    }

    .button {
      &.log-in {
        font-weight: 500;
        font-style: normal;
        display: inline-flex;
        border: 0.125rem solid var(--black);
        color: #ffffff;
        background-color: var(--black);
        padding: 0.5rem 0.5rem 0.5rem 1.25rem;
        border-radius: 2rem;
        font-size: 1rem;
        line-height: 1.6;
        letter-spacing: 2%;
        transition: all ease 0.3s;
        text-decoration: none;
        position: relative;
        flex-direction: unset;

        img {
          display: none;
        }

        svg {
          display: block;
        }

        &:hover,
        &:focus {
          cursor: pointer;
          color: var(--black);
          background-color: #ffffff;
          text-decoration: none;

          svg {
            .shaft,
            .point {
              stroke: var(--black);
            }
          }
        }

        &:focus-visible {
          border-radius: 4rem;
        }
      }

      &.menuToggle {
        display: none;
      }
    }

    nav {
      position: unset;
      top: unset;
      left: unset;
      padding: 0;
      flex-direction: row;
      background-color: unset;
      width: auto;
      height: unset;
      z-index: 200;

      button {
        background-color: transparent;
        color: var(--black);
        border: none;
        padding: 0;
        margin-right: 1rem;
        z-index: 101;

        svg {
          display: none;
        }

        .close {
          position: absolute;
          right: 0.75rem;
          transition: all ease 0.3s;
          display: block;
          height: unset;
        }

        .open {
          transform: rotate(0deg);
          position: absolute;
          right: 0.75rem;
          transition: all ease 0.3s;
          margin-bottom: 0;
        }

        &[aria-expanded="true"] {
          color: var(--brand-green-four);

          .close {
            transform: rotate(180deg) translateY(-2px);
            fill: var(--brand-blue-five);
          }
          .open {
            transform: translateY(-2px);
            fill: var(--brand-blue-five);
          }
        }

        &.closeMenu {
          z-index: unset;
          margin-left: 0.5rem;

          &:before {
            display: none;
          }
        }
      }

      p {
        margin-top: 0;
      }

      .animatedArrowSVG {
        display: block;
        margin-left: 0.5rem;
        transition: all ease 0.3s;
        height: 1rem;
        min-width: 1rem;
        margin-top: 0.125rem;

        .shaft,
        .point {
          fill: none;
          stroke-linejoin: round;
          stroke-width: 2px;
          transition: all ease 0.3s;
          stroke: #000;
        }
      }

      .level-one {
        display: flex;
        flex-direction: row;
        margin-left: 3rem;
        padding-bottom: 0;
        overflow-y: unset;

        .level-one-item {
          padding: 0;
          border-bottom: none;

          &:first-child {
            border-left: none;
          }

          &:last-child {
            a {
              border-right: none;
            }
          }

          .submenu-button {
            line-height: 1;
            font-size: 1.125rem;
            font-weight: 600;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 2.5rem 1.25rem;

            &:hover,
            &:focus {
              background-color: transparent;
              cursor: pointer;
            }

            &:after {
              display: none;
            }

            &:has(.open) {
              padding: 2.5rem 2.5rem 2.5rem 1.5rem;
            }

            &:hover,
            &:focus {
              cursor: pointer;
              text-decoration: underline;
              text-decoration-thickness: 0.188rem;
              text-underline-offset: 0.5rem;
              text-decoration-color: var(--thameside-stone);
            }
          }

          a {
            line-height: 1rem;
            font-size: 1.125rem;
            font-weight: 600;
            display: flex;
            justify-content: flex-start;
            align-items: center;
            color: var(--black);
            padding: 2.5rem 1.25rem;

            &:after {
              display: none;
            }

            &:hover,
            &:focus {
              cursor: pointer;
              text-decoration: underline;
              text-decoration-thickness: 0.188rem;
              text-underline-offset: 0.5rem;
              text-decoration-color: var(--thameside-stone);
            }
          }

          &:first-child {
            .submenu-button {
              &:hover,
              &:focus {
                text-decoration-color: var(--bury-orange);
              }

              &[aria-expanded="true"] {
                text-decoration: underline;
                text-decoration-thickness: 0.188rem;
                text-underline-offset: 0.5rem;
                text-decoration-color: var(--bury-orange);
                .close {
                  fill: var(--bury-orange);
                }

                .open {
                  fill: var(--bury-orange);
                }
              }
            }
          }

          &:nth-child(2) {
            a {
              &:hover,
              &:focus {
                text-decoration-color: var(--stockport-red);
              }
            }
          }

          &:nth-child(3) {
            a {
              &:hover,
              &:focus {
                text-decoration-color: var(--manchester-purple);
              }
            }
          }

          &:nth-child(4) {
            .submenu-button {
              &:hover,
              &:focus {
                text-decoration-color: var(--bolton-green);
              }

              &[aria-expanded="true"] {
                text-decoration: underline;
                text-decoration-thickness: 0.188rem;
                text-underline-offset: 0.5rem;
                text-decoration-color: var(--bolton-green);
                .close {
                  fill: var(--bolton-green);
                }

                .open {
                  fill: var(--bolton-green);
                }
              }
            }
          }

          &:nth-child(5) {
            a {
              &:hover,
              &:focus {
                text-decoration-color: var(--salford-blue);
              }
            }
          }

          &:nth-child(6) {
            a {
              &:hover,
              &:focus {
                text-decoration-color: var(--wigan-yellow);
              }
            }
          }

          &:nth-child(7) {
            a {
              &:hover,
              &:focus {
                text-decoration-color: var(--bolton-green);
              }
            }
          }

          &:nth-child(8) {
            a {
              &:hover,
              &:focus {
                text-decoration-color: var(--bury-orange);
              }
            }
          }

          &:nth-child(9) {
            a {
              &:hover,
              &:focus {
                text-decoration-color: var(--rochdale-blue);
              }
            }
          }

          &:nth-child(10) {
            a {
              &:hover,
              &:focus {
                text-decoration-color: var(--oldham-pink);
              }
            }
          }
        }

        .sub-nav-container {
          position: absolute;
          top: 6.125rem;
          left: 4.5rem;
          width: calc(100% - 9.5rem);
          border-radius: 0 0 0.75rem 0.75rem;
          overflow: hidden;
          transition: all 0.3s ease-in-out;
          opacity: 0;
          transform: translateY(-16px);
          visibility: hidden;
          pointer-events: none;

          &:has(.active) {
            transform: translateY(0);
            visibility: visible;
            pointer-events: all;
            opacity: 1;
          }
        }

        .level-two {
          position: relative;
          margin: 0;
          padding: 1rem 0 0;
          display: flex;
          left: 0;
          top: 0;
          width: 100%;
          height: 31rem;
          overflow-y: unset;
          background-color: var(--surface-grey);

          .level-two-item {
            max-width: 21.5rem;
            border: none;
            width: 100%;
            transition: all 0.3s ease;
            padding: 0;

            &:hover,
            &:focus {
              background-color: var(--white);
            }

            &:has(.level-three.active) {
              background-color: var(--white);
            }

            &:has(.arrowAnimationTrigger) {
              a {
                padding: 1rem 1.5rem;
              }
            }

            a {
              &:hover,
              &:focus {
                text-decoration: underline;
                text-decoration-color: rgba(0, 0, 0, 0.5);
                text-decoration-thickness: 0.188rem;
                text-underline-offset: 0.375rem;
              }
            }

            .submenu-button {
              text-wrap: initial;
              width: 100%;
              padding: 1rem 1.5rem;

              &:hover,
              &:focus {
                background-color: transparent;
                cursor: pointer;
                text-decoration: none;
              }

              &[aria-expanded="true"] {
                text-decoration: none;
              }
            }
          }

          .level-three {
            margin-left: 0;
            position: absolute;
            top: 0;
            left: 21.5rem;
            padding: 1.5rem;
            height: 100%;
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            grid-template-rows: repeat(4, 1fr);
            grid-column-gap: 1.5rem;
            grid-row-gap: 1.5rem;
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.2s ease-in-out, visibility 0s linear 0.2s;
            margin: 0;
            width: calc(100% - 21.5rem);
            overflow-y: unset;
            z-index: 0;

            &.active {
              left: 21.5rem;
              visibility: visible;
              opacity: 1;
              transition-delay: 0s;
              z-index: 1;
            }

            li {
              border-radius: 0.5rem;
              padding: 0;
              transition: all 0.3s ease;
              max-width: none;
              border-bottom: none;
              background-color: var(--white);

              &:nth-child(1) {
                grid-column: 1;
                grid-row: 1;
              }

              &:nth-child(2) {
                grid-column: 2;
                grid-row: 1;
              }

              &:nth-child(3) {
                grid-column: 1;
                grid-row: 2;
              }

              &:nth-child(4) {
                grid-column: 2;
                grid-row: 2;
              }

              &:nth-child(5) {
                grid-column: 1;
                grid-row: 3;
              }

              &:nth-child(6) {
                grid-column: 2;
                grid-row: 3;
              }

              &:nth-child(7) {
                grid-column: 1;
                grid-row: 4;
              }

              &:nth-child(8) {
                grid-column: 2;
                grid-row: 4;
              }

              &:hover {
                cursor: pointer;
                background-color: #e9efec;

                a {
                  text-decoration: none;

                  span {
                    text-decoration: underline;
                    text-decoration-color: rgba(0, 0, 0, 0.5);
                    text-decoration-thickness: 0.188rem;
                    text-underline-offset: 0.375rem;
                  }

                  p {
                    text-decoration: none;
                  }
                }
              }

              &.promo {
                grid-column: 3 / 4;
                grid-row: 1 / 5;

                &:hover {
                  box-shadow: none;
                  cursor: unset;
                  background-color: var(--white);
                }

                a {
                  padding-top: 0;
                  padding-bottom: 0;

                  img {
                    transition: all ease 0.3s;
                  }
                  
                  &:hover {
                    img {
                      transform: scale(1.05);
                    }
                  }
                }

                h4 {
                  font-size: 1.563rem;
                  line-height: 1.719rem;
                  margin-top: 2rem;
                  margin-bottom: 0;
                }

                .button {
                  display: flex;
                  flex-direction: row;
                  align-items: center;
                  margin-top: 1rem;
                  height: auto;
                  width: auto;
                  align-self: flex-start;
                  justify-content: flex-start;

                  &[target="_blank"] {
                    svg {
                      margin: 0 0 0.25rem 0.25rem;
                      height: 1rem;
                      width: 1.25rem;
                    }
                  }

                  svg {
                    position: unset;
                    margin-left: 0.5rem;
                  }

                  &:hover,
                  &:focus {
                    text-decoration: underline;
                    text-decoration-color: var(--black);
                    text-decoration-thickness: 2px;
                  }
                }

                .square {
                  transition: all 0.3s ease-in-out;

                  &:hover {
                    transform: scale(1.015);
                    box-shadow: 0 0 0.25rem 0 rgba(0, 0, 0, 0.4);

                    .shape {
                      transform-origin: bottom;
                      transform: rotate(5deg);
                      scale: 1.1;
                    }
                  }
                }

                .shape {
                  transition: all 0.3s ease-in-out;
                }
              }

              a {
                height: 100%;
                width: 100%;
                display: flex;
                justify-content: center;
                align-items: flex-start;
                flex-direction: column;
                padding: 0 1rem;
                font-size: 0.875rem;
                font-weight: 600;
                line-height: 1.375rem;
                color: var(--black);
                border: none;

                &:after {
                  display: none;
                }
              }

              p {
                font-size: 0.875rem;
                line-height: 1.406rem;
                color: rgba(80, 90, 95, 1);
                margin-bottom: 0;
                margin-top: 0.5rem;
              }
            }
          }
        }
      }
    }

    .hamburger {
      display: none;
    }

    nav {
      .utility-nav {
        display: none;
      }

      .mobile-menu-button {
        display: none;
      }
    }
  }
}

@media (min-width: 1440px) {
  header {
    .logo {
      margin-left: 0;
    }

    .menu-buttons {
      margin-right: 0;

      .log-in {
        margin: 0;
        padding: 0.5rem 1.25rem 0.5rem 2rem;
      }
    }

    nav {
      .level-one {
        li {
          .submenu-button,
          a {
            font-size: 1.125rem;
            line-height: 1;
          }
        }

        .level-two {
          .level-three {
            li {
              a {
                font-size: 1rem;
                line-height: 1;
              }

              p {
                font-size: 0.875rem;
                line-height: 1.75;
              }
            }
          }
        }
      }
    }
  }

  .announcement-banner {
    .announcement-banner-items {
      p,
      a {
        font-size: 1.125rem;
      }
    }
  }
}

#ot-sdk-btn-floating.ot-floating-button button {
  margin: 0 auto;
  display: flex !important;
  justify-content: center !important;
}

#ot-sdk-btn-floating.ot-floating-button button > * {
  margin: 0;
}
nav.breadcrumb {
  margin: 1rem 0;
  position: absolute;
  z-index: 10;

  ol {
    display: flex;
    background-color: white;
    padding: 0.5rem 0.5rem 0.5rem 1rem;
    border-radius: 0.75rem;
    margin-left: 1rem;

    &.no-padding {
      padding-left: 0;
    }

    li {
      display: none;
      margin-right: 0.5rem;
      line-height: 1;

      &:nth-last-child(2) {
        display: flex;

        &:before {
          content: "Back to ";
          display: block;
          margin-right: 0.25rem;
        }
        
        a {
          padding-left: 4rem;
          margin-left: -4rem;
        }
      }
    }
  }
}

@media (min-width: 768px) {
  nav.breadcrumb {
    ol {
      li {
        display: initial;
        font-size: 1rem;

        a {
          font-size: 1rem;
        }

        &:hover {
          cursor: default;
        }

        &:nth-last-child(2) {
          display: block;

          &:before {
            display: none;
          }

          a {
            padding-left: 0;
            margin-left: 0;
            font-size: 1rem;
          }
        }

        &:last-child {
          span {
            font-weight: 700;
          }
        }

        &:has(a) {
          font-size: 1rem;

          &:hover {
            text-decoration: underline;
            cursor: pointer;
          }
        }

        &.crumb::after,
        &.home::after {
          content: "";
          display: inline-block;
          width: 9px;
          height: 12px;
          background-image: url("data:image/svg+xml,%3Csvg%20width%3D%229%22%20height%3D%2214%22%20viewBox%3D%220%200%209%2014%22%20fill%3D%22none%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cpath%20d%3D%22M0.999999%201L7%207L1%2013%22%20stroke%3D%22%230A0203%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22/%3E%3C/svg%3E");
          background-size: contain;
          background-repeat: no-repeat;
          margin: 0 0 0 0.75rem;
        }

        &:last-child {
          &::after {
            display: none;
          }
        }
      }
    }
  }
}

@media (min-width: 1200px) {
  nav.breadcrumb {
    margin: 1.5rem 0;

    ol {
      margin-left: 0;
    }  
  }
}
.select-box {
  position: relative;
  width: 100%;
  margin: 1rem 0;
  z-index: 10;

  .button {
    width: 100%;
    padding: 0.5rem 1rem;
    background-color: var(--white);
    border: 1px solid var(--black);
    border-radius: 6px;
    cursor: pointer;
    color: var(--black);
    margin: 0;
    text-align: left;
    min-width: 260px;

    span {
      width: 100%;
      display: flex;
      justify-content: space-between;

      img {
        transition: all 0.3s ease;
      }
    }

    &[aria-expanded="true"] {
      span {
        img {
          transform: rotate(-180deg);
        }
      }
    }
  }

  .list {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    margin: 0;
    padding: 0.5rem;
    list-style: none;
    background-color: #fff;
    border: 1px solid var(--black);
    border-top: none;
    overflow-y: auto;
    display: none;
    max-height: 13.75rem;
    overflow-y: scroll;
    transition: none !important;
    min-width: 260px;

    &.visible {
      display: block;
    }

    &.above {
      bottom: calc(100% - 5px);
      top: auto;
      border-bottom: none;
      border-radius: 6px 6px 0 0;
      border-top: 1px solid black;
    }

    &.below {
      top: calc(100% - 5px);
      bottom: auto;
      border-radius: 0 0 6px 6px;
    }
  }

  .option {
    padding: 0.5rem;
    cursor: pointer;
    border: 0.125rem solid #fff;
    border-radius: 6px;

    &:focus,
    &:hover {
      outline: none;
      background-color: #e6f7ff;
      border: 0.125rem solid var(--black);
    }

    &[aria-selected="true"] {
      background-color: #bae7ff;
    }
  }

  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    clip: rect(0, 0, 0, 0);
    overflow: hidden;
    border: 0;
  }
}

@media screen and (min-width: 768px) {
  .select-box {
    width:auto;
    max-width: 300px;
  }
}


.content-banner {
  background-repeat: no-repeat;
  position: relative;
  overflow: hidden;

  img {
    width: 100%;
    object-fit: cover;
    min-height: 330px;
    max-height: 440px;
    position: relative;
    z-index: 2;
  }

  h1 {
    margin-top: 0;
  }

  .container {
    display: flex;
    flex-direction: column;
    position: relative;
  }

  .curve-bottom-element,
  .curve-top-element {
    display: none;
    will-change: transform;
    backface-visibility: hidden;
  }

  &.curve-bottom {
    .curve-bottom-element {
      display: block;
      position: absolute;
      bottom: -1px;
      width: 100vw;
      transform: scale(1.1);
      z-index: 5;
    }
  }

  &.curve-top {
    .curve-top-element {
      display: block;
      position: absolute;
      top: -1px;
      width: 100vw;
      transform: scale(1.1);
      z-index: 5;
    }

    &.curve-bottom-element {
      display: block;
      position: absolute;
      bottom: -1px;
      width: 100vw;
      transform: scale(1.1);
      z-index: 5;
    }
  }

  &.inner-shape-small,
  &.inner-shape-large,
  &.inner-shape-medium {
    .img-wrapper {
      display: none;
    }
  }

  &.inner-shape-small {
    .shape-one {
      display: block;
      position: absolute;
      top: -115px;
      right: -100px;
      height: auto;
      width: 100%;
      z-index: 3;

      .bg-black & {
        path {
          fill: var(--white);
        }
      }

      .bg-white & {
        path {
          fill: var(--surface-grey);
        }
      }

      .bg-surface-grey & {
        path {
          fill: var(--white);
        }
      }

      .bg-bolton-dark-green & {
        path {
          fill: var(--stockport-red);
        }
      }

      .bg-bury-orange & {
        path {
          fill: var(--manchester-purple);
        }
      }

      .bg-manchester-purple & {
        path {
          fill: var(--bury-orange);
        }
      }

      .bg-oldham-pink & {
        path {
          fill: var(--trafford-green);
        }
      }

      .bg-rochdale-blue & {
        path {
          fill: var(--bolton-green);
        }
      }

      .bg-salford-royal-blue & {
        path {
          fill: var(--oldham-pink);
        }
      }

      .bg-stockport-red & {
        path {
          fill: var(--thameside-stone);
        }
      }

      .bg-thameside-stone & {
        path {
          fill: var(--salford-blue);
        }
      }

      .bg-trafford-green & {
        path {
          fill: var(--wigan-yellow);
        }
      }

      .bg-wigan-yellow & {
        path {
          fill: var(--rochdale-blue);
        }
      }
    }

    .shape-two {
      display: block;
      position: absolute;
      bottom: -40px;
      right: -160px;
      z-index: 2;
      width: 100%;
      height: 100%;

      .bg-black & {
        path {
          fill: var(--surface-grey);
        }
      }

      .bg-white & {
        path {
          fill: var(--black);
        }
      }

      .bg-surface-grey & {
        path {
          fill: var(--black);
        }
      }

      .bg-bolton-dark-green & {
        path {
          fill: var(--wigan-yellow);
        }
      }

      .bg-bury-orange & {
        path {
          fill: var(--rochdale-blue);
        }
      }

      .bg-manchester-purple & {
        path {
          fill: var(--salford-blue);
        }
      }

      .bg-oldham-pink & {
        path {
          fill: var(--bolton-green);
        }
      }

      .bg-rochdale-blue & {
        path {
          fill: var(--thameside-stone);
        }
      }

      .bg-salford-royal-blue & {
        path {
          fill: var(--manchester-purple);
        }
      }

      .bg-stockport-red & {
        path {
          fill: var(--bury-orange);
        }
      }

      .bg-thameside-stone & {
        path {
          fill: var(--oldham-pink);
        }
      }

      .bg-trafford-green & {
        path {
          fill: var(--bolton-green);
        }
      }

      .bg-wigan-yellow & {
        path {
          fill: var(--trafford-green);
        }
      }
    }

    .container:after {
      content: "";
      position: absolute;
      left: 100%;
      top: 0;
      right: 0;
      height: 100%;
      width: 50%;
      background-color: var(--rochdale-blue);
    }

    &.image-left {
      .container:after {
        right: 100%;
        left: -50%;
      }
    }

    &.bg-black {
      .container:after {
        background-color: var(--white);
      }
    }

    &.bg-white {
      .container:after {
        background-color: var(--black);
      }
    }

    &.bg-surface-grey {
      .container:after {
        background-color: var(--black);
      }
    }

    &.bg-bolton-dark-green {
      .container:after {
        background-color: var(--wigan-yellow);
      }
    }

    &.bg-bury-orange {
      .container:after {
        background-color: var(--rochdale-blue);
      }
    }

    &.bg-manchester-purple {
      .container:after {
        background-color: var(--salford-blue);
      }
    }

    &.bg-oldham-pink {
      .container:after {
        background-color: var(--bolton-green);
      }
    }

    &.bg-rochdale-blue {
      .container:after {
        background-color: var(--thameside-stone);
      }
    }

    &.bg-salford-royal-blue {
      .container:after {
        background-color: var(--manchester-purple);
      }
    }

    &.bg-stockport-red {
      .container:after {
        background-color: var(--bury-orange);
      }
    }

    &.bg-thameside-stone {
      .container:after {
        background-color: var(--oldham-pink);
      }
    }

    &.bg-trafford-green {
      .container:after {
        background-color: var(--bolton-green);
      }
    }

    &.bg-wigan-yellow {
      .container:after {
        background-color: var(--trafford-green);
      }
    }
  }

  &.inner-shape-medium {
    .shape-one {
      display: block;
      position: absolute;
      bottom: -240px;
      right: -25%;
      z-index: 2;

      .content-width-wide & {
        right: -40%;
      }

      .bg-black & {
        path {
          fill: var(--surface-grey);
        }
      }

      .bg-white & {
        path {
          fill: var(--surface-grey);
        }
      }

      .bg-surface-grey & {
        path {
          fill: var(--black);
        }
      }

      .bg-bolton-dark-green & {
        path {
          fill: var(--wigan-yellow);
        }
      }

      .bg-bury-orange & {
        path {
          fill: var(--rochdale-blue);
        }
      }

      .bg-manchester-purple & {
        path {
          fill: var(--salford-blue);
        }
      }

      .bg-oldham-pink & {
        path {
          fill: var(--bolton-green);
        }
      }

      .bg-rochdale-blue & {
        path {
          fill: var(--thameside-stone);
        }
      }

      .bg-salford-royal-blue & {
        path {
          fill: var(--manchester-purple);
        }
      }

      .bg-stockport-red & {
        path {
          fill: var(--bury-orange);
        }
      }

      .bg-thameside-stone & {
        path {
          fill: var(--oldham-pink);
        }
      }

      .bg-trafford-green & {
        path {
          fill: var(--bolton-green);
        }
      }

      .bg-wigan-yellow & {
        path {
          fill: var(--trafford-green);
        }
      }
    }

    .shape-two {
      display: block;
      position: absolute;
      top: -300px;
      right: -40%;
      height: auto;
      width: 100%;

      .bg-black & {
        path {
          fill: var(--white);
        }
      }

      .bg-white & {
        path {
          fill: var(--black);
        }
      }

      .bg-surface-grey & {
        path {
          fill: var(--white);
        }
      }

      .bg-bolton-dark-green & {
        path {
          fill: var(--stockport-red);
        }
      }

      .bg-bury-orange & {
        path {
          fill: var(--manchester-purple);
        }
      }

      .bg-manchester-purple & {
        path {
          fill: var(--bury-orange);
        }
      }

      .bg-oldham-pink & {
        path {
          fill: var(--trafford-green);
        }
      }

      .bg-rochdale-blue & {
        path {
          fill: var(--bolton-green);
        }
      }

      .bg-salford-royal-blue & {
        path {
          fill: var(--oldham-pink);
        }
      }

      .bg-stockport-red & {
        path {
          fill: var(--thameside-stone);
        }
      }

      .bg-thameside-stone & {
        path {
          fill: var(--salford-blue);
        }
      }

      .bg-trafford-green & {
        path {
          fill: var(--wigan-yellow);
        }
      }

      .bg-wigan-yellow & {
        path {
          fill: var(--rochdale-blue);
        }
      }
    }

    .container:after {
      content: "";
      position: absolute;
      left: 100%;
      top: 0;
      right: 0;
      height: 100%;
      width: 50%;
      background-color: var(--rochdale-blue);
    }

    &.image-left {
      .container:after {
        right: 100%;
        left: -50%;
      }
    }

    &.bg-black {
      .container:after {
        background-color: var(--white);
      }
    }

    &.bg-white {
      .container:after {
        background-color: var(--black);
      }
    }

    &.bg-surface-grey {
      .container:after {
        background-color: var(--black);
      }
    }

    &.bg-bolton-dark-green {
      .container:after {
        background-color: var(--stockport-red);
      }
    }

    &.bg-bury-orange {
      .container:after {
        background-color: var(--manchester-purple);
      }
    }

    &.bg-manchester-purple {
      .container:after {
        background-color: var(--bury-orange);
      }
    }

    &.bg-oldham-pink {
      .container:after {
        background-color: var(--trafford-green);
      }
    }

    &.bg-rochdale-blue {
      .container:after {
        background-color: var(--bolton-green);
      }
    }

    &.bg-salford-royal-blue {
      .container:after {
        background-color: var(--oldham-pink);
      }
    }

    &.bg-stockport-red {
      .container:after {
        background-color: var(--thameside-stone);
      }
    }

    &.bg-thameside-stone {
      .container:after {
        background-color: var(--salford-blue);
      }
    }

    &.bg-trafford-green {
      .container:after {
        background-color: var(--wigan-yellow);
      }
    }

    &.bg-wigan-yellow {
      .container:after {
        background-color: var(--rochdale-blue);
      }
    }
  }

  &.inner-shape-large {
    .shape-one {
      display: block;
      position: absolute;
      bottom: -85px;
      right: -12.5%;
      z-index: 2;
      max-width: 520px;

      .bg-black & {
        path {
          fill: var(--surface-grey);
        }
      }

      .bg-white & {
        path {
          fill: var(--black);
        }
      }

      .bg-surface-grey & {
        path {
          fill: var(--black);
        }
      }

      .bg-bolton-dark-green & {
        path {
          fill: var(--wigan-yellow);
        }
      }

      .bg-bury-orange & {
        path {
          fill: var(--rochdale-blue);
        }
      }

      .bg-manchester-purple & {
        path {
          fill: var(--salford-blue);
        }
      }

      .bg-oldham-pink & {
        path {
          fill: var(--bolton-green);
        }
      }

      .bg-rochdale-blue & {
        path {
          fill: var(--thameside-stone);
        }
      }

      .bg-salford-royal-blue & {
        path {
          fill: var(--manchester-purple);
        }
      }

      .bg-stockport-red & {
        path {
          fill: var(--bury-orange);
        }
      }

      .bg-thameside-stone & {
        path {
          fill: var(--oldham-pink);
        }
      }

      .bg-trafford-green & {
        path {
          fill: var(--bolton-green);
        }
      }

      .bg-wigan-yellow & {
        path {
          fill: var(--trafford-green);
        }
      }
    }

    .shape-two {
      display: block;
      position: absolute;
      top: -95px;
      right: -40%;
      height: auto;
      width: 126%;

      .bg-black & {
        path {
          fill: var(--white);
        }
      }

      .bg-white & {
        path {
          fill: var(--surface-grey);
        }
      }

      .bg-surface-grey & {
        path {
          fill: var(--white);
        }
      }

      .bg-bolton-dark-green & {
        path {
          fill: var(--stockport-red);
        }
      }

      .bg-bury-orange & {
        path {
          fill: var(--manchester-purple);
        }
      }

      .bg-manchester-purple & {
        path {
          fill: var(--bury-orange);
        }
      }

      .bg-oldham-pink & {
        path {
          fill: var(--trafford-green);
        }
      }

      .bg-rochdale-blue & {
        path {
          fill: var(--bolton-green);
        }
      }

      .bg-salford-royal-blue & {
        path {
          fill: var(--oldham-pink);
        }
      }

      .bg-stockport-red & {
        path {
          fill: var(--thameside-stone);
        }
      }

      .bg-thameside-stone & {
        path {
          fill: var(--salford-blue);
        }
      }

      .bg-trafford-green & {
        path {
          fill: var(--wigan-yellow);
        }
      }

      .bg-wigan-yellow & {
        path {
          fill: var(--rochdale-blue);
        }
      }
    }

    .container:after {
      content: "";
      position: absolute;
      left: 100%;
      top: 0;
      right: 0;
      height: 100%;
      width: 50%;
      background-color: var(--rochdale-blue);
    }

    &.image-left {
      .container:after {
        right: 100%;
        left: -50%;
      }
    }

    &.bg-black {
      .container:after {
        background-color: var(--white);
      }
    }

    &.bg-white {
      .container:after {
        background-color: var(--black);
      }
    }

    &.bg-surface-grey {
      .container:after {
        background-color: var(--black);
      }
    }

    &.bg-bolton-dark-green {
      .container:after {
        background-color: var(--stockport-red);
      }
    }

    &.bg-bury-orange {
      .container:after {
        background-color: var(--manchester-purple);
      }
    }

    &.bg-manchester-purple {
      .container:after {
        background-color: var(--bury-orange);
      }
    }

    &.bg-oldham-pink {
      .container:after {
        background-color: var(--trafford-green);
      }
    }

    &.bg-rochdale-blue {
      .container:after {
        background-color: var(--bolton-green);
      }
    }

    &.bg-salford-royal-blue {
      .container:after {
        background-color: var(--oldham-pink);
      }
    }

    &.bg-stockport-red {
      .container:after {
        background-color: var(--thameside-stone);
      }
    }

    &.bg-thameside-stone {
      .container:after {
        background-color: var(--salford-blue);
      }
    }

    &.bg-trafford-green {
      .container:after {
        background-color: var(--wigan-yellow);
      }
    }

    &.bg-wigan-yellow {
      .container:after {
        background-color: var(--rochdale-blue);
      }
    }
  }

  .banner-content {
    padding: 6rem 1rem;
    position: relative;
    max-width: min(100%, 510px);
    z-index: 2;
    background-color: transparent;

    .curve-bottom & {
      padding: 6rem 1rem 8rem;
    }

    .curve-top & {
      padding: 8rem 1rem 6rem;
    }

    .curve-bottom.curve-top & {
      padding: 8rem 1rem;
    }

    .has-image &,
    .has-image.curve-bottom &,
    .has-image.curve-top &,
    .has-image.curve-bottom.curve-top & {
      padding: 4rem 1rem 1rem;
    }
  }

  .img-wrapper {
    position: relative;

    .banner-accent {
      position: absolute;
      top: 95px;
      left: 0;
      transform: rotate(-90deg);
      transform-origin: left top;
      z-index: 3;

      .bg-black & {
        path {
          fill: var(--black);
        }
      }

      .bg-white & {
        path {
          fill: var(--white);
        }
      }

      .bg-surface-grey & {
        path {
          fill: var(--surface-grey);
        }
      }

      .bg-bolton-dark-green & {
        path {
          fill: var(--bolton-green);
        }
      }

      .bg-bury-orange & {
        path {
          fill: var(--bury-orange);
        }
      }

      .bg-manchester-purple & {
        path {
          fill: var(--manchester-purple);
        }
      }

      .bg-oldham-pink & {
        path {
          fill: var(--oldham-pink);
        }
      }

      .bg-rochdale-blue & {
        path {
          fill: var(--rochdale-blue);
        }
      }

      .bg-salford-royal-blue & {
        path {
          fill: var(--salford-blue);
        }
      }

      .bg-stockport-red & {
        path {
          fill: var(--stockport-red);
        }
      }

      .bg-thameside-stone & {
        path {
          fill: var(--thameside-stone);
        }
      }

      .bg-trafford-green & {
        path {
          fill: var(--trafford-green);
        }
      }

      .bg-wigan-yellow & {
        path {
          fill: var(--wigan-yellow);
        }
      }
    }
  }
}

@media (min-width: 430px) {
  .content-banner {
    &.inner-shape-large {
      .shape-one {
        bottom: -160px;
        max-width: 712px;
        right: -320px;
      }

      .shape-two {
        left: 295px;
        right: unset;
      }
    }

    &.inner-shape-small {
      .shape-one {
        right: -60%;
        top: -150px;
      }

      .shape-two {
        bottom: -90px;
        right: unset;
        left: 40%;
        height: 125%;
      }
    }

    &.inner-shape-medium {
      .shape-one {
        top: 140px;
        max-width: 1700px;
        right: unset;
        left: 40%;
      }

      .shape-two {
        top: -300px;
        max-width: 700px;
        right: unset;
        left: 75%;
      }
    }
  }
}

@media (min-width: 768px) {
  .content-banner {
    .banner-content {
      max-width: min(95%, 600px);
    }

    &.inner-shape-large {
      .shape-one {
        top: 300px;
        max-width: 1180px;
        left: 685px;

        .content-width-wide & {
          right: -730px;
        }
      }

      .shape-two {
        left: 445px;
        top: -110px;

        .content-width-wide & {
          right: -400px;
        }
      }
    }

    &.inner-shape-small {
      .shape-one {
        left: 65%;
        top: unset;
        bottom: 50%;
        max-width: 970px;
      }

      .shape-two {
        bottom: 0px;
        left: 25%;

        .content-width-wide & {
          left: 35%;
        }
      }
    }

    &.inner-shape-medium {
      .shape-one {
        left: 40%;
      }

      .shape-two {
        max-width: 890px;
        top: -315px;
        left: 80%;
      }
    }
  }
}

@media (min-width: 1200px) {
  .content-banner {
    position: relative;
    overflow: hidden;

    .container {
      .inner-shape-small &,
      .inner-shape-large & {
        position: relative;
      }
    }

    .img-wrapper {
      position: absolute;
      width: 50%;
      height: 100%;
      top: 0;

      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        max-height: unset;
      }

      .inner-shape-full-colour &,
      .inner-shape-small &,
      .inner-shape-medium &,
      .inner-shape-large & {
        display: none;
      }

      .bg-black & {
        background-color: var(--white);
      }

      .bg-white & {
        background-color: var(--black);
      }

      .bg-surface-grey & {
        background-color: var(--black);
      }

      .bg-bolton-dark-green & {
        background-color: var(--wigan-yellow);
      }

      .bg-bury-orange & {
        background-color: var(--rochdale-blue);
      }

      .bg-manchester-purple & {
        background-color: var(--salford-blue);
      }

      .bg-oldham-pink & {
        background-color: var(--bolton-green);
      }

      .bg-rochdale-blue & {
        background-color: var(--thameside-stone);
      }

      .bg-salford-royal-blue & {
        background-color: var(--manchester-purple);
      }

      .bg-stockport-red & {
        background-color: var(--bury-orange);
      }

      .bg-thameside-stone & {
        background-color: var(--oldham-pink);
      }

      .bg-trafford-green & {
        background-color: var(--bolton-green);
      }

      .bg-wigan-yellow & {
        background-color: var(--trafford-green);
      }
    }

    &.inner-shape-small {
      .shape-one {
        left: 800px;
        max-width: 100%;

        .image-left & {
          transform: scaleX(-1);
          right: 55%;
          left: unset;

          .content-width-wide & {
            right: 60%;
            left: unset;
          }
        }
      }

      .shape-two {
        bottom: 0;
        height: 150%;
        left: 220px;
        max-width: unset;

        .image-left & {
          transform: scaleX(-1);
          right: 30%;
          left: unset;

          .content-width-wide & {
            right: 35%;
            left: unset;
          }
        }

        .content-width-wide & {
          right: -180px;
        }
      }
    }

    &.inner-shape-medium {
      .shape-one {
        left: 37%;

        .content-width-wide & {
          left: 40%;
        }

        .image-left & {
          right: 43%;
          left: unset;
          transform: scaleX(-1);

          .content-width-wide & {
            right: 46%;
            left: unset;
          }
        }
      }

      .shape-two {
        left: 70%;

        .content-width-wide & {
          left: 75%;
        }

        .image-left & {
          left: -30rem;
          right: unset;
          transform: scaleX(-1);

          .content-width-wide & {
            left: -35rem;
          }
        }
      }
    }

    &.inner-shape-large {
      .shape-one {
        bottom: unset;
        top: 35%;
        left: 975px;
        z-index: 1;
        max-width: 1500px;
        width: 1500px;

        .content-width-wide & {
          right: -40%;
        }

        .image-left & {
          right: 1340px;
          left: unset;
          transform: scaleX(-1);
          bottom: -170px;
          width: 100%;

          .content-width-wide & {
            left: unset;
            right: 1300px;
          }
        }
      }

      .shape-two {
        display: block;
        position: absolute;
        top: -70px;
        left: 720px;
        height: 100%;
        width: 100%;

        .content-width-wide & {
          right: -25%;
        }

        .image-left & {
          left: unset;
          right: 620px;
          bottom: 210px;
          top: unset;
          transform: scaleX(-1);
          height: 100%;

          .content-width-wide & {
            right: 700px;
            left: unset;
          }
        }
      }
    }

    .banner-content {
      min-height: 500px;
      display: flex;
      align-items: flex-start;
      justify-content: center;
      flex-direction: column;
      max-width: max(50%, 700px);

      .content-width-wide & {
        max-width: min(65%, 1000px);
      }

      .curve-bottom & {
        padding: 6rem 1rem 10rem 0;
      }

      .curve-top & {
        padding: 10rem 1rem 6rem 0;
      }

      .curve-bottom.curve-top & {
        padding: 10rem 1rem 10rem 0;
      }

      .has-image &,
      .has-image.curve-bottom &,
      .has-image.curve-top &,
      .has-image.curve-bottom.curve-top & {
        padding: 9rem 1rem 9rem 0;
      }

      .image-right & {
        p {
          padding-right: 8rem;
        }
      }
    }

    .img-wrapper {
      .content-width-wide & {
        width: 40%;
      }

      .bg-black & {
        .banner-accent {
          path {
            fill: var(--black);
          }
        }
      }

      .bg-white & {
        .banner-accent {
          path {
            fill: var(--white);
          }
        }
      }

      .bg-surface-grey & {
        .banner-accent {
          path {
            fill: var(--surface-grey);
          }
        }
      }

      .bg-bolton-dark-green & {
        .banner-accent {
          path {
            fill: var(--bolton-green);
          }
        }
      }

      .bg-bury-orange & {
        .banner-accent {
          path {
            fill: var(--bury-orange);
          }
        }
      }

      .bg-manchester-purple & {
        .banner-accent {
          path {
            fill: var(--manchester-purple);
          }
        }
      }

      .bg-oldham-pink & {
        .banner-accent {
          path {
            fill: var(--oldham-pink);
          }
        }
      }

      .bg-rochdale-blue & {
        .banner-accent {
          path {
            fill: var(--rochdale-blue);
          }
        }
      }

      .bg-salford-royal-blue & {
        .banner-accent {
          path {
            fill: var(--salford-blue);
          }
        }
      }

      .bg-stockport-red & {
        .banner-accent {
          path {
            fill: var(--stockport-red);
          }
        }
      }

      .bg-thameside-stone & {
        .banner-accent {
          path {
            fill: var(--thameside-stone);
          }
        }
      }

      .bg-trafford-green & {
        .banner-accent {
          path {
            fill: var(--trafford-green);
          }
        }
      }

      .bg-wigan-yellow & {
        .banner-accent {
          path {
            fill: var(--wigan-yellow);
          }
        }
      }
    }

    &.image-left {
      .img-wrapper {
        left: 0;

        .banner-accent {
          position: absolute;
          top: 0;
          display: block;
          right: -1px;
          width: auto;
          height: 100%;
          z-index: 1;
          transform: unset;
          left: unset;

          .inner-shape-small &,
          .inner-shape-large & {
            display: none;
          }
        }
      }

      .banner-content {
        margin-left: 50%;

        .content-width-wide & {
          margin-left: 40%;
        }
      }
    }

    &.image-right {
      .img-wrapper {
        right: 0;

        .banner-accent {
          position: absolute;
          top: 0;
          display: block;
          left: -1px;
          transform: scaleX(-1);
          transform-origin: unset;
          width: auto;
          height: 100%;

          .inner-shape-small &,
          .inner-shape-large & {
            display: none;
          }
        }
      }

      .container {
        justify-content: flex-start;
        flex-direction: row;
      }
    }
  }
}

@media (min-width: 1440px) {
  .content-banner {
    &.inner-shape-large {
      .shape-one {
        left: 1200px;

        .content-width-wide & {
          left: 1300px;
        }
      }

      .shape-two {
        left: 640px;

        .content-width-wide & {
          left: 740px;
        }
      }
    }

    &.inner-shape-small {
      .shape-one {
        top: unset;
        left: 900px;
        bottom: 45%;

        .content-width-wide & {
          left: 1000px;
        }
      }

      .shape-two {
        .content-width-wide & {
          left: 270px;
        }
      }
    }

    &.inner-shape-medium {
      .shape-one {
        max-width: unset;
        width: 120%;
        top: 180px;
      }

      .shape-two {
        top: -310px;
        left: 75%;
      }
    }

    .banner-content {
      .curve-bottom & {
        padding: 9rem 3rem 9rem 0;
      }

      .curve-bottom.image-left & {
        padding: 9rem 0 9rem 2rem;
      }

      .curve-bottom.curve-top & {
        padding: 9rem 1rem 9rem 0;
      }

      .curve-bottom.curve-top.image-left & {
        padding: 9rem 0 9rem 2rem;
      }
    }
  }
}

@media (min-width: 1920px) {
  .content-banner {
    .banner-content {
      .curve-bottom & {
        padding: 9rem 1rem 12rem 0;
      }

      .curve-bottom.image-left & {
        padding: 9rem 0 12rem 2rem;
      }

      .curve-top & {
        padding: 12rem 1rem 9rem 0;
      }

      .curve-top.image-left & {
        padding: 12rem 0 9rem 2rem;
      }

      .curve-bottom.curve-top & {
        padding: 12rem 1rem 10rem 0;
      }

      .curve-bottom.curve-top.image-left & {
        padding: 12rem 0 10rem 2rem;
      }
    }
  }
}

.bento-layout {
  margin: 3rem 0;
  padding-left: 1rem;

  ul {
    li {
      height: 24rem;
      border-radius: 0.75rem;
      padding: 1rem;
      position: relative;
      overflow: hidden;
      transition: all .3s ease-in-out;

      &:hover {
        cursor: pointer;
      }

      a,
      .link {
        border: none;
        padding: 1rem;
        height: 100%;
        display: block;
        transition: all .3s ease-in-out;

        p {
          font-size: 2.25rem;
          font-weight: 600;
          margin: 0;
          line-height: 1.1;
        }

        img {
          width: 60%;
        }
      }
      
      .animatedArrowSVG {
        display: none;
      }

      &:first-child {
        background-color: var(--bury-orange);
        transition: all .3s ease-in-out;

        &:before {
          content: " ";
          position: absolute;
          right: 0;
          bottom: 0;
          background-image: url(../../../images/savings-bento-bg.svg);
          background-size: cover;
          background-repeat: no-repeat;
          width: 100%;
          height: 15.625rem;
          transition: all .3s ease-in-out;
        }

        &:hover {
          &::before {
            transform-origin: top;
            transform: rotate(-5deg);
            scale: 1.1;
          }
        }
      }
      &:nth-child(2) {
        background-color: var(--manchester-purple);
        a {
          display: flex;
          justify-content: center;
          align-items: center;
        }
    
      }

      &:nth-child(3) {
        background-color: var(--thameside-stone);

        &:before {
          content: " ";
          position: absolute;
          left: -20px;
          bottom: 0;
          background-image: url(../../../images/connected-bento-bg.svg);
          background-size: cover;
          background-repeat: no-repeat;
          width: 17.5rem;
          height: 15.625rem;
          transition: all .3s ease-in-out;
        }

        &:hover {
          cursor: pointer;
          &::before {
            transform-origin: top left;
            transform: rotate(5deg);
            scale: 1.2;
          }
        }
      }

       &:nth-child(4) {
        background-color: var(--rochdale-blue);

        &:before {
          content: " ";
          position: absolute;
          right: 0;
          bottom: 0;
          background-image: url(../../../images/book-bento-bg.svg);
          background-size: cover;
          background-repeat: no-repeat;
          width: 20rem;
          height: 15.625rem;
          transition: all .3s ease-in-out;
        }

        &:hover {
          &::before {
            transform-origin: bottom left;
            transform: rotate(2deg);
            scale: 1.1;
          }
        }
      }

      &:nth-child(5) {
        background-color: var(--oldham-pink);
      }
    }
  }

  .glide-bullets {
    margin: 1rem 0;
  }
}

@media (min-width: 1200px) {
  .bento-layout {
    padding-left: 0;

    .glide-track {
      overflow: unset;
    }

    ul {
      all: unset;
      display: grid;
      grid-template-columns: repeat(12, 1fr);
      grid-template-rows: repeat(2, 1fr);
      grid-column-gap: 1.5rem;
      grid-row-gap: 1.5rem;
      height: 24rem;
      margin: unset !important; /* override Glide styles */
      width: auto !important; /* override Glide styles */

      li {
        border-radius: 0.75rem;
        height: unset;
        width: auto !important; /* override Glide styles */
        margin: unset !important; /* override Glide styles */
        padding: 0.375rem;

        &:hover {
          scale: 1.015;
        }

        a, .link {
          border: none;
          padding: 1rem 1.25rem;
          height: calc(100% - 2rem);

          img {
            max-width: 120px;;
          }

          &:focus-visible {
            border-radius: 0.5rem;
          }
        }

        .animatedArrowSVG {
          display: none;
        }

        &:first-child {
          grid-area: 1 / 1 / 3 / 4;

          &:before {
            height: 11.438rem;
          }

          &:hover {
            &::before {
              height: 10.813rem;
            }
          }
        }

        &:nth-child(2) {
          grid-area: 2 / 4 / 3 / 6;

          a {
            padding: 0;
            height: 100%;
          }
        }

        &:nth-child(3) {
          grid-area: 2 / 6 / 3 / 13;
          text-align: right;

          &:before {
            width: 15.563rem;
            height: 120%;
          }
        }

        &:nth-child(4) {
          grid-area: 1 / 4 / 2 / 11; 

          &:before {
            height: 12rem;
          }
        }

        &:nth-child(5) {     
          grid-area: 1 / 11 / 2 / 13;
        }
      }
    }
  }

  .glide-bullets {
    display: none;
  }
}

@media (min-width: 1440px) {
  .bento-layout {
    margin: 6rem 0;
    padding: 0;
  }
}
.map {
  .map-container {
    position: relative;
    min-height: 50vh;

    .map-content {
      background-color: white;
      padding: 2rem;
      margin: 0;

      @media (min-width: 768px) {
        box-shadow: var(--box-shadow);
        border-radius: 0.75rem;
        margin: 3rem 1rem;
      }

      @media (min-width: 1200px) {
        margin: 6rem 1rem;
      }

      .container {
        padding: 0;
      }
    }

    iframe {
      width: 100%;
      height: 400px;

      @media (min-width: 768px) {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
      }
    }
  }
}

.box-links {
  .box-link {
    margin: 2rem 0;
  }

  a {
    display: flex;
    
    svg {
      height: 1rem;
      width: 1rem;
      margin-left: 1rem;
    }
  }
}
.category-cta {
  border-radius: 0.75rem;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  max-width: 620px;

  .layout-list & {
    height: 100%;
  }

.title-wrapper {
  h3 {
      font-size: var(--font-size-h5);
      line-height: 1;
      font-weight: 600;
    }
  }

  .content-wrapper {
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: space-between;

    p {
      margin-top: 0;
      margin-bottom: 1.5rem;

      &:first-child {
        margin-top: 1.5rem;
      }
    }

    a {
      text-decoration: underline;
      font-weight: 600;
      color: var(--black);
      margin-left: auto;

      &:focus,
      &:hover {
        text-decoration: none;
        background-color: transparent;
      }

      &.link {
        text-decoration: none;
      }

      &[target="_blank"] {
        svg {
          margin: 0 0 0.1rem 0.125rem;
        }
      }
    }
  }

  &.header-only {
    .title-wrapper {
      padding: 1.5rem 1rem;
    }

    .content-wrapper {
      padding: 0 1rem 1rem;
      background-color: var(--white);
    }

    &.black {
      border: var(--black) 3px solid;

      .title-wrapper {
        background-color: var(--black);
        color: var(--white);
      }
    }

    &.white {
      border: var(--white) 3px solid;

      .title-wrapper {
        background-color: var(--white);
        color: var(--black);
      }
    }

    &.surface-grey {
      border: var(--surface-grey) 3px solid;

      .title-wrapper {
        background-color: var(--surface-grey);
        color: var(--black);
      }
    }

    &.bolton-dark-green {
      border: var(--bolton-green) 3px solid;

      .title-wrapper {
        background-color: var(--bolton-green);
        color: var(--white);
      }
    }

    &.bury-orange {
      border: var(--bury-orange) 3px solid;

      .title-wrapper {
        background-color: var(--bury-orange);
        color: var(--black);
      }
    }

    &.manchester-purple {
      border: var(--manchester-purple) 3px solid;

      .title-wrapper {
        background-color: var(--manchester-purple);
        color: var(--white);
      }
    }

    &.oldham-pink {
      border: var(--oldham-pink) 3px solid;

      .title-wrapper {
        background-color: var(--oldham-pink);
        color: var(--black);
      }
    }

    &.rochdale-blue {
      border: var(--rochdale-blue) 3px solid;

      .title-wrapper {
        background-color: var(--rochdale-blue);
        color: var(--black);
      }
    }

    &.salford-royal-blue {
      border: var(--salford-blue) 3px solid;

      .title-wrapper {
        background-color: var(--salford-blue);
        color: var(--white);
      }
    }

    &.stockport-red {
      border: var(--stockport-red) 3px solid;

      .title-wrapper {
        background-color: var(--stockport-red);
        color: var(--white);
      }
    }

    &.thameside-stone {
      border: var(--thameside-stone) 3px solid;

      .title-wrapper {
        background-color: var(--thameside-stone);
        color: var(--black);
      }
    }

    &.trafford-green {
      border: var(--trafford-green) 3px solid;

      .title-wrapper {
        background-color: var(--trafford-green);
        color: var(--black);
      }
    }

    &.wigan-yellow {
      border: var(--wigan-yellow) 3px solid;

      .title-wrapper {
        background-color: var(--wigan-yellow);
        color: var(--black);
      }
    }
  }

  &.full-colour {
    padding: 1rem;

    &.black {
      background-color: var(--black);
      border: var(--black) 3px solid;
      color: var(--white);
    }

    &.bolton-dark-green {
      background-color: var(--bolton-green);
      border: var(--bolton-green) 3px solid;
      color: var(--white);
    }

    &.manchester-purple {
      background-color: var(--manchester-purple);
      border: var(--manchester-purple) 3px solid;
      color: var(--white);
    }

    &.stockport-red {
      background-color: var(--stockport-red);
      border: var(--stockport-red) 3px solid;
      color: var(--white);
    }

    &.salford-royal-blue {
      background-color: var(--salford-blue);
      border: var(--salford-blue) 3px solid;
      color: var(--white);
    }

    &.white {
      background-color: var(--white);
      border: var(--white) 3px solid;
      color: var(--black);
    }

    &.surface-grey {
      background-color: var(--surface-grey);
      border: var(--surface-grey) 3px solid;
      color: var(--black);
    }

    &.bury-orange {
      background-color: var(--bury-orange);
      border: var(--bury-orange) 3px solid;
      color: var(--black);
    }

    &.oldham-pink {
      background-color: var(--oldham-pink);
      border: var(--oldham-pink) 3px solid;
      color: var(--black);
    }

    &.rochdale-blue {
      background-color: var(--rochdale-blue);
      border: var(--rochdale-blue) 3px solid;
      color: var(--black);
    }

    &.thameside-stone {
      background-color: var(--thameside-stone);
      border: var(--thameside-stone) 3px solid;
      color: var(--black);
    }

    &.trafford-green {
      background-color: var(--trafford-green);
      border: var(--trafford-green) 3px solid;
      color: var(--black);
    }

    &.wigan-yellow {
      background-color: var(--wigan-yellow);
      border: var(--wigan-yellow) 3px solid;
      color: var(--black);
    }

    &.white,
    &.surface-grey,
    &.bury-orange,
    &.oldham-pink,
    &.rochdale-blue,
    &.thameside-stone,
    &.trafford-green,
    &.wigan-yellow {
      a {
        color: var(--black);
        border-bottom: 2px solid var(--black);

        &:hover {
          background-color: transparent;
        }

        svg {
          .shaft,
          .point {
            stroke: var(--black);
          }
        }
      }
    }

    &.salford-royal-blue,
    &.black,
    &.bolton-dark-green,
    &.manchester-purple,
    &.stockport-red {
      a {
        color: var(--white);
        border-bottom: 2px solid var(--white);

        &:hover {
          background-color: transparent;
        }

        svg {
          .shaft,
          .point {
            stroke: var(--white);
          }
        }
      }
    }
  }
}

.three-column-category-cta {
  padding: 2rem 1rem;

  .grid {
    gap: 1rem;
  }
}

@media (min-width: 1200px) {
  .category-cta {
    &.header-only {
      .title-wrapper {
        padding: 2rem;
      }

      .content-wrapper {
        padding: 0 2rem 2rem;
      }
    }

    &.full-colour {
      padding: 2rem;
    }
  }

  .three-column-category-cta {
    padding: 4rem 0;

    .grid {
      gap: 2rem;
      margin-top: 3rem;
    }
  }
}

@media (min-width: 1440px) {
  .three-column-category-cta {
    padding: 6rem 0;
  }
}
.column-cards {
  .container {
    h2 {
      width: 100%;
    }

    p {
      width: 100%;
    }

    ul {
      display: flex;
      justify-content: space-between;
      margin: 3rem 0;

      .card {
        width: 30%;
  
        img {
          height: 16rem;
        }
      }
    }
  }
}
.disclaimer {
  margin: 3rem 1rem;

  .content {
    border-radius: 0.75rem;
    padding: 2rem 1rem;

    &.no-image {
      text-align: center;

      &.bg-white {
        border: 1px solid var(--black);
      }
    }
  }

  .layout-two-column &,
  .layout-three-column {
    margin: 0;
  }
    
}

@media (min-width: 768px) {
  .disclaimer {
    margin: 4rem 1rem;

    .content {
      padding: 3rem 2rem;

      p {
        margin-bottom: 0;
      }

      img {
        margin-top: 0.5rem;
      }

      .col-md-2 {
        display: flex;
        justify-content: center;
        align-self: flex-start;
      }
    }
  }
}

@media (min-width: 1440px) {
  .disclaimer {
    margin: 6rem 0;

    .content {
      padding: 3rem;

      img {
        min-width: 8rem;
      }
    }
  }
}

.event-list {
  padding: 0 1rem;

  .past-events {
    .button {
      background-color: var(--surface-grey);
      color: var(--black);
      cursor: unset;
    }

    h2 {
      padding-top: var(--spacing-l);
    }
  }


  .no-events {
    text-align: center;
    padding: var(--spacing-l);
    font-size: var(--font-size-h4);
  }

  ul {
    list-style: none;

    .event {
      margin: 3rem 0;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      grid-template-rows: 1fr;
      grid-column-gap: 1rem;

      .image-wrapper {
        grid-column: span 3;

        img {
          border-radius: 0.75rem;
          object-fit: cover;
          width: 100%;
          height: 100%;
          max-height: 300px;
          margin: 0;
        }
      }


      .content-wrapper {
        display: flex;
        flex-direction: column;
        grid-column: span 3;
        height: 100%;
        margin-top: 1rem;
        padding: 0;

        .event-details {
          display: flex;
          flex-wrap: wrap;
          gap: 0.5rem 1rem;

          p {
            margin: 0;
          }
        }

        .button {
          margin-top: auto;
          margin-bottom: 0;
        }
      }
    }
  }
}

@media (min-width: 768px) {
  .event-list {
    ul {
      .event {
        .image-wrapper {
          grid-column: span 1;

          img {
            min-height: 400px;
            max-height: initial;
          }
        }

        .content-wrapper {
          grid-column: span 2;
          margin-top: 0;
          padding: 0 1rem;
        }
      }
    }
  }
}
.feature-list {
  padding: 2rem 0;

  .layout-one-column &,
  .layout-two-column &,
  .layout-three-column & {
    padding: 0;
  }

  .product &,
  .savings-product-page & {
    margin-top: 0;
    padding: 0;
  }

  h5 {
    margin-bottom: 2rem;
  }

  .content-wrapper {
    max-width: 700px;
  }

  ul {
    padding-left: 0;

    li {
      display: flex;
      align-items: flex-start;
      margin: 1rem 0;
      padding-left: 0;

      &:first-child {
        margin-top: 0;
      }

      svg {
        margin-right: 1rem;
        height: 0.8rem;
        margin-top: 6px;
        flex-shrink: 0;

        &.tick {
          fill: var(--salford-blue);

          .bg-trafford-green &,
          .bg-oldham-pink &,
          .bg-wigan-yellow &,
          .bg-thameside-stone &,
          .bg-rochdale-blue &,
          .bg-bury-orange &,
          .bg-surface-grey & {
            fill: var(--black);
          }

          .bg-stockport-red &,
          .bg-salford-royal-blue &,
          .bg-bolton-dark-green &,
          .bg-manchester-purple &,
          .bg-black & {
            fill: #ffffff;
          }
        }

        &.cross {
          fill: var(--black);

          .bg-stockport-red &,
          .bg-salford-royal-blue &,
          .bg-bolton-dark-green &,
          .bg-manchester-purple &,
          .bg-black & {
            fill: #ffffff;
          }
        }
      }

      span {
        margin-right: 1rem;

        .bg-stockport-red &,
        .bg-salford-royal-blue &,
        .bg-bolton-dark-green &,
        .bg-manchester-purple &,
        .bg-black & {
          color: #ffffff;
        }
      }

      p {
        margin: 0;
      }
    }
  }
}

.icon-link {
  display: flex;
  justify-content: center;

  .icon-link-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    row-gap: 0.5rem;
    color: black;
    font-weight: bold;
    text-align: center;
    border-bottom: 0.125rem solid;
    transition: border-color 0.2s;

    &:hover,
    &:focus {
      border-bottom-color: var(--bury-orange);
      text-decoration: none;
    }

    img {
      height: 45px;
    }

    &[target="_blank"] {
      display: grid;
      grid-template-columns: auto auto;
      grid-template-rows: auto auto;
      gap: 0.25rem;
      justify-items: center;
      grid-template-areas:
        "image image"
        "text icon";

      img {
        grid-area: image;
      }

      svg {
        grid-area: icon;
        margin: 0 0 0.25rem 0;
        height: 1rem;
        width: 1.25rem;
      }
    }
  }
}
.image-carousel {
  display: flex;
  align-items: center;
  transition: background-color 0.3s ease;
  padding: 4rem 1rem;
  overflow-x: hidden;

  .container {
    &:has(.static) {
      width: 100%;
    }
  }

  .carousel-title {
    display: flex;
    flex-direction: column;
  }

  .glide {
    .glide-track {
      padding-bottom: 2rem;
      border-radius: 0.75rem;
      overflow: unset;
      clip-path: inset(0 -1000px 0 0);

      &.static {
        .glide-slides {
          width: 100%;
          display: flex;
          justify-content: space-around;
          flex-wrap: wrap;

          .glide-slide {
            max-width: 726px;
            padding: 0 1rem;
          }
        }
      }
    }

    .glide-slides {
      overflow: unset;
    }

    .glide-slide {
      opacity: 0.5;
      transition: opacity 0.3s ease;
      margin-top: 2rem;

      &.glide-slide--active {
        opacity: 1;
      }

      .image-wrapper {
        width: 100%;
        aspect-ratio: 16 / 9;
        margin-bottom: 1rem;
        margin-top: 1rem;
        overflow: hidden;

        img {
          width: 100%;
          height: 100%;
          object-fit: cover;
          border-radius: 0.75rem;
        }
      }

      .content-wrapper {
        max-width: 700px;
        padding-bottom: 2rem;

        h3 {
          font-size: 2rem;
        }

        .button {
          margin-top: 1rem;
        }
      }

      &.event {
        .event-details {
          display: flex;
          flex-wrap: wrap;
          gap: 0.5rem 1rem;

          p {
            margin-top: 0.5rem;
            margin-bottom: 0;
          }
        }
      }
    }

    .glide-arrows {
      position: relative;
      margin-top: 2rem;
      padding-left: 0.125rem;
      height: 1.563rem;

      .glide-arrow {
        box-shadow: none;
        text-shadow: none;
        padding: 0.25rem;
        background-color: transparent;
        border: none;

        &:focus {
          outline: none;
        }

        &:focus-visible {
          outline: 0.125rem solid yellow;
          outline-offset: -0.125rem;
          box-shadow: 0 0 0 0.125rem blue;
          border-radius: 0.25rem;
        }

        svg {
          position: unset;
          margin: 0;
          height: 1.75rem;
          width: 1.75rem;

          path {
            transition: fill 0.3s ease;
          }

          .bg-stockport-red &,
          .bg-salford-royal-blue &,
          .bg-bolton-dark-green &,
          .bg-manchester-purple &,
          .bg-black & {
            path {
              fill: #ffffff;
            }
          }
        }

        &.right {
          margin-left: 100px;
        }
      }
    }
  }
}

@media (min-width: 1200px) {
  .image-carousel {
    padding: 6rem 0;

    .carousel-title {
      padding-left: 1rem;
    }

    .glide {
      .glide-slide {
        margin-top: 0;

        .image-wrapper {
          margin-top: 0;
          margin-bottom: 2rem;
          position: relative;
          overflow: hidden;
          border-radius: 0.75rem;

          img {
            transition: all 0.3s ease;

            &:focus,
            &:focus-visible {
              transform: scale(1.05);

              .image-wrapper {
                &:after {
                  opacity: 1;
                }
              }
            }
          }

          .lightbox-carousel & {
            &:after {
              content: url("data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%3C!DOCTYPE%20svg%20PUBLIC%20%22-%2F%2FW3C%2F%2FDTD%20SVG%201.1%2F%2FEN%22%20%22http%3A%2F%2Fwww.w3.org%2FGraphics%2FSVG%2F1.1%2FDTD%2Fsvg11.dtd%22%3E%3C!--%20Made%20by%20Christian%20Veigt%20--%3E%3Csvg%20fill%3D%22%23000000%22%20version%3D%221.1%22%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20%20width%3D%2244px%22%20height%3D%2244px%22%20viewBox%3D%220%200%20100%20100%22%20enable-background%3D%22new%200%200%20100%20100%22%20xml%3Aspace%3D%22preserve%22%3E%3Cg%3E%3Cpath%20d%3D%22M22.661%2C20.5H36c1.104%2C0%2C2-0.896%2C2-2s-0.896-2-2-2H19c-1.104%2C0-2.5%2C1.276-2.5%2C2.381v17c0%2C1.104%2C0.896%2C2%2C2%2C2s2-0.896%2C2-2V24.876l16.042%2C15.791c0.391%2C0.391%2C1.027%2C0.586%2C1.539%2C0.586s1.086-0.195%2C1.477-0.586c0.781-0.781%2C0.812-2.237%2C0.031-3.019L22.661%2C20.5z%22%2F%3E%3Cpath%20d%3D%22M83%2C16.5H66c-1.104%2C0-2%2C0.896-2%2C2s0.896%2C2%2C2%2C2h12.605L61.647%2C37.648c-0.781%2C0.781-0.781%2C2.142%2C0%2C2.923c0.39%2C0.391%2C0.902%2C0.633%2C1.414%2C0.633s0.774-0.171%2C1.164-0.562l16.274-16.5v11.738c0%2C1.104%2C0.896%2C2%2C2%2C2s2-0.896%2C2-2v-17C84.5%2C17.776%2C84.104%2C16.5%2C83%2C16.5z%22%2F%3E%3Cpath%20d%3D%22M36.542%2C60.962L20.5%2C76.754V65.881c0-1.104-0.896-2-2-2s-2%2C0.896-2%2C2v17c0%2C1.104%2C1.396%2C1.619%2C2.5%2C1.619h17c1.104%2C0%2C2-0.896%2C2-2s-0.896-2-2-2H22.529L39.62%2C63.6c0.781-0.781%2C0.656-1.951-0.125-2.732C38.715%2C60.086%2C37.322%2C60.181%2C36.542%2C60.962z%22%2F%3E%3Cpath%20d%3D%22M82.5%2C63.881c-1.104%2C0-2%2C0.896-2%2C2v11.606L64.226%2C60.962c-0.78-0.781-1.923-0.781-2.703%2C0c-0.781%2C0.781-0.719%2C1.856%2C0.062%2C2.638l17.152%2C16.9H66c-1.104%2C0-2%2C0.896-2%2C2s0.896%2C2%2C2%2C2h17c1.104%2C0%2C1.5-0.515%2C1.5-1.619v-17C84.5%2C64.776%2C83.604%2C63.881%2C82.5%2C63.881z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
              position: absolute;
              bottom: 2rem;
              right: 2rem;
              opacity: 0;
              transition: opacity 0.3s ease;
              background-color: var(--white);
              border-radius: 0.25rem;
              display: flex;
              align-items: center;
              justify-content: center;
            }
          }

          &:hover,
          &:focus,
          &:focus-visible {
            &:after {
              opacity: 1;
            }

            .lightbox-carousel & {
              img {
                transform: scale(1.05);
              }
            }
          }
        }

        .content-wrapper {
          h3 {
            font-size: 2.441rem;
          }
        }
      }
    }
  }
}

@media (min-width: 1440px) {
  .image-carousel {
    .carousel-title {
      padding-left: 0;
    }
  }
}

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0, 0, 0, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  transition: opacity 0.3s ease;
  overflow: auto;
}

.lightbox[hidden] {
  display: none;
}

.lightbox-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  cursor: pointer;
}

.lightbox-content {
  position: relative;
  max-width: 90vw;
  max-height: 90vh;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  border-radius: 0.75rem;
  box-shadow: 0 0 2rem rgba(0, 0, 0, 0.5);
  outline: none;
}

.lightbox-image {
  max-width: 100%;
  max-height: 70vh;
  object-fit: contain;
  border-radius: 0.75rem;
}

.lightbox-caption {
  margin-top: 1rem;
  font-size: 1rem;
  color: var(--white);
  text-align: center;
  max-width: 60vw;
}

.lightbox-close {
  position: fixed;
  top: 1rem;
  right: 1rem;
  font-size: 2rem;
  background: transparent;
  border: none;
  color: var(--white);
  cursor: pointer;
  padding: 0 0.5rem 0.25rem;
  line-height: 1;
  margin: 0;
  border-radius: 0.75rem;

  &:hover,
  &:focus {
    background: transparent;
    color: var(--white);
  }
}

.lightbox-close,
.lightbox-prev,
.lightbox-next {
  &:focus-visible {
    outline: 0.125rem solid yellow;
    outline-offset: -0.125rem;
    box-shadow: 0 0 0 0.125rem blue;
  }
}

.lightbox-prev,
.lightbox-next {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(255, 255, 255, 0.9);
  border: none;
  font-size: 2rem;
  cursor: pointer;
  padding: 0.5rem 1rem;
  border-radius: 999px;
  background: transparent;

  svg {
    width: 1.75rem;
    height: 1.75rem;
    fill: currentColor;
  }

  &:hover,
  &:focus {
    background: transparent;
    color: var(--white);
  }
}

.lightbox-prev {
  left: 1rem;
}

.lightbox-next {
  right: 1rem;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .lightbox-image {
    max-height: 50vh;
  }

  .lightbox-caption {
    font-size: 0.875rem;
  }

  .lightbox-prev,
  .lightbox-next {
    position: fixed;
    top: unset;
    padding: 0.25rem 0.75rem;
    bottom: 4rem;
  }
}

.news-article {
  margin-bottom: 1.5rem;

  img {
    width: 100%;
    height: auto;
    margin-bottom: 1rem;
    min-height: 300px;
    max-height: 750px;
    object-fit: cover;
  }

  .article-info {
    display: flex;
    padding: 0 0 1rem;

    p {
      font-size: 1rem;
      margin: 0;
    }

    .date {
      margin-right: 1.5rem;
    }

    .date,
    .time {
      display: flex;
      align-items: center;

      svg {
        margin-right: 0.25rem;
      }
    }
  }

  h1 {
    font-size: 3.052rem;
    line-height: 1;
    margin-bottom: 1rem;
    font-weight: 700;
    margin-top: 1rem;
  }

  ul,
  ol {
    padding-left: 1.5rem;

    li {
      list-style: initial;
      padding-left: 0.5rem;
      margin: 1rem 0;
      line-height: 1.6;
    }
  }

  ol {
    li {
      list-style: decimal;
    }
  }

  .grid {
    padding: 0 1rem;

    .col-lg-9 {
      padding: 1rem 0;
      margin-left: 0;
      margin-top: 3rem;
      display: flex;
      flex-direction: column;
      width: 100%;

      img {
        border-radius: 0.75rem;
      }

      &.has-image {
        background-color: #fff;
        border-radius: 2rem 6rem 0 0;
        padding: 1rem;
        margin-left: -1rem;
        margin-top: -6.5rem;
        width: calc(100% + 2rem);
      }
    }
  }
}

@media (min-width: 1200px) {
  .news-article {
    .grid {
      padding: 0;

      .col-lg-9 {
        margin-top: 5rem;

        &.has-image {
          margin-top: -16rem;
          background-color: #fff;
          border-radius: 2rem 18rem 0 0;
          padding: 2rem 10rem 2rem 2rem;
          margin-left: 0;
          width: 100%;
        }
      }
    }

    h1 {
      margin-top: 0;
    }
  }
}

@media (min-width: 1920px) {
  .news-article {
    img {
      max-height: 850px;
    }
  }
}

.news-highlights {
  padding: 3rem 1rem;

  .title-wrapper {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: var(--responsive-spacing);
    
    h2 {
      margin-right: 2rem;
    }

    .link {
      margin-top: 1rem;
    }
  }

  .grid {
    padding: 0;
    gap: 1.5rem;
  }

  .news-article {
    a {
      display: grid;
      grid-template-columns: repeat(12, 1fr);

      .img-wrapper {
        grid-column: span 4;
        border-radius: 0.75rem;
        overflow: hidden;
        aspect-ratio: 1.59 / 1;
        width: 100%;
      }

      img {
        object-fit: cover;
        width: 100%;
        height: 100%;
        transition: all ease 0.3s;
        min-height: unset;
      }

      h3 {
        font-size: clamp(1rem, 0.6909rem + 1.4545vw, 2rem);
        line-height: 1.2;
        margin-bottom: 0;
        z-index: 2;
      }

      &:hover,
      &:focus {
        text-decoration: none;

        img {
          transform: scale(1.05);
        }

        h3 {
          text-decoration: underline;
          text-decoration-color: var(--thameside-stone);
          text-decoration-thickness: 3px;
        }

        p {
          text-decoration: none;
        }
      }
    }

    .text-wrapper {
      grid-column: span 8;
      padding: 0 0 0 1rem;
      color: var(--black);
      display: flex;
      flex-direction: column;
      justify-content: space-between;

      .title-full {
        display: none;
      }

      p {
        margin-top: 0;
        margin-bottom: 0;
        color: rgba(80, 90, 95, 1);
      }
    }

    footer {
      background-color: var(--white);
      padding: 0;
      display: flex;
      flex-direction: column;

      p {
        color: var(--black);
        font-size: 0.75rem;
        display: flex;
        align-items: center;
      }

      .date {
        margin-right: 1rem;
        margin-top: 0.5rem;
        margin-bottom: 0.25rem;
      }

      svg {
        margin-right: 0.25rem;
      }
    }
  }
}

@media (min-width: 370px) {
  .news-highlights {
    .news-article {
      footer {
        align-items: center;
        flex-direction: row;
        margin-top: 0.5rem;

        .date {
          margin-top: 0;
          margin-bottom: 0;
          margin-right: 0.75rem;
        }
      }
    }
  }
}

@media (min-width: 540px) {
  .news-highlights {
    .news-article {
      .text-wrapper {
        padding: 0.25rem 1rem;

        .title-full {
          display: block;
        }

        .title-truncated {
          display: none;
        }
      }
    }
  }
}

@media (min-width: 768px) {
  .news-highlights {
    .news-article {
      a {
				height: 100%;
				display: flex;
				flex-direction: column;

        .img-wrapper {
          grid-column: span 12;
        }
      }

      .text-wrapper {
        grid-column: span 12;
				padding: 1rem 0;
				flex: 1;
      }

      footer {
        margin-top: 1rem;
      }
    }
  }
}

@media (min-width: 1000px) {
	.news-highlights {
    .news-article {
			footer {
				p {
					font-size: 1rem;
				}

				.date {
					margin-right: 1.5rem;
				}
			}
    }
  }
}


@media (min-width: 1440px) {
	.news-highlights {
    padding: 3rem 0rem;

    .grid {
      gap: 3rem;
    }
  }
}

.pagination {
  margin: 0 2.5rem 2rem 2.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;

  p {
    margin-bottom: 0;
  }

  button {
    display: block;
    margin-top: 0;
    padding: 0.75rem 2rem;
    align-self: center;
  }

  #loading-spinner {
    width: 3.375rem;
    height: 3.375rem;
    border: 0.25rem solid var(--bury-orange);
    border-bottom-color: transparent;
    border-radius: 50%;
    box-sizing: border-box;
    animation: rotation 1s linear infinite;
    display: none;
    margin: 0 auto;
    margin-bottom: 1.5rem;
  }
}

@keyframes rotation {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}
.number {
	margin: 2rem 0;
	padding-bottom: 1rem;
}
.person {
  img {
    margin-bottom: var(--spacing-l);
    border-radius: var(--border-radius);
    aspect-ratio: 1.59 / 1;
    object-fit: cover;
  }

  .video-hover {
    margin-bottom: var(--spacing-l);
  }
}
.pre-footer {
  position: relative;
  margin-bottom: -1rem;
  padding: 1rem;

  &:after {
    content: "";
    display: block;
    background-color: var(--black);
    height: 50%;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
  }

  .container {
    z-index: 1;
    position: relative;
    border-radius: 0.75rem;
    padding: 1.5rem;
    text-align: center;
    overflow: hidden;

    .shape-one {
      position: absolute;
      top: 0;
      left: -9.063rem;
      height: 100%;
    }

    .shape-two {
      position: absolute;
      bottom: 0;
      right: -50px;
    }

    a {
      &.phone-number {
        font-size: 2.25rem;
      }
    }

    &.bg-stockport-red {
      .shape-one {
        path {
          fill: var(--bury-orange);
        }
      }

      .shape-two {
        path {
          fill: var(--thameside-stone);
        }
      }
    }

    &.bg-salford-royal-blue {
      .shape-one {
        path {
          fill: var(--manchester-purple);
        }
      }

      .shape-two {
        path {
          fill: var(--oldham-pink);
        }
      }
    }

    &.bg-bolton-dark-green {
      .shape-one {
        path {
          fill: var(--wigan-yellow);
        }
      }

      .shape-two {
        path {
          fill: var(--stockport-red);
        }
      }
    }

    &.bg-manchester-purple {
      .shape-one {
        path {
          fill: var(--salford-blue);
        }
      }

      .shape-two {
        path {
          fill: var(--bury-orange);
        }
      }
    }

    &.bg-thameside-stone {
      .shape-one {
        path {
          fill: var(--oldham-pink);
        }
      }

      .shape-two {
        path {
          fill: var(--salford-blue);
        }
      }
    }

    &.bg-wigan-yellow {
      .shape-one {
        path {
          fill: var(--trafford-green);
        }
      }

      .shape-two {
        path {
          fill: var(--rochdale-blue);
        }
      }
    }

    &.bury-orange {
      .shape-one {
        path {
          fill: var(--rochdale-blue);
        }
      }

      .shape-two {
        path {
          fill: var(--manchester-purple);
        }
      }
    }

    &.bg-rochdale-blue {
      .shape-one {
        path {
          fill: var(--thameside-stone);
        }
      }

      .shape-two {
        path {
          fill: var(--bolton-green);
        }
      }
    }

    &.bg-trafford-green {
      .shape-one {
        path {
          fill: var(--bolton-green);
        }
      }

      .shape-two {
        path {
          fill: var(--wigan-yellow);
        }
      }
    }

    &.bg-oldham-pink {
      .shape-one {
        path {
          fill: var(--bolton-green);
        }
      }

      .shape-two {
        path {
          fill: var(--trafford-green);
        }
      }
    }
  }

  .cta,
  h2,
  p {
    z-index: 1;
    position: relative;
  }

  .telephone-container {
    p {
      font-size: 0.9rem;
      margin-top: 0;
    }
  }
}

@media (min-width: 1200px) {
  .pre-footer {
    padding: 0 3rem 3rem;
    margin-top: 3rem;
    
    .cta {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .container {
      padding: 3rem;

      .shape-one {
        left: 0;
      }

      .shape-two {
        right: 0;
      }

      a {
        &.phone-number {
          font-size: 3.063rem;
        }
      }
    }

    .button-container {
      width: 45%;
      display: flex;
      justify-content: flex-end;
      align-self: flex-end;
      align-items: center;
    }

    .telephone-container {
      width: 45%;
      display: flex;
      justify-content: flex-start;
      flex-direction: column;
      align-items: flex-start;

      p {
        margin: 0;
      }
    }
  }
}

@media (min-width: 1800px) {
  .pre-footer {
    padding: 0 6rem 3rem;
  }
}
.product-promo {
  .container {
    border-radius: 0.75rem;

    &.cash-isa {
      background-color: var(--bury-orange);
    }

    &.easy-access {
      background-color: var(--oldham-pink);
    }

    &.fixed-rate-bonds {
      background-color: var(--rochdale-blue);
    }

    &.children-s-accounts {
      background-color: var(--trafford-green);
    }

    &.business-savings-accounts {
      background-color: var(--wigan-yellow);
    }

    &.regular-saver {
      background-color: var(--thameside-stone);
    }

    .content-wrapper {
        padding: var(--responsive-spacing);
    }

    h2 {
      margin-top: 0.5rem;
    }

    .rate-wrapper {
      margin-top: var(--responsive-spacing);
      display: flex;
      flex-wrap: wrap;
      gap: 1rem 3rem;
      margin-bottom: 0.5rem;

      .rate-info {
        margin: 0.25rem;
      }

      .rate {
        font-size: var(--font-size-h2);
        font-weight: 800;
        line-height: 1;
        margin: 0;
      }
    }

    .button {
      margin-top: var(--responsive-spacing);
    }
  }
}

@media (min-width: 768px) {
  .product-promo {
    .container {
      .rate-wrapper {
        gap: 0rem 3rem;

        .rate {
          margin: 1rem 0 0.25rem 0;
        }
      }
    }
  }
}

@media (min-width: 1800px) {
  .product-promo {
    margin-left: var(--responsive-spacing);
    margin-right: var(--responsive-spacing);

    .container {
      h2 {
        font-size: var(--font-size-h1);
      }
    }

    .rate-wrapper {
      .rate {
        font: var(--font-size-h1);
      }
    }
  }
}

.quote {
  padding: 2rem 1rem;

  blockquote {
    font-size: var(--font-size-h3);
    font-weight: 700;
  }

  .container {
    .quotee-container {
      padding: 1rem;
      border-radius: 0.5rem;

      h3 {
        font-size: var(--font-size-h4);
      }
    }
  }
}

@media (min-width: 1200px) {
  .quote {
    padding: 4rem 1rem;
  }
}

@media (min-width: 1440px) {
  .quote {
    padding: 6rem 0;
  }
}

.savings-list {
  padding: 0 1rem;

  .container {
    .container {
      padding: 0;
    }
  }

  .sort-container {
    display: flex;
    width: 100%;
    flex-direction: column-reverse;
    justify-content: space-between;
    align-items: flex-start;
  }

  .accordion {
    .accordion-container {
      margin-top: 1rem;
      border-bottom: 0;
    }

    .accordion-button {
      border: none;
      display: flex;
      justify-content: space-between;
      padding: 0.75rem 0 0;

      img {
        transition: all 0.3s ease;
      }

      &[aria-expanded="true"] {
        img {
          transform: rotate(-180deg);
        }
      }
    }

    button {
      padding: 0.75rem 1.25rem 0.75rem 1.25rem;
    }
  }

  .product {
    border: 6px solid var(--thameside-stone);
    padding: 0;
    border-radius: 0.75rem;
    overflow: hidden;
    margin-bottom: 1rem;

    .name {
      background-color: var(--thameside-stone);
      padding: 2rem 1.25rem;
    }

    &.cash-isa {
      border: 0.375rem solid var(--bury-orange);

      .name {
        background-color: var(--bury-orange);
      }
    }

    &.easy-access {
      border: 0.375rem solid var(--oldham-pink);

      .name {
        background-color: var(--oldham-pink);
      }
    }

    &.fixed-rate-bonds {
      border: 0.375rem solid var(--rochdale-blue);

      .name {
        background-color: var(--rochdale-blue);
      }
    }

    &.children-s-accounts {
      border: 0.375rem solid var(--trafford-green);

      .name {
        background-color: var(--trafford-green);
      }
    }

    &.business-savings-accounts {
      border: 0.375rem solid var(--wigan-yellow);

      .name {
        background-color: var(--wigan-yellow);
      }
    }

    &.regular-saver {
      border: 0.375rem solid var(--thameside-stone);

      .name {
        background-color: var(--thameside-stone);
      }
    }

    .summary {
      .key-features {
        padding: 1rem;

        .feature-list {
          padding: 1rem 0;
        }

        .rate-container {
          &:last-child {
            margin-bottom: 0;
            margin-right: 0;
          }
        }

        &.grid {
          grid-gap: 0;
        }
      }

      .cta {
        display: flex;
        justify-content: flex-end;
        grid-column: span 12;
        padding-bottom: 0.5rem;
      }
    }
  }

  .hidden {
    display: none;
  }
}

@media (min-width: 768px) {
  .savings-list {
    .sort-container {
      justify-content: space-between;
      flex-direction: row;
      align-items: flex-end;
    }

    .accordion {
      .container {
        position: sticky;
        top: 8rem;
      }
    }

    .product {
      .summary {
        .key-features {
          padding: 2rem 1rem 1rem 0;

          .feature-list {
            padding: 0 0 0 1rem;
          }

          .rate-container {
            &:last-child {
              margin-bottom: 0;
              margin-right: unset;
            }
          }
        }

        .cta {
          padding-bottom: 0;
          padding-right: 1rem;
        }
      }
    }
  }
}

#rate-definitions {
  scroll-margin: 30vh;
}

@media (min-width: 1440px) {
  .savings-list {
    padding: 0;
    .product {
      grid-gap: 2rem;
    }
  }
}

.savings-product-page {
  padding: var(--responsive-spacing) 0;

  .container {
    .container {
      padding: 3rem 0;
    }
  }

  .accordion {
    padding: 0;
  }

  .disclaimer {
    margin: 0;

    h2 {
      border-bottom: 2px solid var(--surface-grey);
      padding-bottom: var(--margin-h2);
    }
  }

  .product-information {
    padding: 0 var(--responsive-spacing);

    .fscs-container {
      display: flex;
      justify-content: flex-end;
      margin-top: var(--spacing-s);

      img {
        min-width: 44px;
        width: 103px;
      }
    }

    .two-column-list {
      border-top: 0.5rem solid var(--bury-orange);
      padding: var(--responsive-spacing-sm) 0 0;
      margin: 0;

      .cash-isa & {
        border-top: 0.5rem solid var(--bury-orange);
      }

      .easy-access & {
        border-top: 0.5rem solid var(--oldham-pink);
      }

      .fixed-rate-bonds & {
        border-top: 0.5rem solid var(--rochdale-blue);
      }

      .children-s-accounts & {
        border-top: 0.5rem solid var(--trafford-green);
      }

      .business-savings-accounts & {
        border-top: 0.5rem solid var(--wigan-yellow);
      }

      .regular-saver & {
        border-top: 0.5rem solid var(--thameside-stone);
      }

      h5 {
        text-wrap: unset;
      }
    }

    .accordion {
      .container {
        padding: 0;
      }
    }

    .summary {
      margin-top: 4rem;
    }

    .summary table {
      border-collapse: collapse;
      padding: var(--spacing-m);
      font-size: var(--font-size-body);
      line-height: 1.6;

      tr {
        display: flex;
        border-bottom: 2px solid var(--surface-grey);
        padding: var(--spacing-m) 0;
        flex-wrap: wrap;

        &:first-child {
          border-top: 2px solid var(--surface-grey);
        }
      }

      td {
        padding: var(--spacing-m) 0;
        text-align: left;
        display: flex;
        width: 100%;
        flex-direction: column;
        word-break: break-word;
        overflow-wrap: anywhere;

        p {
          margin-top: 0;

          &:last-child {
            margin-bottom: 0;
          }

          a {
            color: var(--black);
            text-decoration: underline;

            &:hover,
            &:focus {
              text-decoration: none;
            }
          }
        }
      }

      th {
        padding: var(--spacing-m) 0;
        text-align: left;
        display: flex;
        width: 100%;
      }
    }
  }

  .disclaimer {
    scroll-margin-top: 6.5rem;
  }

  .terms {
    padding: 4rem 0 2rem;

    p {
      margin-top: 1.5rem;
      margin-bottom: 2.5rem;
    }

    a {
      display: flex;
      align-items: center;
      margin-bottom: var(--spacing-m);

      color: var(--black);

      span {
        margin-right: var(--spacing-m);
        flex-shrink: 0;
      }
    }
  }

  .apply {
    position: sticky;
    top: 8rem;
    align-self: flex-start;
    margin-bottom: var(--spacing-xl);
    padding: 0 var(--responsive-spacing);

    .button {
      width: 100%;
      justify-content: center;
      margin: var(--spacing-l) 0 var(--spacing-xl) 0;
    }

    .content-top {
      color: var(--white);
      background-color: var(--black);
      border: 2px solid var(--black);
      padding: var(--spacing-xl) var(--spacing-l) 0;
      border-radius: var(--border-radius) var(--border-radius) 0 0;
    }

    .content-bottom {
      padding: 2rem 1.5rem;
      border: 2px solid var(--black);
      border-radius: 0 0 var(--border-radius) var(--border-radius);

      p {
        margin-bottom: 0;
      }
    }

    .terms-and-conditions {
      color: var(--black);
      display: inline-block;
      margin-top: 1rem;
      margin-left: var(--spacing-s);
      width: unset;
      padding: var(--spacing-s) 0 var(--spacing-xs) 0;
      display: none;

      svg {
        transform: rotate(90deg);
        top: 1.15rem;
        right: -1.5rem;
      }
    }
  }
}

.key-features {
  &.grid {
    padding: 2rem 0 var(--spacing-m);
  }

  .rate-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-m);
  }

  .rate-container {
    display: flex;
    flex-direction: column;
  }

  .rate-info {
    color: rgba(80, 90, 95, 1);
    margin-top: 0;
    margin-bottom: var(--spacing-s);
    font-size: var(--font-size-body);
    line-height: 1.6;
  }

  .rate {
    font-size: 3rem;
    line-height: 1;
    font-weight: 700;
    margin-bottom: var(--spacing-s);
    margin-top: 0;
  }

  .feature-list {
    li {
      margin-bottom: var(--spacing-m);
      font-size: 1.125rem;
      display: flex;

      svg {
        margin-right: var(--spacing-m);
        height: 0.8rem;
        margin-top: var(--spacing-s);
        flex-shrink: 0;
        fill: var(--salford-blue);
      }

      p {
        margin: 0;
      }
    }
  }
}

@media (min-width: 768px) {
  .savings-product-page {
    .product-information {
      .disclaimer {
        .content {
          grid-gap: 2rem;

          img {
            min-width: 6rem;
          }
        }
      }

      .summary table {
        tr {
          flex-wrap: unset;
        }

        td {
          width: 75%;
          padding: var(--spacing-m) var(--spacing-xl);
        }

        th {
          width: 25%;
        }
      }
    }

    .terms {
      padding: var(--spacing-xl) 0;
    }

    .apply {
      margin-bottom: 0;

      .terms-and-conditions {
        display: inline-block;
      }
    }
  }

  .key-features {
    .rate-wrapper {
      display: unset;
    }

    .rate-container {
      margin-right: 0;
      margin-bottom: var(--spacing-l);
    }
  }
}

@media (min-width: 1232px) {
  .savings-product-page {
    .grid {
      grid-gap: var(--grid-gap);
    }

    .apply {
      padding: 0;
    }
  }

  .key-features {
    &.grid {
      grid-gap: var(--grid-gap);
    }
  }
}

@media (min-width: 1440px) {
  .savings-product-page {
    .product-information {
      padding: 0;
    }
  }
}

:root {
  counter-reset: number-stepper;
}

.number-stepper {
  .step {
    margin: 1rem 0;

    h2 {
      padding-bottom: 1rem;
    }
  }
}

.number-stepper--with-numbers {
  .step {
    margin: 1rem 0;

    &:before {
      counter-increment: number-stepper;
      content: counter(number-stepper);
      font-size: 2rem;
    }
  }
}

.step {
  margin: 1rem 0;

  .title-wrapper {
    display: flex;
    align-items: flex-end;
    margin-bottom: 2rem;
  }

  h2 {
    padding-bottom: 1rem;
    margin-bottom: 1rem;
  }
}

@media (min-width: 768px) {
  .step {
    h2 {
      font-size: var(--font-size-h4);
    }
  }
}

@media (min-width: 1440px) {
  .step {
    h2 {
      font-size: var(--font-size-h3);
    }
  }
}

@media (min-width: 1800px) {
  .step {
    h2 {
      font-size: var(--font-size-h2);
    }
  }
}

.component-table {
  table {
    border-collapse: separate;
    border-spacing: 0;
    margin: 1rem;

    tr,
    td {
      border-bottom: 2px solid black;
      border-right: 2px solid black;
      padding: 0.5rem;
    }

    th,
    td {
      margin: 2rem;
      padding: var(--spacing-s);
      width: 40rem;
    }

    tr {
      background: var(--white);

      &:first-child {
        td {
          border-top: 2px solid black;

          &:first-child {
            border-top-left-radius: 0.75rem;
          }

          &:last-child {
            border-top-right-radius: 0.75rem;
          }
        }
      }

      &:last-child {
        td {
          &:first-child {
            border-bottom-left-radius: 0.75rem;
          }

          &:last-child {
            border-bottom-right-radius: 0.75rem;
          }
        }
      }

      td {
        &:first-child {
          border-left: 2px solid black;
        }
      }

      &:nth-of-type(odd) {
        background: var(--surface-grey);
      }
    }

    .salford-royal-blue & {
      tr {
        &:first-child {
          background-color: var(--salford-blue);
          color: white;
        }
      }
    }

    .stockport-red & {
      tr {
        &:first-child {
          background-color: var(--stockport-red);
          color: white;
        }
      }
    }

    .thameside-stone & {
      tr {
        &:first-child {
          background-color: var(--thameside-stone);
        }
      }
    }

    .bolton-dark-green & {
      tr {
        &:first-child {
          background-color: var(--bolton-dark-green);
        }
      }
    }

    .wigan-yellow & {
      tr {
        &:first-child {
          background-color: var(--wigan-yellow);
        }
      }
    }

    .bury-orange & {
      tr {
        &:first-child {
          background-color: var(--bury-orange);
        }
      }
    }

    .rochdale-blue & {
      tr {
        &:first-child {
          background-color: var(--rochdale-blue);
        }
      }
    }

    .trafford-green & {
      tr {
        &:first-child {
          background-color: var(--trafford-green);
        }
      }
    }

    .oldham-pink & {
      tr {
        &:first-child {
          background-color: var(--oldham-pink);
        }
      }
    }

    .manchester-purple & {
      tr {
        &:first-child {
          background-color: var(--manchester-purple);
          color: white;
        }
      }
    }

    .bolton-dark-green & {
      tr {
        &:first-child {
          background-color: var(--bolton-green);
          color: white;
        }
      }
    }
  }

  .table-style-opening-times {
    table {
      margin: 0;
      tr,
      td {
        border: none;

        &:first-child {
          border: none;

          td {
            border: none;

            &:first-child {
              border-top-left-radius: 0;
            }

            &:last-child {
              border-top-right-radius: 0;
            }
          }
        }

        &:last-child {
          td {
            &:first-child {
              border-bottom-left-radius: 0;
            }

            &:last-child {
              border-bottom-right-radius: 0;
            }
          }
        }
      }
    }
  }
}

.two-column-list {
  margin: 2rem 0;

  .grid {
    padding: 0;

    &[class*="keyline-"] {
      padding-top: 2rem;
    }

    h5 {
      margin-bottom: 2rem;
    }
  }

  ul {
    li {
      display: flex;
      align-items: flex-start;
      margin: 1rem 0;

      svg {
        margin-right: 1rem;
        height: 0.8rem;
        margin-top: 0.625rem;
        flex-shrink: 0;

        &.tick {
          fill: var(--salford-blue);
          margin-top: 0.5rem;
        }
      }

      p {
        margin: 0;
      }
    }
  }
}

@media (min-width: 1440px) {
  .two-column-list {
    .grid {
      gap: 3rem;
    }
  }
}

.video-component {
  .container {
    display: flex;
    flex-flow: column-reverse;
    gap: 0;

    .embedded-video {
      display: flex;
      flex: 1 0 66.66%;
      justify-content: center;

      iframe {
        width: 100%;
        border-radius: 1rem;
      }

      video {
        border-radius: 1rem;
        object-fit: cover;
        width: 100%;
      }
    }

    .text-container {
      flex: 1 0 33.33%;
      padding: 2.5rem 2rem 0 2rem;
      border-radius: 1rem 1rem 0 0;
    }

    &:has(.text-container) {
      video {
        border-radius: 0 0 1rem 1rem;
      }

      iframe {
        border-radius: 0 0 1rem 1rem;
      }
    }
  }
}

.video-hover {
  .video-wrapper {
    aspect-ratio: 1.59 / 1;
    overflow: hidden;
    border-radius: var(--border-radius);
    position: relative;

    img {
      object-fit: cover;
      height: 100%;
      position: absolute;
      opacity: 1;
      z-index: 1;
      transition: all ease 0.2s;
    }

    video {
      object-fit: cover;
      position: absolute;
      width: 100%;
      height: 100%;
    }

    &:hover {
      img {
        opacity: 0;
      }
    }
  }
}

@media (min-width: 768px) {
  .video-component {
    .container {
      flex-flow: row nowrap;

      .embedded-video {
        video,
        iframe {
          max-width: 66.66%;
        }
      }

      &:has(.text-container) {
        .embedded-video {
          video,
          iframe {
            border-radius: 1rem 0 0 1rem;
            max-width: 100%;
          }
        }

        .text-container {
          border-radius: 0 1rem 1rem 0;
        }
      }
    }
  }
}

.savings-calculator {

  .question {
    margin-right: 2rem;
    margin-top: 1rem;
  }

  .years-months {
    display: flex;
    border: 0px;
  }

  .error {
    display: block;
    color: red;
  }

  .results {
    border: 2px solid;
    padding: 1rem;
  }

  .bold {
    font-weight: bold;
  }
}
.mortgages-list {
  .sort-container {
    display: flex;
    width: 100%;
    flex-direction: column-reverse;
    justify-content: space-between;
    align-items: flex-start;
  }

  .mortgages-filter {
    margin: 2rem 0;
    max-width: 20rem;

    .accordion-item {
      margin-bottom: 0.5rem;

      .checkbox {
        margin: 1rem 0.5rem;
      }

      label {
        margin-left: 0.5rem;
      }

    }
  }

  .accordion {
    .accordion-container {
      margin-top: 1rem;
      border-bottom: 0;
    }

    .accordion-button {
      border: none;
      display: flex;
      justify-content: space-between;
      padding: 0.75rem 0 0;

      img {
        transition: all 0.3s ease;
      }

      &[aria-expanded="true"] {
        img {
          transform: rotate(-180deg);
        }

      }
    }

    button {
      padding: 0.75rem 1.25rem 0.75rem 1.25rem;
    }

  }

  .product {
    border: 6px solid var(--thameside-stone);
    padding: 0;
    border-radius: 0.75rem;
    overflow: hidden;
    margin-bottom: 1rem;

    .name {
      background-color: var(--thameside-stone);
      padding: 2rem 1.25rem;
    }


    &.affordability-boost {
      border: 0.375rem solid var(--bury-orange);

      .name {
        background-color: var(--bury-orange);
      }

    }

    &.large-loans {
      border: 0.375rem solid var(--oldham-pink);

      .name {
        background-color: var(--oldham-pink);
      }

    }

    &.self-build {
      border: 0.375rem solid var(--rochdale-blue);

      .name {
        background-color: var(--rochdale-blue);
      }

    }

    &.standard {
      border: 0.375rem solid var(--trafford-green);

      .name {
        background-color: var(--trafford-green);
      }

    }

    &.custom-build {
      border: 0.375rem solid var(--wigan-yellow);

      .name {
        background-color: var(--wigan-yellow);
      }

    }

    &.interest-only {
      border: 0.375rem solid var(--thameside-stone);

      .name {
        background-color: var(--thameside-stone);
      }

    }

    .summary {
      .key-features {
        padding: 0 1.5rem;

        .feature-list {
          padding: 1rem 0;
        }

        .rate-container {
          &:last-child {
            margin-bottom: 0;
            margin-right: 0;
          }

        }

        &.grid {
          grid-gap: 0;
        }

      }

      .cta {
        display: flex;
        justify-content: flex-end;
        grid-column: span 12;
        padding-bottom: 0.5rem;
      }
    }
  }

  .hidden {
    display: none;
  }
}

@media (min-width: 768px) {
  .mortgages-list {
    .sort-container {
      justify-content: space-between;
      flex-direction: row;
      align-items: flex-end;
    }

    .accordion {
      .container {
        position: sticky;
        top: 8rem;
      }

    }

    .product {
      .summary {
        .key-features {
          padding: 2rem 1rem 1rem 0;

          .feature-list {
            padding: 0 0 0 1rem;
          }

          .rate-container {
            &:last-child {
              margin-bottom: 0;
              margin-right: unset;
            }

          }
        }

        .cta {
          padding-bottom: 0;
          padding-right: 1rem;
        }

      }
    }
  }
}

@media (min-width: 1440px) {
  .mortgages-list {
    .product {
      grid-gap: 2rem;
    }

  }
}

/* Backgrounds */
.bg-trafford-green {
  background-color: var(--trafford-green);
  color: var(--black);
}

.bg-oldham-pink {
  background-color: var(--oldham-pink);
  color: var(--black);
}

.bg-stockport-red {
  background-color: var(--stockport-red);
  color: #ffffff;
}

.bg-wigan-yellow {
  background-color: var(--wigan-yellow);
  color: var(--black);
}

.bg-salford-royal-blue {
  background-color: var(--salford-blue);
  color: #ffffff;
}

.bg-bolton-dark-green {
  background-color: var(--bolton-green);
  color: #ffffff;
}

.bg-manchester-purple {
  background-color: var(--manchester-purple);
  color: #ffffff;
}

.bg-thameside-stone {
  background-color: var(--thameside-stone);
  color: var(--black);
}

.bg-rochdale-blue {
  background-color: var(--rochdale-blue);
  color: var(--black);
}

.bg-bury-orange {
  background-color: var(--bury-orange);
  color: var(--black);
}

.bg-surface-grey {
  background-color: var(--surface-grey);
  color: var(--black);
}

.bg-black {
  background-color: var(--black);
  color: var(--white);
}

.bg-white {
  background-color: var(--white);
  color: var(--black);
}

/* Links */
.bg-trafford-green,
.bg-oldham-pink,
.bg-wigan-yellow,
.bg-thameside-stone,
.bg-rochdale-blue,
.bg-bury-orange,
.bg-surface-grey,
.bg-white {
  a {
    color: var(--black);
    text-decoration: underline;
    font-weight: 400;
    scroll-behavior: smooth;

    &.button {
      color: var(--white);
      text-decoration: none;

      &:hover,
      &:focus {
        color: var(--black);
      }

      &.button--secondary {
        color: var(--black);

        &:hover,
        &:focus {
          color: var(--white);
        }
      }

      &.button--tertiary {
        color: var(--black);
      }

      &:hover,
      &:focus {
        cursor: pointer;
        text-decoration: none;
      }
    }

    &.link,
    &.phone-number {
      text-decoration: none;
    }

    &.phone-number {
      font-weight: 700;

      &:hover,
      &:focus {
        text-decoration: underline;
        text-decoration-thickness: 0.25rem;
      }
    }
  }
}

.bg-stockport-red,
.bg-salford-royal-blue,
.bg-bolton-dark-green,
.bg-manchester-purple,
.bg-black {
  a {
    color: var(--white);
    text-decoration: underline;
    scroll-behavior: smooth;

    &:hover,
    &:focus {
      cursor: pointer;
      text-decoration: none;
    }

    &.button {
      color: var(--black);

      &:hover,
      &:focus {
        color: var(--white);
      }

      &.button--secondary {
        color: var(--white);

        &:hover,
        &:focus {
          color: var(--black);
        }
      }

      &.button--tertiary {
        color: var(--white);
      }
    }

    &.link {
      color: var(--white);
      border-color: var(--white);
      transition: all 0.3s ease;

      &:hover,
      &:focus {
        color: var(--white);
      }

      .shaft,
      .point {
        transition: all 0.3s ease;
        stroke: var(--white);
      }
    }

    &.button,
    &.button--secondary,
    &.button--tertiary,
    &.link,
    &.phone-number {
      text-decoration: none;
    }

    &.phone-number {
      font-weight: 700;
      text-decoration: none;

      &:hover,
      &:focus {
        text-decoration: underline;
        text-decoration-thickness: 0.25rem;
      }
    }
  }
}

/* Phone Numbers */
.bg-trafford-green,
.bg-oldham-pink,
.bg-wigan-yellow,
.bg-thameside-stone,
.bg-rochdale-blue,
.bg-bury-orange,
.bg-surface-grey,
.bg-white {
  .phone-number {
    color: var(--black);
  }
}

.bg-stockport-red,
.bg-salford-royal-blue,
.bg-bolton-dark-green,
.bg-manchester-purple,
.bg-black {
  .phone-number {
    color: #ffffff;
  }
}

/* Buttons */
.bg-stockport-red,
.bg-salford-royal-blue,
.bg-bolton-dark-green,
.bg-manchester-purple,
.bg-black {
  button,
  .button {
    border: 2px solid #ffffff;
    color: var(--black);
    background-color: #ffffff;

    svg {
      .shaft,
      .point {
        stroke: var(--black);
      }
    }

    &:hover,
    &:focus {
      color: #ffffff;
      background-color: var(--black);

      svg {
        .shaft,
        .point {
          stroke: #ffffff;
        }
      }
    }

    &:focus-visible {
      outline: 0.125rem solid yellow;
      outline-offset: 0.125rem;
      box-shadow: 0 0 0 0.125rem blue;
    }

    &.button--secondary {
      border: 0.125rem solid #ffffff;
      color: #ffffff;
      background-color: transparent;

      svg {
        .shaft,
        .point {
          stroke: #ffffff;
        }
      }

      &:hover,
      &:focus {
        color: var(--black);
        background-color: #ffffff;

        svg {
          .shaft,
          .point {
            stroke: var(--black);
          }
        }
      }
    }

    &.button--tertiary {
      border: none;
      background-color: transparent;
      color: #ffffff;
      border-bottom: 2px solid #ffffff;
      margin: 0.25rem 0;

      svg {
        .shaft,
        .point {
          stroke: #ffffff;
        }
      }
    }

    &.accordion-button {
      svg {
        path {
          fill: var(--white);
        }
      }

      &:hover,
      &:focus {
        background-color: unset;
      }
    }
  }
}

/* Keyline colours */
.keyline-surface-grey {
  border-top: 0.5rem solid var(--surface-grey);

  &.keyline-bottom {
    border-top: none;
    border-bottom: 0.5rem solid var(--surface-grey);
  }
}

.keyline-black {
  border-top: 0.5rem solid var(--black);

  &.keyline-bottom {
    border-top: none;
    border-bottom: 0.5rem solid var(--black);
  }
}

.keyline-white {
  border-top: 0.5rem solid var(--white);

  &.keyline-bottom {
    border-top: none;
    border-bottom: 0.5rem solid var(--white);
  }
}

.keyline-stockport-red {
  border-top: 0.5rem solid var(--stockport-red);

  &.keyline-bottom {
    border-top: none;
    border-bottom: 0.5rem solid var(--stockport-red);
  }
}

.keyline-salford-royal-blue {
  border-top: 0.5rem solid var(--salford-blue);

  &.keyline-bottom {
    border-top: none;
    border-bottom: 0.5rem solid var(--salford-blue);
  }
}

.keyline-bolton-dark-green {
  border-top: 0.5rem solid var(--bolton-green);

  &.keyline-bottom {
    border-top: none;
    border-bottom: 0.5rem solid var(--bolton-green);
  }
}

.keyline-manchester-purple {
  border-top: 0.5rem solid var(--manchester-purple);

  &.keyline-bottom {
    border-top: none;
    border-bottom: 0.5rem solid var(--manchester-purple);
  }
}

.keyline-thameside-stone {
  border-top: 0.5rem solid var(--thameside-stone);

  &.keyline-bottom {
    border-top: none;
    border-bottom: 0.5rem solid var(--thameside-stone);
  }
}

.keyline-wigan-yellow {
  border-top: 0.5rem solid var(--wigan-yellow);

  &.keyline-bottom {
    border-top: none;
    border-bottom: 0.5rem solid var(--wigan-yellow);
  }
}

.keyline-bury-orange {
  border-top: 0.5rem solid var(--bury-orange);

  &.keyline-bottom {
    border-top: none;
    border-bottom: 0.5rem solid var(--bury-orange);
  }
}

.keyline-rochdale-blue {
  border-top: 0.5rem solid var(--rochdale-blue);

  &.keyline-bottom {
    border-top: none;
    border-bottom: 0.5rem solid var(--rochdale-blue);
  }
}

.keyline-trafford-green {
  border-top: 0.5rem solid var(--trafford-green);

  &.keyline-bottom {
    border-top: none;
    border-bottom: 0.5rem solid var(--trafford-green);
  }
}

.keyline-oldham-pink {
  border-top: 0.5rem solid var(--oldham-pink);

  &.keyline-bottom {
    border-top: none;
    border-bottom: 0.5rem solid var(--oldham-pink);
  }
}

.fade-in {
  opacity: 0;
  transform: translateY(4rem);
  transition: opacity 1s ease, transform 1s ease;
}

.fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}

.fade-in.no-animation {
  transition: none; 
}