@import url('../form/form.css');

.section.columns-container {
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  p {
    margin: 0;
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    a {
      text-decoration: none;
    }
  }
}

.section.benefits-container.columns-container,
.section.empbenefits-container {
  background-color: var(--color-medium-grey);
}

.section.empbenefits-container.three-col-text.existing.columns-container {
  background-color: white;
  padding-top: unset;
}

.columns > div {
  display: flex;
  flex-direction: column;
}

.columns img {
  width: 100%;
}

.columns iframe {
  width: 100%;
  aspect-ratio: 2;
}

.columns > div > div {
  order: 1;
}

.columns > div > .columns-img-col {
  order: 0;
}

.columns > div > .columns-img-col img {
  display: block;
}

.section.three-col-text .columns > div {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.section.semicircle-image .columns-img-col img,
.section.rectangle-image .columns-img-col img {
  border-radius: 0.5rem;
  max-width: 680px;
  max-height: 400px;
  aspect-ratio: 1.3;
  object-fit: cover;
}

.section.semicircle-image .columns-img-col img {
  border-radius: 0;
}

.section.rectangle-image .columns-img-col img,
.section.columns-container .columns-2-cols img,
.section.columns-container .columns-3-cols img {
  border-radius: 8px !important;
}

.section.semicircle-image .columns > div,
.section.rectangle-image .columns > div {
  gap: 2rem;
}

/* two-col-text */
.section.article-card {
  padding: var(--spacing-l) var(--spacing-xs);
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  background-color: var(--bg-color-paper);
  margin: 32px 0;

  h3 {
    font-weight: 700;
    font-size: var(--font-size-l);
    line-height: 2rem;
    margin-top: var(--spacing-xs);
  }

  /* stylelint-disable */
  p {
    text-align: left;
    margin-top: var(--spacing-xs);
    font-size: var(--font-size-xs);
    line-height: 1.5rem;
    font-weight: 400;
    color: var(--color-grey);
  }
  /* stylelint-enable */

  p.button-container {
    margin-top: auto;

    a {
      margin: var(--spacing-xs) 0 0 0;
      display: flex;
      width: max-content;
      gap: 0.5rem;
    }

    a::after {
      content: url('../../icons/chevron-right-white.svg');
      width: 1.5rem;
      height: 1.5rem;
      font-size: var(--font-size-l);
    }
  }

  p:nth-child(1) {
    margin-top: 0;
  }

  p:nth-child(2) {
    color: var(--color-pink);
    font-weight: var(--heading-font-weight);
    margin-top: var(--spacing-m);
  }

  .block > div {
    gap: 1.5rem;
    height: 100%;
    align-items: stretch;
  }

  @media (width >= 1024px) {
    gap: 4rem;
    margin: 48px 0;

    h3 {
      font-size: var(--font-size-l-alt);
      line-height: 2.5rem;
    }

    p {
      font-size: var(--font-size-s);
      line-height: 2rem;
    }

    .block > div {
      gap: 4rem;
    }
  }
}

.section.semicircle-image .columns {
  > div {
    p {
      &.button-container {
        a.button:not(.primary, .secondary),
        a.button:not(.primary, .secondary):hover,
        a.button:not(.primary, .secondary):focus,
        a.button:not(.primary, .secondary):active {
          line-height: var(--line-height);
          font-size: var(--font-size-xs);
          background-color: transparent;
          color: var(--color-black);
          text-decoration: underline;
          padding: 0;
          border: 0;
          outline: 0;
          display: flex;
          align-items: center;
          width: fit-content;

          &::after {
            padding-left: 8px;
            background: url('../../icons/arrow-down.svg') center center no-repeat;
            content: '';
            display: block;
            width: 20px;
            height: 20px;
          }
        }

        a.button:not(.primary, .secondary):hover {
          color: var(--link-hover-color);

          &::after {
            background-image: url('../../icons/chevron-right-orange-bold.svg');
            transform: rotate(90deg);
          }
        }

        a.button:not(.primary, .secondary):any-link:focus {
          outline: 2px solid var(--color-focus-outline);
        }
      }
    }
  }
}

.section.three-cards {
  gap: 2.5rem;

  h2 {
    font-weight: 700;
    font-size: var(--font-size-l-alt);
    line-height: 2.5rem;
  }

  .default-content-wrapper {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    text-align: left;
    width: 100%;

    /* stylelint-disable */
    p {
      margin-top: 0;
      color: var(--color-grey);
      font-weight: 400;
    }
    /* stylelint-enable */
  }

  .columns > div {
    gap: 1rem;

    > div {
      padding: var(--font-size-lg);
    }
  }

  @media (width >= 1024px) {
    padding: var(--spacing-xl-l) var(--spacing-xxl-l);
    gap: 3rem;

    h2 {
      font-size: var(--font-size-lg);
      line-height: 3rem;
    }

    .default-content-wrapper {
      p {
        font-size: var(--font-size-s);
        line-height: 2rem;
      }
    }
  }
}

.section.article-card .columns-2-cols {
  p:nth-child(5) {
    font-weight: 600;
    margin-top: 8px;
    display: flex;
    gap: 8px;
    align-items: center;
  }

  h5::before {
    content: url('../../icons/Clock.svg');
    width: 20px;
    height: 20px;
    font-size: 20px;
    margin-left: -1px;
  }

  @media (width >= 1024px) {
    p:nth-child(5) {
      align-items: flex-start;
    }
  }
}
/* stylelint-disable */
.section.semicircle-image .columns > div > div,
.section.rectangle-image .columns > div > div {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  line-height: 1.5rem;
  font-size: var(--font-size-xs);

  h2 {
    font-size: var(--font-size-l-m);
    line-height: var(--font-size-l-alt);
    font-weight: var(--font-weight-bold);
  }

  h3,
  h4 {
    font-size: var(--font-size-l);
    font-family: var(--font-family-bold);
    color: var(--color-black);
    line-height: 32px;
  }

  h5 {
    font-weight: 600;
    margin-top: var(--spacing-xxxs);
    display: flex;
    gap: 0.5rem;
    align-items: center;
    font-size: 16px;
    line-height: 24px;
    color: var(--color-grey-alt);
    font-family: var(--font-family-bold);
  }

  h5::before {
    content: url('../../icons/Clock.svg');
    width: var(--spacing-xs-l-alt);
    height: var(--spacing-xs-l-alt);
    font-size: var(--font-size-m);
  }

  p {
    line-height: var(--line-height);
    font-size: var(--font-size-xs);
  }
}
/* stylelint-enable */

.section.article-card .block > div > div {
  background-color: var(--color-white);
  padding: 24px;
  border: 1px solid var(--border-color);
  border-radius: 0.5rem;
  display: flex;
  flex-direction: column;

  img {
    height: 144px;
    aspect-ratio: 1.82;
    width: auto;
    object-fit: fill;
  }

  @media (width >= 1024px) {
    border-radius: 1rem;
    padding: var(--spacing-m);
    flex: 1;

    p:nth-child(2) {
      margin-top: 40px;
    }

    img {
      height: 180px;
      aspect-ratio: 1.86;
    }
  }
}

/* three-col-text | whats included */
/* stylelint-disable */

.section.content-left {
  .columns > div > div {
    text-align: left;

    a {
      display: block;
    }
  }
}

/* semicircle image varation */
.section.semicircle-image .columns,
.section.rectangle-image .columns {
  padding: var(--spacing-s);
  background-color: var(--bg-color-paper);
  border-radius: 0.5rem;

  @media (width >=768px) {
    padding: var(--spacing-l);
    border-radius: 1rem;

    > div {
      gap: 2.5rem;

      > div {
        p {
          &.button-container {
            margin-top: var(--spacing-xs);
          }
        }

        h2,
        h3,
        h4 {
          font-size: var(--font-size-l-m);
          font-family: var(--font-family-bold);
          line-height: var(--line-height-m-l);
        }

        &.columns-img-col {
          img {
            aspect-ratio: 1.96;
            border-radius: 0;
          }
        }
      }
    }
  }

  /* stylelint-enable*/

  @media (width >=1024px) {
    padding: var(--spacing-xl) var(--spacing-m) var(--spacing-xl) var(--spacing-xl);

    > div {
      flex-direction: unset;
      gap: 96px;

      > div {
        flex: 1;
        order: unset;

        &:nth-child(1) {
          width: 35%;
          gap: 1rem;
        }

        &.columns-img-col {
          flex-grow: 2;

          img {
            aspect-ratio: 1.7;
          }
        }
      }
    }
  }
}

.section.sp-car-video-section .columns {
  div > div {
    p:first-child {
      color: var(--color-brand);
    }
  }
}

.section.left-bg-grey .columns {
  background-color: transparent;

  /* stylelint-disable */
  & > div {
    align-items: flex-start;

    & > div:first-child {
      padding: var(--spacing-s);
      background-color: var(--bg-color-paper);
      border-radius: 0.5rem;

      @media (width >= 1024px) {
        width: 48%;
        border-radius: 1rem;
        padding: var(--spacing-xl);
      }
    }

    & > div:last-child {
      padding: var(--spacing-s);
      border-radius: 0.5rem;
      border: 1px solid var(--border-color-alt);

      @media (width >= 1024px) {
        padding: var(--spacing-l);
      }

      form {
        border: 0;
        border-radius: 0;
        padding: 0;

        @media (width >= 768px) {
          grid-template-columns: 1fr 1fr;
        }
      }
    }
  }
  /* stylelint-enable */
}

.section.half-cols-section .columns {
  @media (width >= 1024px) {
    & > div {
      & > div {
        &:nth-child(1) {
          width: 48%;
          flex: none;
        }
      }
    }
  }
}

.section.txt-highlight.left .columns,
.section.txt-highlight.right .columns {
  div > div {
    p strong {
      color: var(--color-brand);
    }
  }
}

/* text-block variation */
.section.text-block {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
  background: var(--bg-color-paper);
  font-size: var(--font-size-xs);
  line-height: 1.5rem;
  margin: 32px 0;

  .columns-wrapper .columns {
    > div > div {
      display: flex;
      flex-direction: column;
      gap: 1rem;

      p {
        padding: 0 var(--spacing-xs);
        margin-bottom: 0;
      }

      p:first-child {
        font-size: var(--font-size-s);
        font-family: var(--font-family-bold);
        color: var(--color-black);

        @media (width >= 768px) {
          line-height: 2rem;
          font-size: var(--font-size-m);
        }
      }
    }
  }

  .columns-wrapper .columns-3-cols {
    > div > div {
      width: 33%;
    }
  }

  div.default-content-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;

    p img {
      width: 100%;
      padding: 0 16px;
      display: block;
      box-sizing: border-box;
    }
    /* stylelint-disable */
    h2 {
      font-size: var(--font-size-l-alt);
      line-height: 2.5rem;
      padding: 0 var(--spacing-xs);
      margin: 0;

      @media (width >= 768px) {
        font-size: 40px;
        line-height: 48px;
      }
    }
    /* stylelint-enable */
  }

  .columns-wrapper {
    /* stylelint-disable */
    .columns div {
      gap: 1.5rem;
    }
    /* stylelint-enable */
  }

  @media (width >= 768px) {
    &.columns-container {
      /* padding: var(--spacing-l-alt) var(--spacing-xxl-l); */
      margin: 0;
    }

    .default-content-wrapper {
      text-align: center;

      h3 {
        padding: 0 var(--spacing-xxxl);
        font-size: var(--font-size-lg);
        line-height: 3rem;
        text-align: center;
      }
    }

    .columns-wrapper {
      .columns div {
        gap: 1.5rem;
        line-height: 2rem;
        text-align: center;

        h5 {
          font-size: var(--font-size-m);
        }

        p {
          font-size: var(--font-size-s);
        }
      }
    }
  }

  @media (width >= 1024px) {
    .columns-wrapper .columns div {
      text-align: left;
      align-items: stretch;
    }
  }
}

