:root {
  /* typography */
  --root-font-size: 16;
  --calc-rem-base: var(--root-font-size) * 1rem;
  --brex-font-heading-size--level1: 72;
  --brex-font-heading-size--level2: 64;
  --brex-font-heading-size--level3: 56;
  --brex-font-heading-size--level4: 48;
  --brex-font-heading-size--level5: 44;
  --brex-font-heading-size--level6: 40;
  --brex-font-heading-size--level7: 36;
  --brex-font-heading-size--level8: 32;
  --brex-font-body-size--level1: 28;
  --brex-font-body-size--level2: 24;
  --brex-font-body-size--level3: 20;
  --brex-font-body-size--level4: 18;
  --brex-font-body-size--level5: 16;
  --brex-font-body-size--level6: 14;   
  --brex-font-body-size--level7: 12;
  --brex-font-body-size--level8: 11;
  --brex-font-heading-size--level1-rem: calc(var(--brex-font-heading-size--level1) / var(--calc-rem-base));
  --brex-font-heading-size--level2-rem: calc(var(--brex-font-heading-size--level2) / var(--calc-rem-base));
  --brex-font-heading-size--level3-rem: calc(var(--brex-font-heading-size--level3) / var(--calc-rem-base));
  --brex-font-heading-size--level4-rem: calc(var(--brex-font-heading-size--level4) / var(--calc-rem-base));
  --brex-font-heading-size--level5-rem: calc(var(--brex-font-heading-size--level5) / var(--calc-rem-base));
  --brex-font-heading-size--level6-rem: calc(var(--brex-font-heading-size--level6) / var(--calc-rem-base));
  --brex-font-heading-size--level7-rem: calc(var(--brex-font-heading-size--level7) / var(--calc-rem-base));
  --brex-font-heading-size--level8-rem: calc(var(--brex-font-heading-size--level8) / var(--calc-rem-base));
  --brex-font-body-size--level1-rem: calc(var(--brex-font-body-size--level1) / var(--calc-rem-base));
  --brex-font-body-size--level2-rem: calc(var(--brex-font-body-size--level2) / var(--calc-rem-base));
  --brex-font-body-size--level3-rem: calc(var(--brex-font-body-size--level3) / var(--calc-rem-base));
  --brex-font-body-size--level4-rem: calc(var(--brex-font-body-size--level4) / var(--calc-rem-base));
  --brex-font-body-size--level5-rem: calc(var(--brex-font-body-size--level5) / var(--calc-rem-base));
  --brex-font-body-size--level6-rem: calc(var(--brex-font-body-size--level6) / var(--calc-rem-base));
  --brex-font-body-size--level7-rem: calc(var(--brex-font-body-size--level7) / var(--calc-rem-base));
  --brex-font-body-size--level8-rem: calc(var(--brex-font-body-size--level8) / var(--calc-rem-base));
  --brex-font-heading-lh--level1: 1.11;
  --brex-font-heading-lh--level2: 1.125;
  --brex-font-heading-lh--level3: 1.14;
  --brex-font-heading-lh--level4: 1.17;
  --brex-font-heading-lh--level5: 1.18;
  --brex-font-heading-lh--level6: 1.2;
  --brex-font-heading-lh--level7: 1.22;
  --brex-font-heading-lh--level8: 1.25;
  --brex-font-body-lh--level1: 1.21;
  --brex-font-body-lh--level2: 1.33;
  --brex-font-body-lh--level3: 1.4;
  --brex-font-body-lh--level4: 1.33;
  --brex-font-body-lh--level5: 1.375;
  --brex-font-body-lh--level6: 1.43;
  --brex-font-body-lh--level7: 1.33;
  --brex-font-body-lh--level8: 1.27;

  /* border */
  --brex-border-radius: .25rem;
  --brex-border-radius--mobile: .125rem;

  /* layout */
  --brex-viewport--page-width: 1440;
  --brex-viewport--full-width: 1920;
  --brex-viewport--mobile-width: 750;
  --brex-section-padding-narrow: 80;
  --brex-section-padding-normal: 100;
  --brex-section-padding-wide: 120;
  --brex-section-padding-narrow-mobile: 40;
  --brex-section-padding-normal-mobile: 40;
  --brex-section-padding-wide-mobile: 40;
  --brex-section-padding-narrow-rem: calc(var(--brex-section-padding-narrow) / var(--calc-rem-base));
  --brex-section-padding-normal-rem: calc(var(--brex-section-padding-normal) / var(--calc-rem-base));
  --brex-section-padding-wide-rem: calc(var(--brex-section-padding-wide) / var(--calc-rem-base));
  --brex-section-padding-narrow-mobile-rem: calc(var(--brex-section-padding-narrow-mobile) / var(--calc-rem-base));
  --brex-section-padding-normal-mobile-rem: calc(var(--brex-section-padding-normal-mobile) / var(--calc-rem-base));
  --brex-section-padding-wide-mobile-rem: calc(var(--brex-section-padding-wide-mobile) / var(--calc-rem-base));
}

