.c-stallion-hero {

  /* LAYOUT */

  @media (width < 1024px) {
    .tabs {
      display: none;
    }

    .panel:not(:first-child) > picture img {
      display: none;
    }

    .panel .container .content {
      padding: calc(var(--default-spacing) * 2);
      background-color: white;
    }

    .panel[data-tab="news"] {
      display: none;
    }
  }

  @media (width >= 1024px) {
    --z-index--background-image: -1;
    --z-index--background-color: 0;
    --z-index--panel: 1;
    --z-index--content: 2;
    --z-index--tabs: 3;

    --content-width: 50%;
    --content-width-multiplier: 0.5;
    @media (width >= 1280px) {
      --content-width: 40%;
      --content-width-multiplier: 0.4;
    }

    position: relative;
    width: 100%;
    max-width: 1920px;
    margin-inline: auto;
    aspect-ratio: 2.4 / 1;

    .tab-group {
      display: grid;
      min-height: 100%;
      grid-template-rows: minmax(0, 1fr) auto;

      .tabs {
        order: 1;
        position: relative;
        z-index: var(--z-index--tabs);
        margin: 0 auto calc(var(--default-spacing) * 3);
        background: rgb(231 240 254 / .92);
        display: flex;
        flex-wrap: nowrap;
        align-items: stretch;
        border-radius: 9999px;
        padding: 5px;
        width: fit-content;
        line-height: 17px;
        gap: 5px;


        .tab {
          text-align: center;
          box-sizing: border-box;
          border-radius: 9999px;
          overflow: hidden;
          padding: var(--default-spacing);
          cursor: pointer;

          @media screen and (min-width: 48em) {
            padding: var(--default-spacing) calc(var(--default-spacing) * 3);
          }

          &:last-child {
          }

          &:only-child {
            display: none;
          }

          &.active {
            font-weight: bold;
            background-color: white;
            color: var(--color-medium-blue);
          }

          &:hover:not(.active) {
            background-color: rgba(255, 255, 255, 0.8);
            color: var(--color-medium-blue);
          }
        }
      }

      .panels {
        display: grid;
        align-items: stretch;
        grid-auto-rows: minmax(0, auto);

        .panel {
          --container-padding-block : 8vh;
          &[data-content-width="full"] {
            --container-padding-block : 4vh;
          }

          z-index: var(--z-index--panel);
          grid-area: 1 / 1;
          visibility: hidden; /* Hide panels by default - retain space, but not click/selectable */
          opacity: 0; /* Hide VideoJS controls */

          display: grid;
          align-items: stretch;
          height: 100%;

          &.active {
            visibility: visible;
            opacity: 1;
          }

          > picture img {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            z-index: var(--z-index--background-image);
            object-fit: cover;
            object-position: center;
          }
          &[data-image-position="left"] > picture img {
            object-position: left;
          }
          &[data-image-position="right"] > picture img {
            object-position: right;
          }

          .container {
            box-sizing: border-box;
            display: grid;
            align-items: center;
            width: 100%;
            height: 100%;
            margin-inline: auto;
            padding: var(--container-padding-block) calc(var(--default-spacing) * 2);

            .content {
              z-index: var(--z-index--content);
              padding: calc(var(--default-spacing) * 2);
              background-color: white;
            }
          }
        }

        .panel[data-layout="overlay"] {
          .container {
            max-width: 1280px;

            .content {
              width: var(--content-width);
            }
          }
        }

        .panel[data-layout="split"] {
          &[data-image-width="split"] {
            > picture img {
              width: calc(100% - var(--content-width));
            }
            &[data-content-align="left"] > picture img {
              inset-inline-start: var(--content-width);
            }
            &[data-content-align="right"] > picture img {
              inset-inline-end: var(--content-width);
            }
          }

          .container {
            .content {
              box-sizing: border-box;
              width: calc(((100% + (var(--default-spacing) * 1)) * var(--content-width-multiplier)) - (var(--default-spacing) * 1));
            }
          }
        }

        .panel[data-content-align="right"] {
          .container {
            .content {
              margin-inline-start: auto;
            }
          }
        }

        /* Split layout background */

        :is(.tab-group, .panel[data-layout="split"])::before {
          position: absolute;
          inset: 0;
          content: "";
          z-index: var(--z-index--background-color);
          background: linear-gradient(to right, white var(--content-width), transparent var(--content-width));
          pointer-events: none;
        }

        :is(.tab-group:has(.panel.active[data-layout="split"][data-content-align="right"]), .panel.active[data-layout="split"][data-content-align="right"])::before {
          background: linear-gradient(to left, white var(--content-width), transparent var(--content-width));
        }

        /** Content width **/

        .panel[data-content-width="full"] .container .content {
          --content-width: 100%;

          padding: 0;
          max-width: 960px;
          margin-inline: auto;
        }
      }
    }
  }

  /* CONTENT */

  /** Overview **/

  .panel[data-tab="overview"] .content {
    &, p {
      line-height: 1.5;
    }

    .overview-1 {
      margin-bottom: calc(var(--default-spacing) * 2);
    }

    .header-4-jp-desktop {
      display: none;
    }

    @media (width >= 1024px) {
      .header-4-jp-tab-mob {
        display: none;
      }

      .header-4-jp-desktop {
        display: block;
      }
    }

    .ctas {
      margin: calc(var(--default-spacing) * 2) calc(var(--default-spacing) * -2) calc(var(--default-spacing) * -2);
      padding: calc(var(--default-spacing) * 2);
      background-color: var(--color-light-blue);

      .call {
        margin-top: calc(var(--default-spacing));

        svg {
          padding-right: calc(var(--default-spacing) / 2);
          float: left;
        }

        span {
          display: inline-block;
        }

        a {
          color: var(--color-black);

          &:hover {
            text-decoration: underline;
          }

          @media screen and (max-width: 64em) {
            display: block;
          }
        }
      }

      .buttons {
        display: grid;
        gap: calc(var(--default-spacing) * 1);
        grid-template-columns: 1fr;

        &:has(>div:nth-of-type(2)) {
          @media (width >= 568px) {
            grid-template-columns: 1fr 1fr;
          }
        }

        [data-component-id="drly:button"], .button {
          box-sizing: border-box;
          width: 100%;
          text-align: center;
        }
      }
    }
  }
  .panel[data-tab="overview"] .content {
    @media (width < 1024px) {
      position: relative;
      margin-block-start: calc(var(--default-spacing) * -4);
      margin-inline: calc(var(--default-spacing) * 2);
      box-shadow: 2px 4px 10px 1px rgba(0, 0, 0, 0.10);
    }
  }
  .panel[data-tab="overview"][data-layout="split"] .content .ctas {
    @media (width >= 1024px) {
      background-color: var(--color-white) !important;
    }
  }

  /** News **/

  .panel[data-tab="news"] .content {
    .field--name-node-post-date, .field-name-node-title, p {
      font-size: var(--h3-size);
      color: var(--color-black);
      font-family: var(--sans-serif);
      font-weight: 400;
      line-height: 1;
    }

    .field-name-node-title h2 {
      font-size: var(--h3-size);
      font-family: var(--sans-serif);
      margin-bottom: calc(var(--default-spacing) * 2);
    }

    .field--name-node-post-date {
      margin-bottom: 0.6em;
      text-transform: uppercase;
    }

    .field-name-node-title a {
      color: var(--color-medium-blue);
      font-weight: 500;
      text-decoration: none;

      &:hover, &:active {
        text-decoration: underline;
        text-shadow: none;
      }
    }

    .field--name-field-standfirst {
      color: var(--color-medium-blue);
      font-family: var(--sans-serif);
      font-size: 16px;
      font-weight: 700;
      line-height: 24px;
      margin-bottom: calc(var(--default-spacing) * 2);
    }

    p {
      font-size: var(--p-size);
      line-height: 1.5;
    }

    .field--name-node-link {
      margin-top: calc(var(--default-spacing));

      a {
        color: var(--color-black);
        text-decoration: underline;
        font-weight: 400;

        &:hover {
          text-shadow: 0 0 0.5px var(--color-black);
        }
      }
    }

    a {
      color: var(--color-black);
      text-decoration: underline;
      font-weight: 400;

      &:hover {
        text-shadow: 0 0 0.5px var(--color-black);
      }
    }
  }

  /** Quotes **/

  .panel[data-tab="quotes"] .content {
    .flickity-slider > .field__item {
      padding-left: 45px;

      &:before {
        content: '“';
        display: block;
        font-family: var(--serif);
        color: var(--color-medium-blue);
        font-size: 160px;
        font-weight: 500;
        line-height: 1;
        height: 60px;
        overflow: hidden;
        margin-left: -45px;
        margin-bottom: 20px;
      }

      @media (max-width: 64em) {
        padding-left: 0;

        &:before {
          margin-left: -8px;
        }
      }
    }

    .field--name-field-carousel-body {
      color: var(--color-medium-blue);
      font-family: var(--serif);
      font-size: 24px;
      font-weight: 500;
      line-height: 28px;

      @media (max-width: 64em) {
        font-size: 16px;
        line-height: 20px;
      }
    }

    .field--name-field-signature, .field--name-field-carousel-title {
      margin-top: calc(var(--default-spacing));
      color: var(--color-black);
      font-family: var(--sans-serif);
      font-size: 24px;
      font-weight: 400;
      line-height: 28px;

      @media (max-width: 64em) {
        margin-top: calc(var(--default-spacing) * 2);
        font-size: 16px;
        line-height: 20px;
      }
    }
  }

  /** Statistics **/

  .panel[data-tab="statistics"] .content {
    .field__item {
      text-align: center;

      .field--name-field-number-statistic {
        color: var(--color-medium-blue);
        font-size: 160px;
        font-weight: 500;
        font-family: var(--serif);
        line-height: 1.2;

        @media (max-width: 64em) {
          font-size: 80px;
        }
      }

      .field--name-field-carousel-body {
        color: var(--color-medium-blue);
        text-align: center;
        font-family: var(--serif);
        font-size: 40px;
        font-weight: 500;
        line-height: 1.2;

        @media (max-width: 64em) {
          font-size: 24px;
        }
      }
    }
  }
}