.section.text-block.default {
  background-color: white;
}

/* Column variation - video right */
.section.semicircle-image.video.blue .columns,
.section.rectangle-image.video.blue .columns {
  background-color: var(--bg-color-blue);
}

/* Video Variation */
.section.semicircle-image.video,
.section.rectangle-image.video {
  .columns-img-col {
    position: relative;

    img {
      border-radius: 0.5rem;
      width: 100%;
    }
  }

  .columns-img-col::before {
    content: url('../../icons/play-video-button.svg');
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: var(--color-white); /* change to desired color */
    font-size: var(--spacing-s); /* change to desired size */
  }
}

.section.columns-container.button-expand {
  .columns-wrapper {
    .columns {
      > div {
        align-items: flex-start;

        > div:first-of-type {
          display: flex;
          flex-direction: column;
        }
      }
    }
  }
}

.section.columns-container.button-expand .columns > div > div .button-container {
  order: 1;

  ~ * {
    display: none;
  }
}

.section.columns-container.button-expand-open .columns > div > div .button-container {
  a::after {
    transform: rotate(180deg);
  }

  a.button:not(.primary, .secondary):hover {
    &::after {
      transform: rotate(270deg);
    }
  }

  ~ * {
    display: block;
  }
}

.section.rectangle-image.right.mt-0.homepage-cards.columns-container {
  padding-top: unset;

  @media (width<1024px) {
    padding: var(--spacing-xxs);
  }

  .section.rectangle-image .columns {
    background-color: var(--color-white);
    padding: unset;
    padding-bottom: 80px;

    & > div {
      gap: var(--spacing-xs);
      background-color: var(--color-white);

      > div {
        background-color: var(--color-medium-grey);
        padding: var(--spacing-m);
        border-radius: var(--spacing-xs);
      }
    }

    @media (width<1024px) {
      padding: unset;

      & > div {
        > div {
          background-color: var(--color-medium-grey);
          padding: var(--spacing-s);
          border-radius: var(--spacing-xxxs);
        }
      }
    }
  }
}

