.is-a-page-template {

  #main {
    background-color: var(--page-background-colour, transparent);

    @media (width >= 768px) {
      --container-gutter: 16px;
    }

    > * {
      color: var(--page-text-colour, #000000);
      fill: var(--page-text-colour, #000000);
    }

  }

  .about-us {
    --container-gutter: 24px;

    h1, h2, h3, h4, h5, h6 {
      text-transform: uppercase;
    }

    h3 {
      font-size: 30px;

      @media (width >= 768px) {
        font-size: 48px;
      }
    }
  }

  .page-banner {
    display: grid;
    grid-template-areas: "page_banner";
    margin: auto;
    position: relative;
    place-items: center;
    width: 100%;

    & > * {
      grid-area: page_banner;
    }

    .absolute {
      position: absolute;
    }

    .relative {
      position: relative;
    }

    h1, h2, h3 {
      font-size: 24px;
      line-height: 1;
      margin-block: 0;
      margin-inline: var(--container-gutter);
      text-box-edge: cap alphabetic;
      text-box-trim: trim-both;

      @media (width >= 360px) {
        font-size: 30px;
      }
      @media (width >= 768px) {
        font-size: 73px;
      }
    }

    .page-banner__logo {
      display: inline-block;
      width: auto;
    }

    .container {

      @media (width < 768px) {
        &:has(.page-banner__logo) {
          padding-inline: var(--container-gutter);
        }
      }

      @media (width >= 768px) {
        &:not(:has(.page-banner__logo)) {
          padding-inline: var(--container-gutter);
        }
      }
    }

    .page-banner__logo--m {
      height: 1em;
      margin-inline-end: 0.015em;
      transform: translateY(-2px);
      vertical-align: text-top;
    }

    .page-banner__logo--x {
      height: 1em;
      margin-inline-start: -0.15em;
      transform: translateY(2px);
      vertical-align: text-bottom;
    }

    .page-banner__logo-image {
      display: inline-block;
      height: auto;
      max-width: 470px;
      margin-inline-start: -20px;
      transform: translateY(-6px);
      vertical-align: middle;

      @media (width < 768px) {
        max-width: 190px;
        margin-inline-start: -10px;
        transform: translateY(-2px);
      }
    }

    picture {
      display: block;

      img {
        aspect-ratio: var(--image-aspect-mob, 3/1);
        height: auto;
        max-height: 200px;
        object-fit: var(--image-aspect-mob, cover);
        object-position: var(--image-position-mob, center);

        @media (width >= 768px) {
          aspect-ratio: var(--image-aspect-dsk, 3/1);
          max-height: 400px;
          object-fit: var(--image-aspect-dsk, cover);
          object-position: var(--image-position-dsk, center);
        }
      }
    }
  }


  .page-content-section {
    gap: 32px;
    margin-inline: auto;
    max-inline-size: 1520px;
    padding-block: var(--padding-top-mob, 24px) var(--padding-bottom-mob, 24px);
    padding-inline: 0;

    &.image-not-full-width-mob {
      padding-inline: var(--container-gutter);

      .page-content-text {
        padding-inline: 0;
      }
    }

    @media (width >= 768px) {
      &.no-gap {
        gap: 0;
      }
    }

    @media (width >= 768px) {
      padding-block: var(--padding-top-dsk, 40px) var(--padding-bottom-dsk, 40px);
      padding-inline: unset;
    }

    p {
      font-size: 14px;
      font-weight: 600;

      &:not(:last-child) {
        margin-block-end: 16px;
      }

      @media (width >= 768px) {
        font-size: 16px;
      }
    }

    h2, h3, p {
      line-height: 1;
      margin-block: 0;

      @media (width >= 768px) {
        line-height: 1.2;
      }
    }

    h2, h3 {
      margin-block-end: 16px;
      text-transform: uppercase;
      text-wrap: balance;
    }

    h2 {
      font-size: 30.673px;
    }

    h3 {
      font-size: 30px;

      @media (width >= 768px) {
        font-size: 48px;
      }
    }

    .page-content-text {
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding-inline: var(--container-gutter);
      text-align: left;

      @media (width >= 768px) {
        margin-inline-end: var(--container-gutter);
        padding-block: 0;
      }

      @media (width >= 1520px) {
        padding-inline: 0;
      }

      .page-content-heading {
        margin-block-end: 16px;
      }

      .page-content-text-vertical {
        transform: rotate(90deg);
      }
    }

    &.page-content-section--body-vertical {
      overflow: visible;
      position: relative;
      z-index: 2;

      .page-content-text {
        overflow: visible;
        position: relative;
      }

      .page-content-text-vertical {
        inline-size: calc(100% + 100px);
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%) rotate(90deg);
        transform-origin: center;
        z-index: 3;

        p {
          white-space: normal;
        }
      }

      @media (max-width: 1199px) {
        .page-content-text-vertical {
          inline-size: auto;
          position: static;
          transform: none;
        }
      }
    }

    &.section-has-image {
      display: grid;

      picture {
        display: block;

        img {
          width: 100%;
          height: auto;
          aspect-ratio: var(--page-content-image-aspect-mob, 3/4);
          object-fit: var(--page-content-image-fit-mob, cover);
          object-position: var(--page-content-image-position-mob, center center);

          @media (width >= 768px) {
            aspect-ratio: var(--page-content-image-aspect-dsk, 16/9);
            object-fit: var(--page-content-image-fit-dsk, cover);
            object-position: var(--page-content-image-position-dsk, center center);
          }
        }
      }

      &:not(.no-gap) {
        @media (width >= 768px) {
          gap: clamp(48px, 4vw, 64px);
        }
      }

      &.no-gap {
        img {
          max-width: 100%;
        }

        @media (width >= 768px) {
          .page-content-text {
            padding-inline: 0;
            margin-inline-end: 0;
          }
        }
      }


      &[data-page-content-section-layout-mob="image-then-text-mob"] {
        picture {
          order: 1;
        }

        .page-content-text {
          order: 2;
        }
      }

      &[data-page-content-section-layout-mob="text-then-image-mob"] {
        picture {
          order: 2;
        }

        .page-content-text {
          order: 1;
        }
      }

      @media (width >= 768px) {
        &[data-page-content-section-layout-dsk="text-then-image-dsk"][data-page-content-section-share-split-dsk="image-40-text-60-dsk"]{
          grid-template-columns: 3fr 2fr;

          picture {
            order: 2;
          }

          .page-content-text {
            order: 1;
          }
        }

        &[data-page-content-section-layout-dsk="text-then-image-dsk"][data-page-content-section-share-split-dsk="image-60-text-40-dsk"]{
          grid-template-columns: 2fr 3fr;

          picture {
            order: 2;
          }

          .page-content-text {
            order: 1;
          }
        }

        &[data-page-content-section-layout-dsk="image-then-text-dsk"][data-page-content-section-share-split-dsk="image-40-text-60-dsk"]{
          grid-template-columns: 2fr 3fr;

          picture {
            order: 1;
          }

          .page-content-text {
            order: 2;
          }
        }

        &[data-page-content-section-layout-dsk="image-then-text-dsk"][data-page-content-section-share-split-dsk="image-60-text-40-dsk"]{
            grid-template-columns: 3fr 2fr;

            picture {
              order: 1;
            }

            .page-content-text {
              order: 2;
            }
        }
      }

    }
  }


  .page-tab-groups {
    background: var(--page-tab-groups-background, #000000);
    color: var(--page-tab-groups-foreground, #ffffff);
    padding-block: 32px;

    @media (width >= 768px) {
      padding-block: 40px;
    }

    .container {
      max-width: 1520px;
      padding-inline: 0;

      @media (768px > width < 1520px) {
        padding-inline: var(--container-gutter);
      }

      @media (width >= 1520px) {
        padding-inline: 0;
      }

      @media (width < 768px) {
        > * {
          padding-inline: var(--container-gutter);
        }
      }
    }

    /* Heading */
    .page-tab-groups__header {
      margin-block-end: 24px;

      @media (width >= 768px) {
        margin-block-end: 32px;
        margin-inline: var(--container-gutter);
      }

      @media (width >= 1200px) {
        margin-block-end: 48px;
      }

      .page-tab-groups__heading {
        color: inherit;
        font-size: 30.673px;
        font-weight: 700;
        padding-bottom: 16px;

        @media (width >= 768px) {
          font-size: 73px;
        }
      }
    }

    /* Nav */
    .page-tab-groups__nav {
      margin-bottom: 48px;

      @media (width >= 768px) {
        padding-inline-start: var(--container-gutter);
      }

      @media (width >= 1200px) {
        margin-bottom: 56px;
      }

      &.tabs-nav--edge2edge {
        margin-inline: 0;
        .tabs-nav__scroller-inner {
          padding-inline: 0;
        }

      }

      .tabs-nav__scroller {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        position: relative;
      }

      .tabs-nav__scroller.is-scrollable {
        perspective: 1px;
      }

      .tabs-nav__item-list {
        box-shadow: none;
        gap: 0;
      }

      .tabs-nav__position {
        display: none;
      }

      .page-tab-groups__tab {
        border: 1px solid transparent;
        color: inherit;
        font-size: 30.916px;
        font-weight: 700;
        line-height: 1;
        padding: 20px 24px;
        min-width: 120px;
        text-align: center;
        transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;

        @media (max-width: 767px) {
          /* Show 2.5 items in viewport with proper padding */
          /* Reduced to ~35vw to ensure clear visibility of the 3rd item at 50% */
          width: 36.5vw;
        }

        &[aria-expanded="true"] {
          background: #ffffff;
          border-color: #ffffff;
          color: #000000;
        }

        @media (width >= 1200px) {
          font-size: 48px;
          line-height: 1.08333em;
          min-width: 188px;
          padding: 24px 32px;
        }
      }
    }

    /* Tab Content */
    .page-tab-groups__panels {
      position: relative;
      padding-inline: 0;

      .page-tab-group__content {
        color: inherit;
        display: flex;
        flex-direction: column-reverse;
        gap: 24px;

        @media (width >= 1200px) {
          align-items: center;
          display: grid;
          gap: 56px;
          grid-template-columns: minmax(280px, 1fr) minmax(0, 1.35fr);
        }

        /* Text */
        .page-tab-group__text {
          align-self: center;
          padding-inline: var(--container-gutter);

          @media (width >= 1520px) {
            padding-inline-start: 0;
          }

          .page-tab-group__body,
          .page-tab-group__body p,
          .page-tab-group__body a {
            color: inherit;
          }

          .page-tab-group__body p {
            font-weight: 600;
            line-height: 1;

            @media (width >= 768px) {
              font-size: 16px;
              line-height: 1.625em;
            }

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

      /* Media */
      .page-tab-group__media {
        min-width: 0;

        .page-tab-group__gallery {
          --page-tab-gallery-peek: 20px;
          --page-tab-gallery-gap: 8px;
          display: grid;
          gap: var(--page-tab-gallery-gap);
          grid-auto-columns: calc(100% - var(--page-tab-gallery-peek) - var(--page-tab-gallery-gap));
          grid-auto-flow: column;
          overflow-x: auto;
          overscroll-behavior-inline: contain;
          scroll-snap-type: x mandatory;

          @media (width >= 1200px) {
            grid-auto-columns: calc(100% - var(--page-tab-gallery-peek));
          }

          .page-tab-group__gallery-item {
            scroll-snap-align: start;

            .page-tab-group__image {
              display: block;
              width: 100%;
              height: auto;
              aspect-ratio: 370/250;
              object-fit: cover;
            }
          }
        }
      }
    }
  }
}