/*** Allianz One Breakpoints and Mixins ***/
/*** NDBX One Breakpoints and Mixins ***/
.content-section {
  padding: var(--size-4m) var(--size-m);
}

@media (min-width: 704px) {
  .content-section {
    padding: var(--size-4m) var(--size-4m);
  }
}
@media (min-width: 992px) {
  .content-section {
    padding: var(--size-4m) var(--size-xl);
  }
}
.content-section.content-section--full-width .grid {
  width: 100%;
}

.content-section.content-emphasis {
  background-color: var(--semantic-color-surface-emphasis-resting);
}

.content-section.theme--inverted {
  background-color: var(--core-color-blue-1000);
}

.content-section.theme--inverted .eyebrow {
  color: var(--semantic-color-on-surface-primary-inverse-resting);
}

.content-section--full-width {
  width: 100%;
  padding-left: 0;
  padding-right: 0;
  display: flex;
  justify-content: center;
}

.content-section .content-section-image-container {
  display: block;
  height: 240px;
  width: 100%;
  margin-bottom: var(--size-2m);
}

@media (min-width: 704px) {
  .content-section .content-section-image-container {
    height: 320px;
  }
}
@media (min-width: 992px) {
  .content-section .content-section-image-container {
    height: 480px;
  }
}
.content-section.content-section--rounded-image .content-section-image {
  border-radius: var(--semantic-border-radius-surface-l);
}

.content-section .content-section-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 64%;
}

.content-section .eyebrow {
  font-weight: 700;
  text-transform: uppercase;
  color: var(--semantic-color-on-surface-secondary-resting);
}

.content-section h3, .content-section .heading--h3 {
  margin-top: var(--margin-s);
  margin-bottom: 0;
}

.content-section .content-text {
  margin-top: var(--margin-xxl);
}

@media (min-width: 704px) {
  .content-section .content-text {
    margin-top: var(--margin-xxxl);
  }
}
.content-section .swap-content-area {
  margin-top: var(--size-2m);
  margin-bottom: var(--size-2m);
}

@media (min-width: 992px) {
  .content-section .swap-content-area {
    margin-top: var(--size-4m);
    margin-bottom: var(--size-4m);
  }
}
.content-section .swap-content-area.u-no-margin-bottom {
  margin-bottom: 0;
}

.content-section .swap-content-area.u-no-vertical-margin {
  margin-top: 0;
  margin-bottom: 0;
}

.content-section .demo-content {
  height: 144px;
  width: 100%;
  background-color: #e1e1e1;
}

.content-section .button-gap {
  display: flex;
  gap: var(--size-s);
  flex-direction: column;
}

.content-section .button-gap .button {
  margin-bottom: 0px;
}

@media (min-width: 704px) {
  .content-section .button-gap {
    flex-direction: row;
  }
}
.content-section .content-section-hint {
  margin-top: var(--size-2m);
}

.content-section .hint {
  font-weight: var(--font-weight-link);
}

.content-section.theme--teal-700 {
  background-color: var(--core-color-teal-700);
}

@media (min-width: 992px) {
  .content-section .content-section-header-area {
    width: 95%;
  }
  .content-section.content-section--split-view .swap-content-area {
    margin-left: var(--margin-xxl);
    margin-top: 0;
  }
  .content-section.content-section--split-view .swap-content-area .icon-text--grid {
    display: flex;
    gap: initial;
    flex-flow: row wrap;
  }
  .content-section.content-section--split-view .swap-content-area .icon-text--grid .icon-text--card {
    display: inline-block;
    width: 100%;
    margin-bottom: 32px;
  }
}
@media (max-width: 703px) {
  .content-section.content-section--split-view .swap-content-area .icon-text--grid .icon-text--card {
    margin-bottom: 16px;
  }
}