/* More from maxxia */
.section.more-from-maxxia {
  padding: 32px var(--spacing-xs);
  gap: 2.5rem;
  display: flex;
  flex-direction: column;
  font-size: var(--font-size-s);
  line-height: 2rem;

  /* stylelint-disable */
  .default-content-wrapper {
    text-align: left;
    width: 100%;

    h2,
    h3 {
      font-size: var(--font-size-l-alt);
      line-height: 2.5rem;
    }
  }

  .columns-wrapper .columns {
    > div {
      text-align: center;
      gap: 1rem;

      > div {
        padding: var(--spacing-s);
        gap: 1rem;
        border: 1px solid var(--border-color);
        border-radius: 0.5rem;
        display: flex;
        flex-direction: column;

        p {
          margin: 0;

          img {
            width: 134px;
            aspect-ratio: 1.34;
          }

          &.button-container a {
            background-color: var(--color-white);
            color: var(--color-black);
            font-size: var(--font-size-xs);
            font-weight: 400;
            line-height: 1.25rem;
            margin: 0;
            padding: 0;
            text-decoration: underline;
          }

          &:nth-child(3) {
            font-size: var(--font-size-xs);
            line-height: 1.5rem;
            margin-top: -16px;
            font-weight: 400;
          }
        }

        p:nth-child(2) {
          border: 1px solid;
        }

        h5,
        h4,
        h6 {
          font-size: var(--font-size-m);
          line-height: 2rem;
        }
      }
    }
  }

  &.round-image {
    .columns-wrapper .columns > div > div {
      align-items: center;
      > p:first-child {
        background-color: var(--bg-color-paper);
        border-radius: 50%;
        height: 88px;
        width: 88px;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      img {
        height: 56px;
        width: 56px;
      }
    }
  }
  /* stylelint-enable */

  @media (width >= 1024px) {
    &.columns-container {
      padding: 40px 159px;
      gap: 3rem;
    }

    .default-content-wrapper {
      h2,
      h3 {
        font-size: var(--font-size-lg);
        line-height: 3rem;
      }
    }

    .columns-wrapper {
      width: 100%;
    }

    .columns-wrapper .columns div {
      > div {
        border-radius: 1rem;

        h4,
        h5,
        h6 {
          font-size: var(--font-size-l);
        }

        p {
          &:nth-child(3) {
            font-size: var(--font-size-s);
            line-height: 2rem;
          }

          &.button-container a {
            background-color: var(--color-white);
            color: var(--color-black);
            font-size: var(--font-size-s);
            line-height: 1.5rem;
            text-decoration: underline;
          }
        }
      }
    }
  }

  @media (width >= 1024px) {
    &.columns-container {
      padding: var(--spacing-l-alt) 0;
      padding-top: var(--spacing-xxl);
    }

    .default-content-wrapper {
      margin: 0 auto;
    }

    .columns-wrapper .columns {
      display: flex;
      flex-direction: column;
      height: 100%;

      div {
        flex: 1;
        align-items: stretch;

        > div {
          display: flex;
          flex-direction: column;

          p.button-container {
            margin-top: auto;
          }
        }
      }
    }
  }
}

@media (width >= 768px) {
  .section.columns-container {
    /* padding: var(--spacing-s) var(--spacing-l-alt); */
    padding: var(--spacing-xs) var(--spacing-xs);
  }

  /* Column variation - left image */
  .section.semicircle-image.left,
  .section.rectangle-image.left {
    .block.columns > div .columns-img-col {
      img {
        border-radius: 1rem 12.5rem 12.5rem 1rem;
      }
    }
  }
}

@media (width >= 1024px) {
  .section.columns-container.ev {
    padding-top: var(--spacing-xl);
    padding-bottom: unset;
  }

  .section.columns-container {
    /* padding: var(--spacing-l-alt) var(--spacing-xxl-l); */
    padding: var(--spacing-xl) var(--spacing-xs);
  }

  .columns > div {
    align-items: justify;
    flex-direction: unset;
    gap: var(--spacing-m);
  }

  /* Column Variation - left image */
  .section.semicircle-image.left .columns,
  .section.rectangle-image.left .columns {
    padding: var(--spacing-xl) var(--spacing-xl) var(--spacing-xl) var(--spacing-m);

    > div {
      > div {
        &:nth-child(2) {
          width: 35%;
        }
      }
    }
  }
}

/* Hover Card */
/* stylelint-disable no-descending-specificity */
.section.hover-card {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
  text-align: center;

  > div {
    margin: 0;
  }

  div.default-content-wrapper {
    display: flex;
    flex-direction: column;
    gap: 1rem;

    > p {
      font-size: var(--font-size-s);
      line-height: var(--font-size-l-alt);
    }

    > h2,
    h3 {
      font-size: var(--font-size-l-alt);
      line-height: var(--font-size-lg);
    }
  }

  .columns.block.columns-3-cols {
    display: flex;
    flex-direction: column;
    gap: 1rem;

    > div {
      display: flex;
      flex-wrap: wrap;
      gap: 1rem;
      height: 100%;
      align-items: stretch;

      > div {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        background-color: var(--bg-color-paper);
        border-radius: var(--spacing-xs);
        padding: var(--spacing-s);
        width: 100%;
        box-sizing: border-box;
        height: 300px;
        gap: 0.5rem;

        h3 {
          font-size: var(--font-size-l);
          line-height: 2rem;
        }

        p {
          cursor: pointer;
        }

        > p:last-child,
        > p:nth-child(3) {
          display: none;
        }

        > p:last-child,
        p:nth-child(2) {
          font-size: var(--font-size-xs);
          line-height: var(--spacing-xs-l-alt);
          margin-bottom: 2px;
          border-bottom: 1px solid;
          color: var(--color-black);
        }
      }

      > div.hoverable {
        transform: rotateY(180deg);
        background-color: var(--color-black);
        transition:
          background-color 1s linear,
          transform 0.8s;

        > h3,
        > p:nth-child(2) {
          visibility: hidden;
          opacity: 0;
          height: 0;
          transition:
            visibility 0.4s,
            height 0.4s;
        }

        > p:nth-child(3) {
          font-size: var(--font-size-xs);
          text-align: left;
          transform: rotateY(180deg);
        }

        > p:last-child,
        > p:nth-child(3) {
          display: block;
          color: var(--color-white);
          transform: rotateY(180deg);
        }
      }
    }
  }

  @media (width >= 1024px) {
    > div {
      margin: auto;
    }

    div.default-content-wrapper {
      padding: 0 312px;
      text-align: center;

      > h3 {
        font-size: var(--font-size-lg);
        line-height: var(--font-size-xl);
      }
    }

    .columns.block.columns-3-cols {
      > div {
        flex-wrap: nowrap;

        > div {
          > h3 {
            font-size: var(--font-size-l-alt);
          }

          > p:last-child,
          p:nth-child(2) {
            font-size: var(--font-size-s);
            line-height: 1.5rem;
          }
        }

        > div.hoverable {
          > p:nth-child(3) {
            font-size: var(--font-size-s);
            line-height: 2rem;
          }
        }
      }
    }
  }
}

.section.articles-banner {
  > div > div > div {
    height: 600px;
    display: flex;
  }
}

.section.perks-container.columns-container {
  & .columns-wrapper .columns {
    & > div {
      & > div {
        h4,
        h5,
        h6 {
          font-size: var(--font-size-m-alt);
          line-height: var(--line-height);
        }

        & p {
          font-size: var(--font-size-xs);
          line-height: var(--line-height);
          margin-top: unset;

          img {
            width: 54px;
            aspect-ratio: 1;
          }

          a,
          a:active,
          a:focus {
            font-size: var(--font-size-xs);
            line-height: var(--line-height);
            background: none;
            text-decoration: underline;
            color: var(--color-black);
            padding: 0;
            border: 0;
            outline: transparent;
          }
        }
      }
    }
  }
}

.disclosures-container.columns-container {
  padding: var(--spacing-xxxl) var(--spacing-xxxl) 0;

  .columns.columns-2-cols > div {
    justify-content: center;

    div {
      border: 1px solid var(--border-color-card);
      padding: var(--spacing-m);
      border-radius: var(--spacing-xs);

      * {
        margin: 0;
      }

      h3 {
        font-size: var(--spacing-s-m);
        line-height: var(--spacing-m);
        font-weight: var(--font-weight-bold);
        font-family: var(--font-family-bold);
        margin: var(--spacing-m) 0;
      }

      a:focus {
        background-color: var(--bg-button);
        outline: none;
      }
    }
  }

  @media (width < 1024px) {
    padding: var(--spacing-xl) var(--spacing-xs);

    .columns.columns-2-cols > div {
      flex-direction: column;
      gap: var(--spacing-s);

      div {
        padding: var(--spacing-xs-l-alt);

        h3 {
          font-size: var(--font-size-s-alt);
          margin: var(--font-size-s-alt) 0;
        }
      }
    }
  }
}

.section.empbenefits-container {
  margin-top: var(--spacing-xxl);
  padding: var(--spacing-xxl) var(--spacing-xs);

  .columns > div > div {
    justify-content: space-between;

    p {
      font-size: var(--font-size-xs);
      line-height: var(--line-height);
      color: var(--color-dark-grey);
    }

    p:nth-of-type(2):not(.button-container p) {
      flex: 1;
    }

    p.button-container {
      a {
        color: var(--color-white);
        margin-top: var(--spacing-xs-l-alt);

        &::after {
          display: none;
        }
      }
    }
  }

  @media (width < 1024px) {
    margin-top: 0;
    padding: var(--spacing-xl) var(--spacing-xs);
  }
}

.section.industry-blocks {
  padding: var(--spacing-xxl) var(--spacing-xs);

  .default-content-wrapper {
    gap: 1rem;

    h1 {
      font-size: var(--font-size-l-m-alt);
      line-height: var(--line-height-m-l-alt);
      font-weight: var(--font-weight-bold);
      font-family: var(--font-family-bold);
    }

    #delivering-real-benefits-and-genuine-savings-were-australias-salary-packaging-and-novated-leasing-experts {
      max-width: var(--max-width-medium-alt);
    }

    p {
      width: 70%;
      font-size: var(--font-size-xs);
      line-height: var(--line-height);
      color: var(--color-dark-grey);
    }
  }

  .columns-wrapper {
    width: 100%;

    .columns {
      padding: 0;
    }

    .columns-3-cols > div > div,
    .columns-4-cols > div > div {
      padding: var(--spacing-m-s) 0;
      background-color: #fff;
      border: 1px solid var(--border-color-alt);
      border-radius: var(--spacing-xs);

      p.button-container {
        a {
          background-color: transparent;
          padding: 0;
          text-decoration: underline;
          font-size: var(--font-size-xs);

          &::after {
            display: none;
          }

          &:hover {
            color: var(--link-hover-color);
          }
        }
      }
    }

    @media (width < 1024px) {
      flex-direction: column;
      gap: var(--spacing-s);
    }
  }

  @media (width < 1024px) {
    padding: var(--spacing-xl) var(--spacing-xs);

    .default-content-wrapper {
      p {
        width: 100%;
      }
    }
  }
}

