.flex-layout.solutions {
  padding-inline: max(1rem, calc(4.5 * var(--su)));
  padding-block: 0 max(1rem, calc(1 * var(--su)));
}

.flex-layout.solutions .solutions-section {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(167, 162, 160, 0.6);
  border-radius: max(8px, calc(0.5 * var(--su))) max(8px, calc(0.5 * var(--su))) 0 0;
  background-color: var(--wit);
  padding: max(2.5rem, calc(4 * var(--su))) max(1.5rem, calc(5.5 * var(--su))) max(3rem, calc(6 * var(--su)));
}

.flex-layout.solutions .solutions-head {
  text-align: center;
}

.flex-layout.solutions .solutions-label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: max(6px, calc(0.375 * var(--su)));
  margin: 0;
  color: var(--ats-blue);
  font-size: var(--desktop-body-xxs);
  line-height: 1.63;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.flex-layout.solutions .solutions-label-dot {
  width: max(8px, calc(0.5 * var(--su)));
  height: max(8px, calc(0.5 * var(--su)));
  background-color: var(--ats-yellow);
}

.flex-layout.solutions .solutions-text {
  margin-top: max(1rem, calc(1.5 * var(--su)));
  color: var(--ats-blue);
  font-size: var(--desktop-body-sm);
  line-height: 1.63;
}

.flex-layout.solutions .solutions-text > *:first-child {
  margin-top: 0;
}

.flex-layout.solutions .solutions-text > *:last-child {
  margin-bottom: 0;
}

.flex-layout.solutions .solutions-text h1,
.flex-layout.solutions .solutions-text h2,
.flex-layout.solutions .solutions-text h3 {
  margin: 0;
  color: var(--ats-blue);
  line-height: 1.1;
  letter-spacing: -0.01em;
}

.flex-layout.solutions .solutions-tabs {
  display: flex;
  justify-content: center;
  gap: max(0.25rem, calc(0.1875 * var(--su)));
  width: fit-content;
  margin: max(1.5rem, calc(2.5 * var(--su))) auto 0;
  padding: max(0.375rem, calc(0.4375 * var(--su)));
  border: 1px solid var(--wit);
  border-radius: max(8px, calc(0.5 * var(--su)));
  background-color: var(--licht-grijs);
}

.flex-layout.solutions .solutions-tab {
  min-width: max(8rem, calc(11.5 * var(--su)));
  padding: max(0.75rem, calc(0.875 * var(--su))) max(1rem, calc(1 * var(--su)));
  border: 0;
  border-radius: max(4px, calc(0.25 * var(--su)));
  background-color: transparent;
  color: var(--ats-blue);
  font-size: var(--desktop-body-sm);
  line-height: 1.63;
  cursor: pointer;
  transition: background-color 0.35s ease, box-shadow 0.35s ease, color 0.35s ease;
}

.flex-layout.solutions .solutions-tab:hover {
  background-color: color-mix(in srgb, var(--wit) 50%, transparent);
}

.flex-layout.solutions .solutions-tab.is-active,
.flex-layout.solutions .solutions-tab.is-active:hover {
  background-color: var(--wit);
}

.flex-layout.solutions .solutions-tab:focus-visible {
  outline: 2px solid var(--ats-blue);
  outline-offset: 2px;
}

.flex-layout.solutions .solutions-panels {
  display: grid;
  margin-top: max(1.5rem, calc(2.875 * var(--su)));
}

.flex-layout.solutions .solutions-panel {
  grid-area: 1 / 1;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.45s ease, visibility 0.45s;
}