/* layout */
.brex-component {
  *:where(p, h1, h2, h3, h4, h5, h6) {
    font: inherit;
    line-height: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
    color: inherit;
    margin: 0;
  }

  *:where(p, h1, h2, h3, h4, h5, h6) + *:where(p, h1, h2, h3, h4, h5, h6) {
    margin-block-start: 0.222em;
  }

  a:where(:not(.button, .button-primary, .button-secondary)),
  p:not(.h1, .h2, .h3, .h4, .h5, .h6) a:where(:not(.button, .button-primary, .button-secondary)) {
    color: inherit;

    &:hover {
      color: inherit;
    }
  }
}

.brex-container--page-width {
  --page-content-width: var(--narrow-page-width);
  --page-width: calc(var(--page-content-width) + (var(--page-margin) * 2));
  max-width: var(--page-width);
  padding-inline: var(--page-margin);
  margin-inline: auto;

  .brex-container--page-width {
    max-width: var(--page-content-width);
  }

  .brex-container--full-width {
    padding-inline: 0;
  }

  @media screen and (max-width: 749px) {
    &.brex-container--full-width-mobile {
      padding-inline: 0;
    }
  }
}

.brex-section-padding--top-none {
  padding-block-start: 0;
}

.brex-section-padding--bottom-none {
  padding-block-end: 0;
}

.brex-section-padding--top-normal {
  padding-block-start: clamp(var(--brex-section-padding-normal-mobile-rem), calc(var(--brex-section-padding-normal) / var(--brex-viewport--page-width) * 100vw), var(--brex-section-padding-normal-rem));

  @media screen and (max-width: 749px) {
    padding-block-start: var(--brex-section-padding-normal-mobile-rem);
  }
}

.brex-section-padding--bottom-normal {
  padding-block-end: clamp(var(--brex-section-padding-normal-mobile-rem), calc(var(--brex-section-padding-normal) / var(--brex-viewport--page-width) * 100vw), var(--brex-section-padding-normal-rem));

  @media screen and (max-width: 749px) {
    padding-block-end: var(--brex-section-padding-normal-mobile-rem);
  }
}

.brex-section-padding--top-narrow {
  padding-block-start: clamp(var(--brex-section-padding-narrow-mobile-rem), calc(var(--brex-section-padding-narrow) / var(--brex-viewport--page-width) * 100vw), var(--brex-section-padding-narrow-rem));

  @media screen and (max-width: 749px) {
    padding-block-start: var(--brex-section-padding-narrow-mobile-rem);
  }
}

.brex-section-padding--bottom-narrow {
  padding-block-end: clamp(var(--brex-section-padding-narrow-mobile-rem), calc(var(--brex-section-padding-narrow) / var(--brex-viewport--page-width) * 100vw), var(--brex-section-padding-narrow-rem));

  @media screen and (max-width: 749px) {
    padding-block-end: var(--brex-section-padding-narrow-mobile-rem);
  }
}

.brex-section-padding--top-wide {
  padding-block-start: clamp(var(--brex-section-padding-wide-mobile-rem), calc(var(--brex-section-padding-wide) / var(--brex-viewport--page-width) * 100vw), var(--brex-section-padding-wide-rem));
  
  @media screen and (max-width: 749px) {
    padding-block-start: var(--brex-section-padding-wide-mobile-rem);
  }
}

.brex-section-padding--bottom-wide {
  padding-block-end: clamp(var(--brex-section-padding-wide-mobile-rem), calc(var(--brex-section-padding-wide) / var(--brex-viewport--page-width) * 100vw), var(--brex-section-padding-wide-rem));

  @media screen and (max-width: 749px) { 
    padding-block-end: var(--brex-section-padding-wide-mobile-rem);
  }
}

.brex-component-section {
  overflow: hidden; 
}

.brex-component-section:has(.brex-formula) + .brex-component-section:has(.brex-hero) {
  margin-top: 0;
}

.brex-section > .brex-component-section + .brex-component-section {
  margin-top: 2.5rem;

  @media screen and (max-width: 749px) {
    margin-top: 2rem;
  }
}


/* media */
.brex-component__media {
  width: 100%;
  height: 100%;
  background-color: #eee;
  border-radius: var(--brex-border-radius);
  overflow: hidden;

  @media screen and (max-width: 749px) {
    border-radius: var(--brex-border-radius--mobile);
  }
}

.brex-component__media-asset {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  aspect-ratio: var(--media-aspect-ratio);

  @media screen and (max-width: 749px) {
    aspect-ratio: var(--media-aspect-ratio--mobile, var(--media-aspect-ratio));
  }
}