.section.empcard-container.nl-new.columns-container {
  padding-top: 64px;
}

.section.imagedesc-col3-inline-container {
  padding-top: 0;
  margin-top: -2px;
}

@media (width < 768px) {
  .section.empcard-container.nl-new.columns-container {
    padding-top: 0;
  }
}

.section.empcard-container {
  padding: var(--spacing-xxl) var(--spacing-xs);
  padding-bottom: 0;

  .columns-wrapper {
    .columns {
      &.columns-3-cols {
        > div {
          @media (width >=1024px) {
            img {
              height: 250px;
              object-fit: cover;
            }
          }
        }
      }

      > div {
        justify-content: center;
        gap: var(--spacing-xs);
        margin: 0 var(--spacing-s);

        > div {
          padding: var(--spacing-l);
          border-radius: var(--spacing-xs);
          background-color: var(--bg-color-paper);

          @media (width < 768px) {
            padding: var(--spacing-m);
          }

          h3 {
            font-size: var(--font-size-l-m);
            line-height: var(--font-size-l-alt);
            font-weight: var(--font-weight-bold);
            font-family: var(--font-family-bold);
            margin-top: var(--spacing-xs-l-alt);
            margin-bottom: var(--spacing-xxxs);
          }

          p a {
            margin-top: var(--spacing-s);
            margin-bottom: 0;
          }
        }
      }
    }
  }

  @media (width < 1024px) {
    padding: var(--spacing-m) var(--spacing-xs);
  }
}