.flex-layout.solutions .solutions-panel.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.flex-layout.solutions .solutions-card-visual,
.flex-layout.solutions .solutions-card-title,
.flex-layout.solutions .solutions-card-intro,
.flex-layout.solutions .solutions-usps,
.flex-layout.solutions .solutions-actions {
  opacity: 0;
  translate: 0 16px;
  transition: opacity 0.5s ease, translate 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.flex-layout.solutions .solutions-panel.is-active .solutions-card-visual,
.flex-layout.solutions .solutions-panel.is-active .solutions-card-title,
.flex-layout.solutions .solutions-panel.is-active .solutions-card-intro,
.flex-layout.solutions .solutions-panel.is-active .solutions-usps,
.flex-layout.solutions .solutions-panel.is-active .solutions-actions {
  opacity: 1;
  translate: 0 0;
}

.flex-layout.solutions .solutions-panel.is-active .solutions-card-visual {
  transition-delay: 0.08s;
}

.flex-layout.solutions .solutions-panel.is-active .solutions-card-title {
  transition-delay: 0.14s;
}

.flex-layout.solutions .solutions-panel.is-active .solutions-card-intro {
  transition-delay: 0.2s;
}

.flex-layout.solutions .solutions-panel.is-active .solutions-usps {
  transition-delay: 0.26s;
}

.flex-layout.solutions .solutions-panel.is-active .solutions-actions {
  transition-delay: 0.32s;
}

.flex-layout.solutions .solutions-section:not(.is-inview) .solutions-panel.is-active .solutions-card-visual,
.flex-layout.solutions .solutions-section:not(.is-inview) .solutions-panel.is-active .solutions-card-title,
.flex-layout.solutions .solutions-section:not(.is-inview) .solutions-panel.is-active .solutions-card-intro,
.flex-layout.solutions .solutions-section:not(.is-inview) .solutions-panel.is-active .solutions-usps,
.flex-layout.solutions .solutions-section:not(.is-inview) .solutions-panel.is-active .solutions-actions {
  opacity: 0;
  translate: 0 16px;
}

@media (prefers-reduced-motion: reduce) {
  .flex-layout.solutions .solutions-section:not(.is-inview) .solutions-panel.is-active > *,
  .flex-layout.solutions .solutions-panel,
  .flex-layout.solutions .solutions-card-visual,
  .flex-layout.solutions .solutions-card-title,
  .flex-layout.solutions .solutions-card-intro,
  .flex-layout.solutions .solutions-usps,
  .flex-layout.solutions .solutions-actions {
    transition: none;
    translate: none;
    opacity: 1;
  }
}

.flex-layout.solutions .solutions-card {
  display: grid;
  grid-template-columns: 582fr 514fr;
  gap: max(1.5rem, calc(5.625 * var(--su)));
  border: 1px solid rgba(167, 162, 160, 0.6);
  border-radius: max(8px, calc(0.5 * var(--su)));
  background-color: rgba(245, 245, 245, 0.6);
  box-shadow: 0 0 20px rgba(33, 75, 150, 0.05);
  padding: max(0.75rem, calc(1 * var(--su)));
}

.flex-layout.solutions .solutions-card-visual {
  position: relative;
  height: max(16rem, calc(33 * var(--su)));
  border-radius: max(4px, calc(0.25 * var(--su)));
  background-color: var(--licht-grijs);
  overflow: hidden;
}

.flex-layout.solutions .solutions-card-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: auto;
}