.brex-component__media-link {
  position: absolute;
  inset: 0;
  z-index: 1;

  &:focus-visible {
    outline-offset: calc(-1 * var(--focus-outline-offset));
  }
}

.brex-component__media--video {
  position: relative;
  z-index: 0;
  
  .icon-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 5rem;
    height: 5rem;

    svg {
      width: 100%;
      height: 100%;
    }
  }

  @media screen and (max-width: 749px) {
    .brex-component__media-asset--desktop {
      display: none;
    }
  }

  @media screen and (min-width: 750px) {
    .brex-component__media-asset--mobile {
      display: none;
    }
  }
}

/* text */
.brex-text-group {
  --typo-body-size-rem: calc(var(--typo-body-size) / var(--calc-rem-base));
  --typo-body-size-mobile-rem: calc(var(--typo-body-size-mobile) / var(--calc-rem-base));
  --clamp-val-calc: calc(var(--typo-body-size) / var(--brex-viewport--page-width) * 100vw);

  padding-block: 3rem;
  text-align: var(--text-align, left);
  font-size: clamp(var(--typo-body-size-mobile-rem), var(--clamp-val-calc), var(--typo-body-size-rem));
  line-height: var(--typo-body-lh);
  color: var(--color-foreground);

  > div {
    margin-block: clamp(.5rem, calc(12 / var(--brex-viewport--page-width) * 100vw), .75rem);
    margin-inline: 0;

    &.brex-component__desc-list,
    &.brex-component__buttons {
      margin-block: clamp(1rem, calc(40 / var(--brex-viewport--page-width) * 100vw), 2.5rem);
    }

    &.brex-component__desc-list:last-child > .brex-component__desc-item:last-child {
      padding-block-end: 0;
    }

    &.brex-component__chips {
      margin-block: clamp(1.5rem, calc(48 / var(--brex-viewport--page-width) * 100vw), 3rem);
    }

    &:first-child {
      margin-block-start: 0;
    }

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

  &:first-child {
    padding-block-start: 0;
  }

  &[style*="--text-align: left;"] {
    .brex-component__desc-list {
      margin-right: auto;
    }
  }
  
  &[style*="--text-align: center;"] {
    .brex-component__desc-list {
      margin-inline: auto;
    }
  }

  &[style*="--text-align: right;"] {
    .brex-component__desc-list {
      margin-left: auto;
    }
  }

  .button, .button-secondary {
    --button-font-size: clamp(.875rem, calc(16 / var(--brex-viewport--page-width) * 100vw), 1rem);
    --button-padding-block: clamp(.75rem, calc(15 / var(--brex-viewport--page-width) * 100vw), .9375rem);
    --button-padding-inline: clamp(1.5rem, calc(40 / var(--brex-viewport--page-width) * 100vw), 2.5rem);
    display: inline-grid;
  }

  @media screen and (max-width: 749px) {
    padding-block: 1.5rem;
    text-align: var(--text-align--mobile, --text-align);

    .button, .button-secondary {
      --button-padding-block: 8px;
    }
  }
}

.brex-section > .brex-container:has(+ .brex-component__spacer) > .brex-text-group {
  padding-block-end: 0;
}

.brex-text-group--hero {
  --typo-heading-size: var(--brex-font-heading-size--level1);
  --typo-heading-lh: var(--brex-font-heading-lh--level1);
  --typo-body-size: var(--brex-font-body-size--level2);
  --typo-body-lh: var(--brex-font-body-lh--level2);
  --typo-heading-size-mobile: var(--brex-font-heading-size--level7);
  --typo-body-size-mobile: var(--brex-font-body-size--level5);
}

.brex-text-group--primary {
  --typo-heading-size: var(--brex-font-heading-size--level2);
  --typo-heading-lh: var(--brex-font-heading-lh--level2);
  --typo-body-size: var(--brex-font-body-size--level2);
  --typo-body-lh: var(--brex-font-body-lh--level2);
  --typo-heading-size-mobile: var(--brex-font-heading-size--level8);
  --typo-body-size-mobile: var(--brex-font-body-size--level5);
}

.brex-text-group--secondary {
  --typo-heading-size: var(--brex-font-heading-size--level4);
  --typo-heading-lh: var(--brex-font-heading-lh--level4);
  --typo-body-size: var(--brex-font-body-size--level3);
  --typo-body-lh: var(--brex-font-body-lh--level3);
  --typo-heading-size-mobile: var(--brex-font-body-size--level1);
  --typo-body-size-mobile: var(--brex-font-body-size--level5);
}

.brex-text-group--tertiary {
  --typo-heading-size: var(--brex-font-heading-size--level5);
  --typo-heading-lh: var(--brex-font-heading-lh--level5);
  --typo-body-size: var(--brex-font-body-size--level3);
  --typo-body-lh: var(--brex-font-body-lh--level3);
  --typo-heading-size-mobile: var(--brex-font-body-size--level2);
  --typo-body-size-mobile: var(--brex-font-body-size--level5);
}

.brex-text-group--body {
  --typo-heading-family: var(--font-body--family);
  --typo-heading-size: var(--brex-font-body-size--level2);
  --typo-heading-lh: var(--brex-font-body-lh--level2);
  --typo-body-size: var(--brex-font-body-size--level5);
  --typo-body-lh: var(--brex-font-body-lh--level5);
  --typo-heading-size-mobile: var(--brex-font-body-size--level4);
  --typo-body-size-mobile: var(--brex-font-body-size--level6);
}

.brex-component__eyebrow {
  color: var(--custom-color-foreground, var(--color-foreground-heading));
  background-color: transparent !important;

  strong, h1, h2, h3, h4, h5, h6 {
    font-weight: 600;
  }
}

.brex-component__title {
  --typo-heading-size-rem: calc(var(--typo-heading-size) / var(--calc-rem-base));
  --typo-heading-size-mobile-rem: calc(var(--typo-heading-size-mobile) / var(--calc-rem-base));
  --clamp-val-calc: var(--typo-heading-size) / var(--brex-viewport--page-width) * 100vw;

  font-family: var(--typo-heading-family, var(--font-heading--family));
  font-size: clamp(var(--typo-heading-size-mobile-rem), var(--clamp-val-calc), var(--typo-heading-size-rem));
  line-height: var(--typo-heading-lh);
  font-weight: bold;
  color: var(--custom-color-foreground, var(--color-foreground-heading));
  background-color: transparent !important;
  letter-spacing: -0.023em;
}

.brex-component__desc-list {
  width: 100%;
  padding: 0;
  margin: 0;
  list-style: none;

  @media screen and (min-width: 750px) {
    min-width: fit-content;
    width: auto;

    &.brex-component__desc-list--width-fill {
      width: 100%;
    }
    
    &.brex-component__desc-list--width-custom {
      width: min(var(--width, auto), 100%);
    }
  }
}

.brex-component__desc-item {
  padding-block: 1em;  
  text-align: var(--text-align, left);
  line-height: var(--typo-body-lh);

  & + & {
    border-top: 1px solid var(--color-border);
  }

  .desc-item__text {
    color: var(--custom-color-foreground, var(--color-foreground));

    & + & {
      margin-top: clamp(.3125rem, calc(8 / var(--brex-viewport--page-width) * 100vw), .5rem);
    }

    strong, h1, h2, h3, h4, h5, h6 {
      font-weight: 600;
    }
  }

  .desc-item__text-font-style--accent {
    color: var(--custom-color-foreground, var(--color-foreground-heading));
    font-weight: 500;
  }

  .desc-item__text-font-style--secondary {
    font-size: max(1rem, .833em);
    color: var(--custom-color-foreground, var(--color-foreground-gray-3));
  }

  @media screen and (max-width: 749px) {
    text-align: var(--text-align--mobile, --text-align);
  }
}

.brex-component__desc-item--row {
  display: flex;
  align-items: baseline;
  gap: .5em;

  .desc-item__text--nowrap {
    flex-shrink: 0;
  }

  &[style*="--text-align: left;"] {
    justify-content: start;
  }

  &[style*="--text-align: center;"] {
    justify-content: center;
  }

  &[style*="--text-align: right;"] {
    justify-content: end;
  }

  @media screen and (max-width: 749px) {
    &[style*="--text-align--mobile: left;"] {
      justify-content: start;
    }

    &[style*="--text-align--mobile: center;"] {
      justify-content: center;
    }
  
    &[style*="--text-align--mobile: right;"] {
      justify-content: end;
    }
  }
}

.brex-component__desc-item--row-align-justify {
  justify-content: space-between !important;

  .desc-item__text:first-child {
    text-align: left;
  }

  .desc-item__text:last-child {
    text-align: right;
  }
}

.brex-component__chips-list {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(1rem, calc(48 / var(--brex-viewport--page-width) * 100vw), 3rem);
  justify-content: var(--align-horizontal, start);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: max(.75rem, 0.834em);
}

.brex-component__chips-item {
  width: clamp(4.5rem, calc(136 / var(--brex-viewport--page-width) * 100vw), 8.5rem);

  .chips-item__image {
    display: block;
    border-radius: 50%;
    overflow: hidden;
    margin-bottom: clamp(.375rem, calc(8 / var(--brex-viewport--page-width) * 100vw), .75rem);
  }
  
  .chips-item__text {
    display: block;
    color: var(--color-foreground-heading);
    font-weight: 500;
    text-align: center;
  }
}


/* image with text banner */ 
.brex-image-text-banner {
  display: flex;
  border-radius: var(--brex-border-radius);
  overflow: hidden;

  @media screen and (max-width: 749px) {
    border-radius: var(--brex-border-radius--mobile);
  }
}

.brex-image-text-banner__column {
  position: relative;
  flex: 1;

  &:has(.brex-image-text-banner__media) {
    display: grid;
    background-color: transparent;

    .brex-image-text-banner__media,
    .brex-image-text-banner__content {
      grid-area: 1 / 1;
    }
  }

  @media screen and (max-width: 749px) {
    &:has(.brex-image-text-banner__content--mobile-stack) {
      .brex-image-text-banner__media,
      .brex-image-text-banner__content {
        grid-area: auto;
      }

      .brex-image-text-banner__content {
        background-color: transparent;
        
        > .brex-container {
          padding: var(--page-margin) 0;
        }
      }

      .brex-image-text-banner__content--mobile-stack-bg {
        background-color: var(--custom-background-color--mobile, var(--color-background));

        > .brex-container {
          padding-inline: var(--page-margin);
          padding-bottom: 3rem;
        }
      }

      .brex-image-text-banner__content--mobile-stack-reverse {
        order: -1;
      }
    }
  }
}

.brex-image-text-banner__media {
  position: relative;
}

.brex-image-text-banner__content {
  position: relative;
  display: flex;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  align-items: var(--align-vertical, center);
  justify-content: var(--align-horizontal, center);

  > .brex-container {
    flex: 1;
    margin-inline: auto;
    padding-block: calc(var(--page-margin) * 2);
  }

  .brex-text-group {
    padding: 0;
  }

  .button, .button-secondary {
    position: relative;
    z-index: 1;
  }

  @media screen and (max-width: 749px) {
    align-items: var(--align-vertical--mobile, --align-vertical);
    background-color: transparent;
  }
}

.brex-image-text-banner__content-inner {
  @media screen and (min-width: 750px) {
    width: min(var(--width, 100%), 100%);
    max-width: min(calc(var(--width) * 100% / (var(--brex-viewport--page-width) * 1px)), 100%);

    .brex-image-text-banner__content[style*="--align-horizontal: start;"] & {
      margin-inline-end: auto;
    }

    .brex-image-text-banner__content[style*="--align-horizontal: end;"] & {
      margin-inline-start: auto;
    }

    .brex-image-text-banner__content[style*="--align-horizontal: center;"] & {
      margin-inline: auto;
    }
  }

  @media screen and (min-width: 1440px) {
    width: min(var(--width, 100%), 100%);
  }
}

@media screen and (max-width: 749px) {
  .brex-container--full-width > .brex-hero.brex-image-text-banner,
  .brex-container--full-width > .brex-2-columns > .brex-image-text-banner,
  .brex-container--full-width-mobile > .brex-hero.brex-image-text-banner,
  .brex-container--full-width-mobile > .brex-2-columns > .brex-image-text-banner {
    .brex-image-text-banner__content--mobile-stack > .brex-container {
      padding-inline: var(--page-margin);
    }
  }
}

.brex-hero {
  .brex-component__media {
    border-radius: 0;
  }

  @media screen and (min-width: 750px) {
    .brex-image-text-banner__media {
      min-height: calc(var(--brex-viewport--mobile-width) / var(--media-box-aspect-ratio) * 1px);
      max-height: calc(var(--brex-viewport--full-width) / var(--media-box-aspect-ratio) * 1px);
    }
  }

  @media screen and (min-width: 1440px) {
    .brex-container--page-width & {
      .brex-image-text-banner__content > .brex-container {
        padding-inline: calc(var(--page-margin) * 3);
      }
    }
  }
}

.brex-container--full-width > .brex-hero.brex-image-text-banner,
.brex-container--full-width > .brex-hero-swiper .brex-hero.brex-image-text-banner {
  border-radius: 0;
}

.brex-2-columns {
  @media screen and (max-width: 749px) {
    .brex-image-text-banner {
      flex-direction: column;
    }

    .brex-image-text-banner__column:has(.brex-image-text-banner__media) {
      order: -1;
    }
  }

  @media screen and (min-width: 750px) {
    .brex-image-text-banner__column:has(.brex-image-text-banner__media) {
      width: 760px;
      flex-basis: 5.28%;
    }

    .brex-image-text-banner__column:not(:has(.brex-image-text-banner__media)) .brex-image-text-banner__content > .brex-container {
      padding-block: var(--page-margin);
    }
  }

  @media screen and (min-width: 1440px) {
    .brex-image-text-banner__content > .brex-container {
      padding-inline: calc((var(--page-margin) * 2));
    }
  }
}

/* grid list */
.brex-grid-list {
  display: grid;
  grid-template-columns: repeat(var(--grid-columns, 2), auto);
  align-content: var(--align-vertical, center);
  justify-content: var(--align-horizontal, space-between);
  gap: 2rem 4rem;
  margin: 0;
  padding: 0;
  list-style: none;

  @media screen and (max-width: 749px) {
    grid-template-columns: repeat(var(--grid-columns--mobile, 2), 1fr);
    gap: 0.75rem 1.5rem;
  }

  @media screen and (min-width: 750px) and (max-width: 1199px) {
    .brex-formula__list-container[style*="--align-horizontal: space-around;"] &,
    .brex-formula__list-container[style*="--align-horizontal: space-between;"] &,
    .brex-formula__list-container[style*="--align-horizontal: space-evenly;"] &,
    .brex-formula__list-container[style*="--align-horizontal: stretch;"] & {
      justify-content: space-between;
    }
  }
}

.brex-grid-list__item {
  text-align: var(--text-align, left);

  @media screen and (max-width: 749px) {
    text-align: var(--text-align--mobile, --text-align);
  }

  @media screen and (min-width: 750px) {
    --max-column-width: calc((var(--brex-viewport--page-width) / var(--grid-columns, 2)) - (64 * var(--grid-columns, 2)));
    width: var(--column-width, 240px);
    max-width: min(calc(var(--max-column-width) / var(--brex-viewport--page-width) * 100vw), calc(var(--max-column-width) * 1px));
    transform: translate(0, var(--translate-y, 0));
    align-self: var(--align-vertical, start);
  }

  @media screen and (min-width: 1200px) {
    transform: translate(var(--translate-x, 0), var(--translate-y, 0));
  }
}

.brex-grid-list__item-title {
  margin-bottom: .375rem;
  padding-bottom: .375rem;
  border-bottom: 1px solid rgb(var(--color-foreground-accent-1-rgb, var(--color-border-rgb)) / 0.3);
  font-size: clamp(var(--brex-font-body-size--level4-rem), calc(var(--brex-font-body-size--level1) / var(--brex-viewport--page-width) * 100vw), var(--brex-font-body-size--level1-rem));
  line-height: var(--brex-font-body-lh--level1);
  color: var(--color-foreground-heading);
}

.brex-grid-list__item-desc {
  font-size: clamp(var(--brex-font-body-size--level7-rem), calc(var(--brex-font-body-size--level4) / var(--brex-viewport--page-width) * 100vw), var(--brex-font-body-size--level4-rem));
  line-height: var(--brex-font-body-lh--level4);
}

/* card list */
.brex-card-list {
  display: flex;
  justify-content: var(--align-horizontal, center);
  align-items: normal;
  gap: 1rem;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  list-style: none;

  @media screen and (max-width: 749px) {
    display: grid;
    grid-template-columns: 1fr;
    gap: .5rem;
    justify-content: normal;
  }
}

.brex-card-list--bg {
  padding: 1rem;
  background-color: var(--bg-color, transparent);
  border-radius: var(--brex-border-radius);
  overflow: hidden;

  @media screen and (max-width: 749px) {
    padding: .5rem;
    border-radius: var(--brex-border-radius--mobile);
  }
}

.brex-card-list--row {
  @media screen and (max-width: 749px) {
    .brex-card-list__content {
      align-content: var(--align-vertical, start);
    }

    &.brex-card-list--mobile-columns-2 {
      gap: .5rem;

      grid-template-columns: repeat(2, 1fr);

      .brex-card-list__content {
        padding-block: .5rem;
      }

      .brex-card-list__item {
        display: flex;
        flex-direction: column;
      }
    }
  }

  @media screen and (min-width: 750px) {
    .brex-card-list__item {
      display: flex;
      gap: 1rem;
      width: calc(50% - calc(1rem / 2));
      max-width: 712px;
    }

    .brex-card-list__media {
      width: 35%;
      max-width: 240px;
      flex: none;
      align-self: baseline;
    }

    .brex-card-list__content {
      flex: 1;
      align-self: var(--align-vertical, start);
      padding-inline: min(32 / var(--brex-viewport--page-width) * 100vw, 2rem);

      .brex-card-list__item--media-align-reverse & {
        order: -1;
      }
    }

    .brex-card-list__item-title {
      margin-bottom: clamp(.5rem, calc(16 / var(--brex-viewport--page-width) * 100vw), 1rem);
      font-size: clamp(var(--brex-font-body-size--level5-rem), calc(var(--brex-font-body-size--level2) / var(--brex-viewport--page-width) * 100vw), var(--brex-font-body-size--level2-rem));
      line-height: var(--brex-font-body-lh--level2);
    }

    .brex-card-list__item-desc {
      font-size: clamp(var(--brex-font-body-size--level6-rem), calc(var(--brex-font-body-size--level4) / var(--brex-viewport--page-width) * 100vw), var(--brex-font-body-size--level4-rem));
      line-height: var(--brex-font-body-lh--level4);
    }
  }
}

.brex-card-list--column {
  @media screen and (min-width: 750px) {
    .brex-card-list__item {  
      display: flex;
      flex-direction: column;
      flex: none;
      width: calc(33.33% - calc(1rem * 2 / 3));
      max-width: 469px;
    }

    .brex-card-list__content {
      align-content: var(--align-vertical, start);
    }
  }
}

.brex-card-list--boxed {
  background-color: transparent !important;

  .brex-card-list__item {
    background-color: var(--color-background);
  }

  .brex-card-list__content {
    padding-block: clamp(1rem, calc(36 / var(--brex-viewport--page-width) * 100vw), 2.25rem);
    padding-inline: clamp(1.25rem, calc(40 / var(--brex-viewport--page-width) * 100vw), 2.5rem);
  }
}

.brex-card-list__media {
  position: relative;
}

.brex-card-list__content {
  flex: 1;
  padding-block: clamp(.75rem, calc(16 / var(--brex-viewport--page-width) * 100vw), 1rem);
  text-align: var(--text-align, left);

  @media screen and (max-width: 749px) {
    text-align: var(--text-align--mobile, --text-align);

    &:has(.brex-card-list__item-icon) {
      display: flex;
      gap: .75rem;
      align-items: var(--align-vertical--mobile, start);

      .brex-card-list__item-icon {
        flex: none;
        margin: 0;
      }

      .brex-card-list__item-content {
        flex: 1;
      }
    }
  }
}

.brex-card-list__item-icon {
  margin-bottom: clamp(12px, calc(16 / var(--brex-viewport--page-width) * 100vw), 16px);

  img, svg {
    display: inline-block;
    vertical-align: baseline;
    aspect-ratio: var(--aspect-ratio);

    @media screen and (max-width: 749px) {
      max-width: 2.5rem;
    }
  }
}

.brex-card-list__item {
  border-radius: var(--brex-border-radius);
  overflow: hidden;

  @media screen and (max-width: 749px) {
    border-radius: var(--brex-border-radius--mobile);
  }
}

.brex-card-list__item-title {
  margin-bottom: clamp(.25rem, calc(8 / var(--brex-viewport--page-width) * 100vw), .5rem);
  font-size: clamp(var(--brex-font-body-size--level5-rem), calc(var(--brex-font-body-size--level3) / var(--brex-viewport--page-width) * 100vw), var(--brex-font-body-size--level3-rem));
  line-height: var(--brex-font-body-lh--level3);
  color: var(--color-foreground-gray-1); 

  strong, h1, h2, h3, h4, h5, h6 {
    font-weight: 600;
  }
}

.brex-card-list__item-desc {
  font-size: clamp(var(--brex-font-body-size--level6-rem), calc(var(--brex-font-body-size--level5) / var(--brex-viewport--page-width) * 100vw), var(--brex-font-body-size--level5-rem));
  line-height: var(--brex-font-body-lh--level5);

  strong, h1, h2, h3, h4, h5, h6 {
    font-weight: 600;
  }

  > * {
    margin-block: .25em;
  } 
}


/* formula */
.brex-formula {
  display: grid;

  &:has(.brex-formula__media) {
    .brex-formula__list-container {
      width: 100%;
    }

    @media screen and (max-width: 749px) {
      .brex-formula__media,
      .brex-formula__header {
        grid-area: 1 / 1;
      }

      .brex-formula__header {
        align-content: baseline;

        .brex-text-group {
          padding-block: calc(var(--page-margin) * 2);
        }
      }

      .brex-formula__content {
        display: contents;
      }

      .brex-grid-list {
        padding-inline: .5rem;
        padding-bottom: 1.5rem;
      }
    }
    
    @media screen and (min-width: 750px) {
      .brex-formula__media,
      .brex-formula__content {
        grid-area: 1 / 1;
      }

      .brex-formula__content {
        display: flex;
        flex-direction: column;
        position: relative;
        padding-block: var(--brex-section-padding-normal-rem);
      }
      
      .brex-formula__list-container {
        flex: 1;
        display: grid;
      }
    }
  }

  .brex-grid-list__item-title {
    color: var(--color-foreground-accent-1);
    font-family: var(--font-heading--family);
  }
}


/* faq */
.brex-component-section .accordion {
  .details__header {
    padding-block: 1rem;
    gap: .75rem;
    font-size: var(--brex-font-body-size--level5-rem);
    line-height: var(--brex-font-body-lh--level5);
    color: var(--color-foreground-heading);
    font-weight: 500;

    .svg-wrapper {
      width: 1rem;
      height: 1rem;
      flex: none;
    }

    @media screen and (min-width: 750px) {
      padding: 2rem;
      gap: 1.5rem;
      font-size: var(--brex-font-body-size--level4-rem);
      line-height: var(--brex-font-body-lh--level4);

      .svg-wrapper {
        width: 1rem;
        height: 1rem;
      }
    }
  }

  .details-content {
    padding-bottom: 1rem;
    font-size: var(--brex-font-body-size--level6-rem);
    line-height: var(--brex-font-body-lh--level6);
    color: var(--color-foreground-gray-3);

    @media screen and (min-width: 750px) {
      padding: 0 5rem 2rem 2rem;
      font-size: var(--brex-font-body-size--level5-rem);
      line-height: var(--brex-font-body-lh--level5);
    }
  }
}

/* swiper */
.brex-card-swiper {
  display: block;

  .swiper {
    overflow: visible;
  }

  .swiper-slide {
    height: auto;
  }

  .brex-card-list {
    display: flex;
    flex-wrap: nowrap;
    gap: 0;
  }

 .brex-card-list__item {
    width: 100%;
    height: 100%;
    max-width: none;
  }
}

.brex-hero-swiper {
  display: block;

  .swiper > .brex-container {
    position: relative;
  }

  .swiper-slide {
    height: auto;
  }

  .brex-hero {
    min-width: 100%;
  }

  .swiper-controls-wrapper {
    left: var(--page-margin);
    bottom: clamp(1.5rem, calc(41 / var(--brex-viewport--page-width) * 100vw), 2.5625rem);

    .swiper-button-prev svg {
      transform: rotate(90deg);
    }
    
    .swiper-button-next svg {
      transform: rotate(-90deg);
    }

    @media screen and (max-width: 749px) {
      right: var(--page-margin);
      width: auto;
    }
  }

  .brex-hero {
    height: 100%;
  }
}

.brex-horizontal-swiper {
  display: block;

  .swiper {
    overflow: visible;
  }

  .swiper-slide {
    width: auto;
  }

  .brex-component__chips-list {
    flex-wrap: nowrap;
    gap: 0;
  }

  .brex-component__chips-item {
    margin-inline: clamp(.5rem, calc(24 / var(--brex-viewport--page-width) * 100vw), 1.5rem);

    .swiper-slide:first-child & {
      margin-left: 0;
    }

    .swiper-slide:last-child & {
      margin-right: 0;
    }
  }

  .swiper-button-prev,
  .swiper-button-next {
    width: 1.25rem;
    height: 1.25rem;
  }

  &:not(:has(.swiper-button-lock)) {
    .brex-component__chips-list { 
      justify-content: normal;
    }
  }
}

.swiper-pagination {
  position: static;
  inset: auto;
  margin-top: clamp(.375rem, calc(16 / var(--brex-viewport--page-width) * 100vw), 1rem);
}

.swiper-pagination-bullet,
.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
  width: 6px;
  height: 6px;
  margin: 5px;
  border-radius: 50%;
  background-color: var(--color-foreground-gray-1);
}