@media (width < 1024px) {
  .section.empcard-container {
    & .columns-wrapper {
      .columns-2-cols > div {
        margin: 0;

        > div {
          padding: var(--spacing-s);
          border-radius: var(--spacing-xxxs);
        }
      }
    }
  }
}

@media (width >= 1024px) {
  .section.columns-container {
    & .columns-wrapper {
      .columns-2-cols > div {
        > div {
          width: 50%;
          box-sizing: border-box;
          justify-content: center;

          &.youtube-iframe,
          &.youtube-iframe iframe {
            width: 560px;
            max-width: 560px;
            aspect-ratio: 16 / 9;
          }
        }
      }

      .columns-3-cols > div {
        margin: 0;

        > div {
          width: calc(100% / 3);
          box-sizing: border-box;
        }
      }
    }
  }
}

.section.rectangle-image {
  padding: var(--spacing-xl) var(--spacing-xs) 0;
  padding-top: unset;

  @media (width >= 1024px) {
    padding: var(--spacing-xxl) var(--spacing-xs) 0;
  }

  @media (width < 1024px) {
    &.right .columns > div > div:last-child {
      order: 0;
    }
  }
}

.section.orange-card-block {
  text-align: center;

  .columns {
    div {
      gap: var(--spacing-xs);

      div {
        position: relative;

        h3,
        p:first-of-type {
          color: var(--color-white);
          width: 100%;
          position: absolute;
          top: 20%;
        }

        p:first-of-type {
          top: 45%;

          a {
            background: var(--color-white);
            border-radius: 4px;
            color: var(--color-black);
          }
        }

        p:last-child {
          img {
            border-radius: 1rem;
          }
        }
      }
    }
  }
}