.flex-layout.solutions .solutions-chip {
  position: absolute;
  top: max(0.75rem, calc(0.875 * var(--su)));
  left: max(0.75rem, calc(1.0625 * var(--su)));
  display: inline-flex;
  align-items: center;
  padding: max(0.4375rem, calc(0.4375 * var(--su))) max(0.75rem, calc(0.75 * var(--su))) max(0.5rem, calc(0.5 * var(--su)));
  border: 1px solid rgba(245, 245, 245, 0.5);
  border-radius: max(4px, calc(0.25 * var(--su)));
  background-color: rgba(247, 247, 245, 0.1);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  color: var(--wit);
  font-size: var(--desktop-body-xxs);
  line-height: 1.2;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.flex-layout.solutions .solutions-number {
  position: absolute;
  top: max(0.75rem, calc(1.3125 * var(--su)));
  right: max(0.75rem, calc(1.25 * var(--su)));
  color: var(--wit);
  font-size: var(--desktop-body-xxs);
  line-height: 0.9;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.flex-layout.solutions .solutions-card-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
  justify-content: center;
}

.flex-layout.solutions .solutions-card-title {
  margin: 0;
  color: var(--ats-blue);
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.flex-layout.solutions .solutions-card-intro {
  margin: max(0.75rem, calc(0.5 * var(--su))) 0 0;
  color: var(--ats-blue);
  font-size: var(--desktop-body-sm);
  line-height: 1.63;
}

.flex-layout.solutions .solutions-usps {
  width: 100%;
  margin-top: max(1.5rem, calc(1.6875 * var(--su)));
  border-top: 1px solid rgba(167, 162, 160, 0.4);
  padding-top: max(0.75rem, calc(1 * var(--su)));
}

.flex-layout.solutions .solutions-usps-label {
  margin: 0;
  color: var(--ats-blue);
  font-size: var(--desktop-body-xxs);
  line-height: 1.63;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.flex-layout.solutions .solutions-usp-list {
  margin: max(0.5rem, calc(0.625 * var(--su))) 0 0;
  padding: 0;
  list-style: none;
}

.flex-layout.solutions .solutions-usp {
  display: flex;
  align-items: center;
  gap: max(0.5rem, calc(0.625 * var(--su)));
  min-height: max(1.5rem, calc(1.625 * var(--su)));
  color: var(--ats-blue);
  font-size: var(--desktop-body-sm);
  line-height: 1.63;
}

.flex-layout.solutions .solutions-usp svg {
  flex-shrink: 0;
  width: max(0.875rem, calc(0.875 * var(--su)));
  height: auto;
  color: var(--ats-blue);
}

.flex-layout.solutions .solutions-actions {
  display: flex;
  align-items: center;
  gap: max(0.5rem, calc(0.5 * var(--su)));
  margin-top: max(1.5rem, calc(1.6875 * var(--su)));
}

.flex-layout.solutions .solutions-arrow {
  color: var(--ats-blue);
}

@media only screen and (max-width: 991px) {
  .flex-layout.solutions {
    padding-inline: max(1rem, calc(1 * var(--su)));
  }

  .flex-layout.solutions .solutions-section {
    padding-inline: max(1.5rem, calc(2.5 * var(--su)));
  }

  .flex-layout.solutions .solutions-tabs {
    width: 100%;
    overflow-x: auto;
    justify-content: flex-start;
  }

  .flex-layout.solutions .solutions-tab {
    flex-shrink: 0;
  }

  .flex-layout.solutions .solutions-card {
    grid-template-columns: minmax(0, 1fr);
    gap: max(1.5rem, calc(2 * var(--su)));
  }

  .flex-layout.solutions .solutions-card-visual {
    height: auto;
    aspect-ratio: 582 / 440;
  }

  .flex-layout.solutions .solutions-card-body {
    padding: 0 max(0.75rem, calc(1 * var(--su))) max(1rem, calc(1.5 * var(--su)));
  }
}

@media only screen and (max-width: 767px) {
  .flex-layout.solutions {
    padding-inline: 0;
  }

  .flex-layout.solutions .solutions-section {
    border-radius: 0;
    padding: 2.5rem 1rem 3rem;
  }
}

.flex-layout.verhaal:has(+ .flex-layout.solutions),
.flex-content:has(> .flex-layout.verhaal:last-child):has(+ .flex-content > .flex-layout.solutions:first-child) > .flex-layout.verhaal:last-child {
  margin-bottom: 0;
}

.flex-layout.verhaal:has(+ .flex-layout.solutions) .verhaal-inner,
.flex-content:has(> .flex-layout.verhaal:last-child):has(+ .flex-content > .flex-layout.solutions:first-child) > .flex-layout.verhaal:last-child .verhaal-inner {
  padding-bottom: clamp(3rem, calc(36.8 * var(--su)), 589px);
}

.flex-layout.verhaal + .flex-layout.solutions,
.flex-content:has(> .flex-layout.verhaal:last-child) + .flex-content > .flex-layout.solutions:first-child {
  margin-top: clamp(-344px, calc(-21.5 * var(--su)), -6rem);
}

@media only screen and (max-width: 991px) {
  .flex-layout.verhaal + .flex-layout.solutions,
  .flex-content:has(> .flex-layout.verhaal:last-child) + .flex-content > .flex-layout.solutions:first-child {
    margin-top: max(-6rem, calc(-8 * var(--su)));
  }
}

@media only screen and (max-width: 767px) {
  .flex-layout.verhaal + .flex-layout.solutions,
  .flex-content:has(> .flex-layout.verhaal:last-child) + .flex-content > .flex-layout.solutions:first-child {
    margin-top: 0;
  }

  .flex-layout.verhaal:has(+ .flex-layout.solutions) .verhaal-inner,
  .flex-content:has(> .flex-layout.verhaal:last-child):has(+ .flex-content > .flex-layout.solutions:first-child) > .flex-layout.verhaal:last-child .verhaal-inner {
    padding-bottom: 5rem;
  }
}

.flex-layout.solutions:has(+ .flex-layout.logo_slider),
.flex-content:has(> .flex-layout.solutions:last-child):has(+ .flex-content > .flex-layout.logo_slider:first-child) > .flex-layout.solutions:last-child {
  padding-bottom: 0;
  margin-bottom: max(-34px, calc(-2.125 * var(--su)));
}