.swiper-pagination-bullet-active {
  background-color: rgb(var(--color-foreground-gray-1-rgb) / 0.5);
}

.swiper-button-prev,
.swiper-button-next {
  color: var(--color-foreground-heading);
}

.swiper-pagination.swiper-pagination--progress {
  width: 200px;
  display: flex;
  margin: 0;
  height: 2px;

  .swiper-pagination-bullet {
    position: relative;
    flex: 1;
    width: auto;
    height: 2px;
    margin: 0;
    border-radius: 0;
  }

  .swiper-pagination-bullet-active {
    background-color: var(--color-foreground-heading);
  }
}

.swiper-fraction {
  flex: none;
  color: var(--color-foreground-heading);
  font-weight: 500;
}

.swiper-fraction__total {
  color: rgb(var(--color-foreground-heading-rgb) / 0.5);
}

.swiper-controls-wrapper {
  position: absolute;
  z-index: 5;
  display: flex;
  align-items: center;
  width: 18.125rem;
  font-size: .875rem;

  .swiper-button-prev,
  .swiper-button-next,
  .swiper-pagination {
    position: relative;
    z-index: 0;
    margin: 0;
    inset: auto;
  }

  .swiper-button-prev,
  .swiper-button-next {
    width: 1.25rem;
    height: 1.25rem;

    svg {
      fill: transparent;
    }
  }

  .swiper-pagination {
    flex: 1;
  }

  .swiper-pagination {
    margin: 0 0.75rem;;
  }
}

.swiper:not(.swiper-initialized) {
  opacity: 0;
}