.section.sp-card-container {
  h5 {
    margin-bottom: var(--spacing-xs);
  }

  h2 {
    text-align: center;
    margin-bottom: var(--spacing-xl);
  }

  & .columns-wrapper {
    & .columns > div {
      margin: 0;
      gap: var(--spacing-xs);
      align-items: stretch;

      div {
        background-color: var(--color-medium-grey);
        border: 0;
        position: relative;

        @media (width >= 1024px) {
          width: 100%;
          margin-bottom: var(--spacing-xl);
        }

        img {
          height: 444px;
          object-fit: cover;

          @media (width <= 1024px) {
            height: auto;
          }
        }
      }
    }

    &:last-child {
      @media (width < 1024px) {
        margin-top: var(--spacing-xs);
      }

      & .columns > div {
        div {
          display: flex;
          flex-direction: column;

          p.button-container {
            margin-top: auto;
          }

          @media (width >= 1024px) {
            margin-bottom: 0;
          }
        }
      }
    }
  }
}

.section.sp-card-container.type-three-column {
  padding-bottom: var(--spacing-xl);

  & .columns-wrapper {
    & .columns > div {
      div {
        img {
          height: 320px;
          margin-bottom: var(--spacing-xs);

          @media (width <= 1024px) {
            height: auto;
          }
        }
      }
    }
  }
}

.section.sp-card-container.type-three-column.empcard-container {
  padding-top: var(--spacing-l-alt);
  padding-bottom: var(--spacing-l-alt);
}

.section.sp-card-container.multi-image-holder,
.section.sp-card-container.multi-image-holder-2 {
  & .columns-wrapper {
    & .columns > div {
      p:nth-child(2) {
        position: absolute;
        top: 35%;
        left: 50%;
        transform: translate(-50%, -50%);

        img {
          width: 225px;
          height: auto;
          opacity: 0.7;

          @media (width <= 1024px) {
            width: 100px;
          }
        }
      }
    }
  }
}

.section.sp-card-container.multi-image-holder-2 {
  & .columns-wrapper {
    & .columns > div {
      p:nth-child(2) {
        top: 20%;

        img {
          width: 60px;
          opacity: 1;
        }
      }
    }
  }
}

.section.request-callback.sp-contact-section.ev {
  margin-top: unset;
  background: var(--bg-color-paper);
}

