.overflowing-columns {
  position: relative;
  z-index: 1;

  margin-block: var(--spacing-offset, var(--space-1200));
  overflow: hidden;
}

/* Background
======================================================== */

.overflowing-columns .background {
  position: absolute;
  inset: 0;
  z-index: -1;
}

.overflowing-columns .background > * {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.overflowing-columns .background .background_image {
  position: absolute;
  inset: 0;
  z-index: -1;
}

.overflowing-columns .background::before,
.overflowing-columns .background::after {
  content: "";
  position: absolute;
  left: 0;

  width: 100%;
  height: var(--background-fade-height);

  pointer-events: none;
  user-select: none;

  background: linear-gradient(
    rgba(237, 237, 230, 0),
    rgb(237, 237, 230)
  );
}

.overflowing-columns .background::before {
  top: 0;
  rotate: 180deg;
}

.overflowing-columns .background::after {
  bottom: 0;
}

.overflowing-columns .background video {
  transform-style: preserve-3d;
  pointer-events: none;
}

@media (prefers-reduced-motion) {
  .overflowing-columns .background video {
    display: none;
  }
}

/* Header
======================================================== */

.overflowing-columns header {
  max-width: var(--content-wrapper-max-width, 100vw);
  margin-inline: auto;
  padding-inline: var(--container-padding-inline);
}

.overflowing-columns header .tagline,
.overflowing-columns .columns .column .tagline {
  display: block;
  margin-bottom: var(--space-0);

  font-family: "kepler-3-display-variable", serif;
  font-style: italic;
}

.overflowing-columns header .tagline {
  color: var(--color-blue-75);
  opacity: 0.8;

  font-size: var(--fs-tagline-lg-size);
  line-height: var(--fs-tagline-lg-line-height);
  font-weight: var(--fs-tagline-lg-weight, normal);
  letter-spacing: var(--fs-tagline-lg-letter-spacing, normal);
}

.overflowing-columns .columns .column .tagline {
  color: var(--color-black-100);
  opacity: 1;

  font-size: var(--fs-tagline-xl-size);
  line-height: var(--fs-tagline-xl-line-height);
  font-weight: var(--fs-tagline-xl-weight, normal);
  letter-spacing: var(--fs-tagline-xl-letter-spacing, normal);
}

.overflowing-columns header .title {
  margin-bottom: var(--space-300);

  font-size: var(--fs-title-md-size);
  line-height: var(--fs-title-md-line-height);
  font-weight: var(--fs-title-md-weight, normal);
  letter-spacing: var(--fs-title-md-letter-spacing, normal);
}

@media (min-width: 768px) {
  .overflowing-columns header .title {
    margin-bottom: var(--space-200);
  }
}

@media (min-width: 992px) {
  .overflowing-columns header .title {
    margin-bottom: var(--space-300);
  }
  .overflowing-columns header .text{
    max-width: 800px;
  }  
}

.overflowing-columns header .text {
  margin-bottom: var(--space-600);
}

@media (min-width: 768px) {
  .overflowing-columns header .text {
    margin-bottom: var(--space-1200);
  }
}

.overflowing-columns header .text,
.overflowing-columns header .text > *:not(h1, h2, h3, h4, h5, h6) {
  font-size: var(--fs-paragraph-md-size);
  line-height: var(--fs-paragraph-md-line-height);
  font-weight: var(--fs-paragraph-md-weight, normal);
  letter-spacing: var(--fs-paragraph-md-letter-spacing, normal);
}

.overflowing-columns header .text a::after {
  filter: brightness(0);
}

/* Header buttons layout only
   Button colors/states should come from global button CSS.
======================================================== */

.overflowing-columns header .buttons {
  display: flex;
  flex-direction: column;
  gap: var(--layout-gap);

  margin-top: var(--space-300);
  margin-bottom: var(--space-300);
}

@media (min-width: 992px) {
  .overflowing-columns header .buttons {
    flex-direction: row;
    justify-content: flex-start;

    margin-top: var(--space-400);
    margin-bottom: var(--space-400);
  }
}

.overflowing-columns header.has-text.has-buttons .text {
  margin-bottom: var(--space-400);
}

/* Column content
======================================================== */

.overflowing-columns .columns .column {
  display: flex;
  flex-direction: column;
}

.overflowing-columns .columns .column.left {
  text-align: left;
}

.overflowing-columns .columns .column.center {
  text-align: center;
}

.overflowing-columns .columns .column.right {
  text-align: right;
}

.overflowing-columns .columns .title {
  font-size: var(--fs-title-md-size);
  line-height: var(--fs-title-md-line-height);
  font-weight: var(--fs-title-md-weight, normal);
  letter-spacing: var(--fs-title-md-letter-spacing, normal);
}

.overflowing-columns .columns .title.has-sub-title {
  font-size: var(--fs-title-xl-size);
  line-height: var(--fs-title-xl-line-height);
  font-weight: var(--fs-title-xl-weight, normal);
  letter-spacing: var(--fs-title-xl-letter-spacing, normal);
}

.overflowing-columns .columns .sub-title {
  margin-bottom: var(--space-200);

  font-size: var(--fs-title-md-size);
  line-height: var(--fs-title-md-line-height);
  font-weight: var(--fs-title-md-weight, normal);
  letter-spacing: var(--fs-title-md-letter-spacing, normal);
}

@media (min-width: 992px) {
  .overflowing-columns .columns .sub-title {
    margin-bottom: var(--space-300);
  }
}

.overflowing-columns .columns .text {
  color: var(--color-black-80);
  margin-bottom: var(--space-300);
}

@media (min-width: 768px) {
  .overflowing-columns .columns .text {
    margin-bottom: var(--space-400);
  }
}

.overflowing-columns .columns .text,
.overflowing-columns .columns .text > *:not(h1, h2, h3, h4, h5, h6) {
  font-size: var(--fs-paragraph-md-size);
  line-height: var(--fs-paragraph-md-line-height);
  font-weight: var(--fs-paragraph-md-weight, normal);
  letter-spacing: var(--fs-paragraph-md-letter-spacing, normal);
}

/* Column buttons
   Base button styling should come from global button CSS.
======================================================== */

.overflowing-columns .columns .button {
  margin-top: auto;
  margin-bottom: var(--border-width-sm);
}

/* Columns carousel / layout
======================================================== */

.overflowing-columns ul.columns {
  position: relative;
  left: 50%;
  right: 50%;

  display: flex;
  flex-direction: row;
  align-items: stretch;
  align-content: stretch;

  width: 100vw;
  max-width: 100vw;
  margin-inline: -50vw;
  padding: var(--space-0);

  gap: var(--section-gap);

  overflow-x: scroll;
  scrollbar-width: none;

  list-style: none;

  --overflowing-columns-inline-padding: var(--container-padding-inline);
}

@supports not (scrollbar-width: auto) {
  .overflowing-columns ul.columns::-webkit-scrollbar {
    display: none;
  }
}

.overflowing-columns ul.columns::after {
  content: "";
  padding-right: 0.02px;
}

.overflowing-columns ul.columns[data-drag="true"] {
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
}

.overflowing-columns ul.columns[data-drag="true"]:active > * {
  cursor: inherit;
}

.overflowing-columns ul.columns[data-scroll-snap="snap"] {
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
}

.overflowing-columns ul.columns > * {
  display: block;
  flex-shrink: 0;

  width: calc(100% - var(--container-padding-inline) * 2);
  margin-inline: var(--space-0);

  scroll-snap-align: center;
}

.overflowing-columns ul.columns > *:first-child {
  margin-left: calc(
    50vw - 50% + max(var(--container-padding-inline), env(safe-area-inset-right))
  );
}

.overflowing-columns ul.columns > *:last-child:not(:first-child) {
  margin-left: var(--space-0);
  margin-right: calc(
    50vw - 50% + max(var(--container-padding-inline), env(safe-area-inset-right))
  );
}

@media (min-width: 768px) {
  .overflowing-columns ul.columns {
    left: 0;
    right: 0;

    width: 100%;
    max-width: var(--content-wrapper-max-width, 100vw);
    margin-inline: auto;
    padding-inline: var(--container-padding-inline);
    padding-bottom: var(--space-050);

    overflow: visible;

    cursor: auto !important;
    user-select: auto !important;
    -webkit-user-select: auto !important;
  }

  .overflowing-columns ul.columns > * {
    width: calc((100% - var(--section-gap) * (var(--columns, 3) - 1)) / var(--columns, 3));
    margin-inline: var(--space-0) !important;
  }

  .overflowing-columns ul.columns::after {
    display: none;
  }
}

/* Scroll indicator
======================================================== */

.overflowing-columns .scroll-visual {
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: var(--layout-gap);

  margin-top: var(--space-400);
}

.overflowing-columns .scroll-visual .scroll-item {
  width: var(--space-300);
  height: 0.625rem;

  flex: 0 1 auto;

  border-radius: var(--radius-pill);
  background-color: var(--color-black-10);
}

.overflowing-columns .scroll-visual .scroll-item.active {
  background-color: var(--color-orange-75);
}

@media (min-width: 768px) {
  .overflowing-columns .scroll-visual {
    display: none;
  }
}