.section.benefits-do-more-section {
  & .columns > div > div {
    > p:first-child {
      width: unset;
      margin-bottom: var(--spacing-xs);

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

h3#concessional-fringe-benefits {
  text-align: center;
}

/* Two Column Layout */
.section.col-2 {
  padding-bottom: 0;
}

.section.col-2 .columns > div {
  display: flex;
  gap: 48px;
  align-items: flex-start;
}

.section.col-2 .columns > div > div:first-child {
  flex: 0 1 816px;
  max-width: 816px;
  align-items: flex-start;
}

.section.col-2 .columns > div > div:last-child {
  flex: 0 1 354px;
  max-width: 354px;
  align-items: flex-start;
}

@media (width < 1440px) {
  .section.benefits-text {
    .default-content-wrapper {
      max-width: var(--max-width-medium-alt);
    }
  }
}

@media (width < 1024px) {
  .section.col-2 .columns > div {
    flex-direction: column;
    gap: var(--spacing-m);
  }

  .section.col-2 .columns > div > div:first-child,
  .section.col-2 .columns > div > div:last-child {
    flex: 1;
    max-width: 100%;
  }
}

.section.car-brand-desc.columns-container {
  .columns-wrapper {
    background: var(--bg-color-paper);
    padding: var(--spacing-s);
    box-sizing: border-box;

    .columns-img-col {
      max-width: 50%;

      picture {
        height: 300px;
        width: 500px;
        max-width: 100%;
        display: inline-block;
      }

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

  @media (width <= 768px) {
    .columns-wrapper {
      .columns-img-col {
        max-width: 100%;

        picture {
          height: 200px;
          width: 100%;
        }
      }
    }
  }
}

.section.car-details-helpful-container {
  padding-bottom: 0;
  padding-top: var(--spacing-l-m);

  .columns-wrapper {
    .columns {
      > div {
        width: fit-content;
        gap: 0;

        &:has(.youtube-iframe) {
          width: 100%;
        }

        @media (width < 768px) {
          flex-direction: row;
          gap: var(--spacing-xs);
        }

        > div {
          height: 32px;
          width: max-content;

          &.youtube-iframe {
            width: 100%;
            height: 100%;
          }

          p {
            height: 32px;
          }

          p:last-of-type {
            display: none;
          }

          picture {
            img {
              height: 32px;
            }
          }
        }
      }
    }
  }

  .columns-wrapper + .default-content-wrapper {
    margin-top: var(--spacing-l);
  }

  .car-details-helpful-wrapper {
    margin-top: var(--spacing-l);

    .main-container {
      display: flex;
      align-items: center;
      justify-content: space-between;

      @media (width < 768px) {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-xs);
      }

      > div {
        display: flex;
        align-items: center;
        gap: var(--spacing-s);
        font-size: var(--font-size-xs);
        font-weight: var(--font-weight-bold);
        line-height: var(--line-height);

        .read-time {
          font-family: var(--font-family-bold);
          font-weight: var(--font-weight-bold);
        }

        .read-time-icon {
          position: relative;
          top: 3px;
          margin-right: -15px;
        }
      }

      .read-publish-container {
        @media (width < 768px) {
          width: 100%;
          display: grid;
          grid-template-columns: 30px 1fr;
          gap: var(--spacing-xs);

          .publish-date {
            grid-column: 1/3;
          }
        }
      }

      .shar-font-container {
        display: none;

        .share-icon {
          display: none;
        }

        .font-size-container {
          display: flex;
          align-items: center;
          gap: var(--spacing-xs);
        }

        .small-font-icon {
          display: flex;
          align-items: center;
        }
      }
    }
  }
}

.section.marketplace-news {
  padding-top: var(--spacing-xs);

  h1 {
    display: none;
  }

  h3 {
    margin: var(--spacing-s) 0;
  }

  p {
    line-height: var(--line-height-m-l);
  }
}

.section.text-table {
  h4 {
    margin-top: var(--spacing-xs);
  }

  .columns-wrapper {
    margin-top: var(--spacing-s);

    .columns.columns-1-cols {
      > div {
        > div:not(.youtube-iframe, .image-link-block):first-of-type {
          width: 100%;
          box-sizing: border-box;
          display: grid;
          grid-template-columns: 1fr 1fr;
          padding: 0 var(--spacing-s);
          border-radius: 12px;
          border: 1px solid var(--border-color-card);

          p {
            padding: 0 var(--spacing-s);
            white-space: nowrap;
          }

          p:nth-child(odd) {
            padding-top: var(--spacing-s);
          }

          p:nth-child(even) {
            padding-bottom: var(--spacing-s);
          }

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

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

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

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

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

          p:nth-child(6) {
            grid-column: 1;
            grid-row: 4;
          }

          p:nth-child(7) {
            grid-column: 2;
            grid-row: 3;
          }

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

          p:nth-child(9) {
            grid-column: 1;
            grid-row: 5;
          }

          p:nth-child(10) {
            grid-column: 1;
            grid-row: 6;
          }

          p:nth-child(11) {
            grid-column: 2;
            grid-row: 5;
          }

          p:nth-child(12) {
            grid-column: 2;
            grid-row: 6;
          }

          p:nth-child(13) {
            grid-column: 1;
            grid-row: 7;
          }

          p:nth-child(14) {
            grid-column: 1;
            grid-row: 8;
          }

          p:nth-child(15) {
            grid-column: 2;
            grid-row: 7;
          }

          p:nth-child(16) {
            grid-column: 2;
            grid-row: 8;
          }

          p:nth-child(17) {
            grid-column: 1;
            grid-row: 9;
          }

          p:nth-child(18) {
            grid-column: 1;
            grid-row: 10;
          }

          p:nth-child(5),
          p:nth-child(6),
          p:nth-child(7),
          p:nth-child(8),
          p:nth-child(13),
          p:nth-child(14),
          p:nth-child(15),
          p:nth-child(16) {
            background: var(--bg-color-paper);
          }

          @media (width < 768px) {
            display: flex;
            flex-direction: column;
            padding-bottom: var(--spacing-xs);

            p {
              width: 100%;
              box-sizing: border-box;
              padding: 0 var(--spacing-xs);
            }

            p:nth-child(odd) {
              padding-top: var(--spacing-xs);
            }

            p:nth-child(even) {
              padding-bottom: var(--spacing-xs);
            }

            p:nth-child(5),
            p:nth-child(6),
            p:nth-child(7),
            p:nth-child(8),
            p:nth-child(13),
            p:nth-child(14),
            p:nth-child(15),
            p:nth-child(16) {
              background: none;
            }

            p:nth-child(3),
            p:nth-child(4),
            p:nth-child(7),
            p:nth-child(8),
            p:nth-child(11),
            p:nth-child(12),
            p:nth-child(15),
            p:nth-child(16) {
              background: var(--bg-color-paper);
            }
          }
        }
      }
    }
  }
}

/* 3 column custom table - Starts */
.section.text-table-3col {
  h4 {
    margin-top: var(--spacing-xs);
  }

  .columns-wrapper {
    margin-top: var(--spacing-s);

    .columns {
      > div {
        > div:first-of-type {
          width: 100%;
          box-sizing: border-box;
          display: grid;
          grid-template-columns: 1fr 1fr 1fr;
          padding: 0 var(--spacing-s);
          border-radius: 12px;
          border: 1px solid var(--border-color-card);

          p {
            padding: 0 var(--spacing-s);
            white-space: nowrap;
          }

          p:nth-child(1) {
            grid-column: 1;
            grid-row: 1;
            padding-top: var(--spacing-s);
          }

          p:nth-child(2) {
            grid-column: 2;
            grid-row: 1;
            padding-top: var(--spacing-s);
          }

          p:nth-child(3) {
            grid-column: 3;
            grid-row: 1;
            padding-top: var(--spacing-s);
          }

          p:nth-child(4) {
            grid-column: 3;
            grid-row: 2;
            padding-bottom: var(--spacing-s);
          }

          p:nth-child(5) {
            grid-column: 1;
            grid-row: 3;
            padding: var(--spacing-s);
          }

          p:nth-child(6) {
            grid-column: 2;
            grid-row: 3;
            padding: var(--spacing-s);
          }

          p:nth-child(7) {
            grid-column: 3;
            grid-row: 3;
            padding: var(--spacing-s);
          }

          p:nth-child(8) {
            grid-column: 1;
            grid-row: 4;
            padding: var(--spacing-s);
          }

          p:nth-child(9) {
            grid-column: 2;
            grid-row: 4;
            padding: var(--spacing-s);
          }

          p:nth-child(10) {
            grid-column: 3;
            grid-row: 4;
            padding: var(--spacing-s);
          }

          p:nth-child(11) {
            grid-column: 1;
            grid-row: 5;
            padding: var(--spacing-s);
          }

          p:nth-child(12) {
            grid-column: 2;
            grid-row: 5;
            padding: var(--spacing-s);
          }

          p:nth-child(13) {
            grid-column: 3;
            grid-row: 5;
            padding: var(--spacing-s);
          }

          p:nth-child(14) {
            grid-column: 1;
            grid-row: 6;
            padding: var(--spacing-s);
          }

          p:nth-child(15) {
            grid-column: 2;
            grid-row: 6;
            padding: var(--spacing-s);
          }

          p:nth-child(16) {
            grid-column: 3;
            grid-row: 6;
            padding: var(--spacing-s);
          }

          p:nth-child(17) {
            grid-column: 1;
            grid-row: 7;
            padding: var(--spacing-s);
          }

          p:nth-child(18) {
            grid-column: 2;
            grid-row: 7;
            padding: var(--spacing-s);
          }

          p:nth-child(19) {
            grid-column: 3;
            grid-row: 7;
            padding: var(--spacing-s);
          }

          p:nth-child(5),
          p:nth-child(6),
          p:nth-child(7),
          p:nth-child(11),
          p:nth-child(12),
          p:nth-child(13),
          p:nth-child(17),
          p:nth-child(18),
          p:nth-child(19) {
            background: var(--bg-color-paper);
          }

          @media (width < 768px) {
            display: flex;
            flex-direction: column;
            padding-bottom: var(--spacing-xs);

            p {
              width: 100%;
              box-sizing: border-box;
              padding: 0 var(--spacing-xs);
            }

            p:nth-child(1),
            p:nth-child(2),
            p:nth-child(3),
            p:nth-child(4),
            p:nth-child(8),
            p:nth-child(9),
            p:nth-child(10),
            p:nth-child(14),
            p:nth-child(15),
            p:nth-child(16) {
              background: none;
            }
          }
        }
      }
    }
  }
}

/* 3 column custom table - End */

main {
  position: relative;

  .section.marketplace-news {
    .columns {
      > div {
        > div:first-child {
          max-width: calc(100vw - 370px - 50px);

          @media (width < 1024px) {
            max-width: 100%;
          }
        }

        > div:last-child {
          position: absolute;
          top: calc(188px + var(--spacing-l-m));
          right: calc((100vw - var(--max-width-container)) / 2);

          @media (width < 1264px) {
            right: 20px;
            flex: none;
            max-width: 354px;
          }

          @media (width < 1024px) {
            max-width: 100%;
            position: static;
          }
        }
      }
    }
  }
}

.section.popup-disclaimer {
  .columns-wrapper {
    .columns {
      .video-disclaimer {
        display: none !important;
      }
    }
  }
}

.video-disclaimer {
  * {
    color: white;
    font-size: var(--font-size-s);
    font-weight: normal;
  }

  a {
    color: var(--color-primary);
  }
}

.video-disclaimer-mask {
  @media (width < 1024px) {
    > div {
      width: 80% !important;
      transform: translate(10%, 100px) !important;
    }
  }
}

/* stylelint-disable */
.section.benefits-box-container .columns {
  & > div > div {
    padding: var(--spacing-s);
    border-radius: 12px;
    transition:
      transform 0.3s ease-in-out,
      box-shadow 0.3s ease-in-out,
      border-top 0.3s ease-in-out;
    text-align: center;
    min-height: 237px;
    max-height: 237px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: var(--spacing-xs);
    width: -webkit-fill-available;
    margin-top: var(--spacing-s);

    @media (width <= 1040px) {
      margin-top: var(--spacing-s);
      min-height: auto;
    }

    h2 {
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
      text-overflow: ellipsis;
      font-size: var(--font-size-l);
    }

    &:not(:empty) {
      cursor: pointer;
      box-shadow: 0 2px 10px rgb(0 0 0 / 8%);
      border-top: 5px solid var(--border-color);

      &:hover {
        transform: translateY(-8px);
        box-shadow: 0 8px 20px rgb(0 0 0 / 15%);
        border-top: 5px solid var(--color-brand);

        a:any-link {
          color: var(--color-brand) !important;
          text-decoration: underline;
        }
      }
    }

    p {
      margin: 0;
      line-height: initial;

      &.button-container a:any-link {
        background-color: transparent;
        color: var(--color-black);
        padding: 0;
        outline: 0;
        margin: 0;
      }

      &:not(.button-container) {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }
  }
}
/* stylelint-enable */

.section.centered-buttons {
  & .columns-wrapper {
    .columns > div {
      margin: auto;
      max-width: fit-content;
      flex-direction: row;
      gap: 1rem;

      a {
        margin-bottom: 0;
      }

      @media (width < 415px) {
        flex-direction: column;
        gap: 0;
      }
    }
  }
}