@import url("https://fonts.googleapis.com/css2?family=Cabin:ital,wght@0,400..700;1,400..700&display=swap");
:root {
  --primary-color-1: #817676;
  --primary-color-2: #102a41;
  --primary-color-3: #ffffff;
  --secondary-color-1: #dad6d6;
  --secondary-color-2: #f3efef;
  --secondary-color-3: #bf0e0e;
  --border-radius-1: clamp(4px, calc(3.5px + 0.16vw), 7px);
  --border-radius-2: clamp(8px, calc(7px + 0.31vw), 14px);
  --border-radius-3: clamp(12px, calc(10px + 0.63vw), 24px);
  --border-radius-4: clamp(18px, calc(15px + 0.94vw), 36px);
  --border-radius-5: clamp(24px, calc(20px + 1.25vw), 48px);
  --border-radius-6: clamp(32px, calc(25px + 2.19vw), 74px);
  --space-1: clamp(2px, calc(1.75px + 0.08vw), 3.5px);
  --space-2: clamp(4px, calc(3.5px + 0.16vw), 7px);
  --space-3: clamp(6px, calc(5px + 0.31vw), 12px);
  --space-4: clamp(9px, calc(7.5px + 0.47vw), 18px);
  --space-5: clamp(12px, calc(10px + 0.63vw), 24px);
  --space-6: clamp(16px, calc(13px + 0.94vw), 34px);
  --space-7: clamp(24px, calc(20px + 1.25vw), 48px);
  --space-8: clamp(30px, calc(25px + 1.56vw), 60px);
  --space-9: clamp(36px, calc(30px + 1.88vw), 72px);
  --space-10: clamp(44px, calc(36px + 2.5vw), 92px);
  --space-11: clamp(56px, calc(45px + 3.44vw), 122px);
  --space-12: clamp(72px, calc(58px + 4.38vw), 156px);
  --space-13: clamp(96px, calc(76px + 6.25vw), 216px);
  --space-14: clamp(128px, calc(102px + 8.13vw), 284px);
  --fontsizes-1: clamp(11px, calc(10.7px + 0.09vw), 12.8px);
  --fontsizes-2: clamp(12px, calc(11.5px + 0.16vw), 15px);
  --fontsizes-3: clamp(14px, calc(13.3px + 0.22vw), 18.2px);
  --fontsizes-4: clamp(16px, calc(15.3px + 0.22vw), 20.2px);
  --fontsizes-5: clamp(18px, calc(17px + 0.31vw), 24px);
  --fontsizes-6: clamp(21px, calc(19.5px + 0.47vw), 30px);
  --fontsizes-7: clamp(24px, calc(21.5px + 0.78vw), 39px);
  --fontsizes-8: clamp(27px, calc(23.2px + 1.19vw), 50px);
  --fontsizes-9: clamp(32px, calc(26px + 1.88vw), 68px);
  --fontsizes-10: clamp(40px, calc(31.5px + 2.66vw), 91px);
  --fontsizes-11: clamp(48px, calc(36px + 3.75vw), 120px);
  --fontsizes-12: clamp(56px, calc(40px + 5vw), 152px);
  --fontsizes-13: clamp(64px, calc(44px + 6.25vw), 184px);
  --font-size-1: var(--fontsizes-1);
  --font-size-2: var(--fontsizes-2);
  --font-size-3: var(--fontsizes-3);
  --font-size-4: var(--fontsizes-4);
  --font-size-5: var(--fontsizes-5);
  --font-size-6: var(--fontsizes-6);
  --font-size-7: var(--fontsizes-7);
  --font-size-8: var(--fontsizes-8);
  --font-size-9: var(--fontsizes-9);
  --font-size-10: var(--fontsizes-10);
  --font-size-11: var(--fontsizes-11);
  --font-size-12: var(--fontsizes-12);
  --font-size-13: var(--fontsizes-13);
  --letter-spacing-1: -0.04em;
  --letter-spacing-2: -0.01em;
  --line-height-1: 100%;
  --line-height-2: 125%;
  --line-height-3: 160%;
  --font-family-1: "Cabin", sans-serif;
  --font-family-2: "Font Awesome 6 Pro";
  --font-weight-1: 300;
  --font-weight-2: 400;
  --font-weight-3: 500;
  --font-weight-4: 700;
  --font-weight-5: 900;
}

/***
    The new CSS reset - version 1.11.3 (last updated 25.08.2024)
    GitHub page: https://github.com/elad2412/the-new-css-reset
***/
/*
    Remove all the styles of the "User-Agent-Stylesheet", except for the 'display' property
    - The "symbol *" part is to solve Firefox SVG sprite bug
    - The "html" element is excluded, otherwise a bug in Chrome breaks the CSS hyphens property (https://github.com/elad2412/the-new-css-reset/issues/36)
 */
*:where(:not(html, iframe, canvas, img, svg, video, audio):not(svg *, symbol *)) {
  all: unset;
  display: revert;
}

/* Preferred box-sizing value */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Fix mobile Safari increase font-size on landscape mode */
html {
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
}

/* Reapply the pointer cursor for anchor tags */
a, button {
  cursor: revert;
}

/* Remove list styles (bullets/numbers) */
ol, ul, menu, summary {
  list-style: none;
}

/* Firefox: solve issue where nested ordered lists continue numbering from parent (https://bugzilla.mozilla.org/show_bug.cgi?id=1881517) */
ol {
  counter-reset: revert;
}

/* For images to not be able to exceed their container */
img {
  max-inline-size: 100%;
  max-block-size: 100%;
}

/* removes spacing between cells in tables */
table {
  border-collapse: collapse;
}

/* Safari - solving issue when using user-select:none on the <body> text input doesn't working */
input, textarea {
  -webkit-user-select: auto;
}

/* revert the 'white-space' property for textarea elements on Safari */
textarea {
  white-space: revert;
}

/* minimum style to allow to style meter element */
meter {
  -webkit-appearance: revert;
  appearance: revert;
}

/* preformatted text - use only for this feature */
:where(pre) {
  all: revert;
  box-sizing: border-box;
}

/* reset default text opacity of input placeholder */
::placeholder {
  color: unset;
}

/* fix the feature of 'hidden' attribute.
   display:revert; revert to element instead of attribute */
:where([hidden]) {
  display: none !important;
}

/* revert for bug in Chromium browsers
   - fix for the content editable attribute will work properly.
   - webkit-user-select: auto; added for Safari in case of using user-select:none on wrapper element*/
:where([contenteditable]:not([contenteditable=false])) {
  -moz-user-modify: read-write;
  -webkit-user-modify: read-write;
  overflow-wrap: break-word;
  -webkit-line-break: after-white-space;
  -webkit-user-select: auto;
}

/* apply back the draggable feature - exist only in Chromium and Safari */
:where([draggable=true]) {
  -webkit-user-drag: element;
}

/* Revert Modal native behavior */
:where(dialog:modal) {
  all: revert;
  box-sizing: border-box;
}

/* Remove details summary webkit styles */
::-webkit-details-marker {
  display: none;
}

body {
  font-family: var(--font-family-1);
  font-size: var(--font-size-3);
  line-height: var(--line-height-3);
}

h1 {
  font-size: var(--fontsizes-7);
  line-height: var(--line-height-1);
}

h2 {
  font-size: var(--fontsizes-6);
  line-height: var(--line-height-2);
}

h3 {
  font-size: var(--fontsizes-5);
  line-height: var(--line-height-2);
}

h4 {
  font-size: var(--fontsizes-4);
  line-height: var(--line-height-2);
}

.text-tiny {
  font-size: var(--font-size-1);
  line-height: var(--line-height-2);
}

.text-small {
  font-size: var(--font-size-2);
  line-height: var(--line-height-2);
}

.text-body {
  font-size: var(--font-size-3);
  line-height: var(--line-height-3);
}

.text-lead {
  font-size: var(--font-size-5);
  line-height: var(--line-height-3);
}

.label-small {
  font-size: var(--font-size-2);
  font-weight: var(--font-weight-4);
  line-height: var(--line-height-2);
}

.label {
  font-size: var(--font-size-3);
  font-weight: var(--font-weight-4);
  line-height: var(--line-height-2);
}

.label-large {
  font-size: var(--font-size-4);
  font-weight: var(--font-weight-4);
  line-height: var(--line-height-2);
}

.value-small {
  font-size: var(--font-size-2);
  font-weight: var(--font-weight-2);
  line-height: var(--line-height-2);
}

.value {
  font-size: var(--font-size-3);
  font-weight: var(--font-weight-2);
  line-height: var(--line-height-2);
}

.value-large {
  font-size: var(--font-size-4);
  font-weight: var(--font-weight-2);
  line-height: var(--line-height-2);
}

.caption {
  font-size: var(--font-size-1);
  line-height: var(--line-height-2);
  opacity: 0.72;
}

.notice {
  font-size: var(--font-size-2);
  line-height: var(--line-height-2);
  opacity: 0.72;
}

.eyebrow {
  font-size: var(--font-size-2);
  font-weight: var(--font-weight-4);
  letter-spacing: 0.08em;
  line-height: var(--line-height-2);
  text-transform: uppercase;
}

.title-tiny {
  font-size: var(--font-size-4);
  font-weight: var(--font-weight-4);
  line-height: var(--line-height-2);
}

.title-small {
  font-size: var(--font-size-5);
  font-weight: var(--font-weight-4);
  line-height: var(--line-height-2);
}

.title-medium {
  font-size: var(--font-size-6);
  font-weight: var(--font-weight-4);
  line-height: var(--line-height-2);
}

.title-large {
  font-size: var(--font-size-7);
  font-weight: var(--font-weight-4);
  line-height: var(--line-height-1);
}

div.sf-form-builder div.sf-form-input-wrapper div.sf-form-input-column div.sf-form-choice-wrapper label.sf-form-choice span.sf-form-checkmark {
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  border-color: var(--lichtblauw-active);
}
div.sf-form-builder div.sf-form-input-wrapper div.sf-form-input-column div.sf-form-choice-wrapper label.sf-form-choice span.sf-form-checkmark:after {
  width: 10px;
  height: 10px;
  background-color: var(--oranje-active);
}

input[type=text],
input[type=email],
input[type=date],
input[type=datetime-local],
input[type=month],
input[type=number],
input[type=password],
input[type=search],
input[type=tel],
input[type=time],
input[type=url],
input[type=week],
select,
textarea {
  width: 100%;
  color: var(--form-control-color, var(--zwart, currentColor));
  padding: var(--space-4);
  border: var(--form-control-border, var(--border-2)) !important;
  border-radius: var(--form-control-radius, var(--border-radius-1));
  background: var(--form-control-background, var(--wit, #fff));
  box-shadow: var(--form-control-shadow, none);
  font: inherit;
  font-size: var(--form-control-font-size, var(--font-size-3));
  line-height: var(--form-control-line-height, var(--line-height-2));
}
input[type=text].form-control-no-border, input[type=text].input-no-border,
input[type=email].form-control-no-border,
input[type=email].input-no-border,
input[type=date].form-control-no-border,
input[type=date].input-no-border,
input[type=datetime-local].form-control-no-border,
input[type=datetime-local].input-no-border,
input[type=month].form-control-no-border,
input[type=month].input-no-border,
input[type=number].form-control-no-border,
input[type=number].input-no-border,
input[type=password].form-control-no-border,
input[type=password].input-no-border,
input[type=search].form-control-no-border,
input[type=search].input-no-border,
input[type=tel].form-control-no-border,
input[type=tel].input-no-border,
input[type=time].form-control-no-border,
input[type=time].input-no-border,
input[type=url].form-control-no-border,
input[type=url].input-no-border,
input[type=week].form-control-no-border,
input[type=week].input-no-border,
select.form-control-no-border,
select.input-no-border,
textarea.form-control-no-border,
textarea.input-no-border {
  border-color: transparent !important;
}
input[type=text].form-control-no-shadow, input[type=text].input-no-shadow,
input[type=email].form-control-no-shadow,
input[type=email].input-no-shadow,
input[type=date].form-control-no-shadow,
input[type=date].input-no-shadow,
input[type=datetime-local].form-control-no-shadow,
input[type=datetime-local].input-no-shadow,
input[type=month].form-control-no-shadow,
input[type=month].input-no-shadow,
input[type=number].form-control-no-shadow,
input[type=number].input-no-shadow,
input[type=password].form-control-no-shadow,
input[type=password].input-no-shadow,
input[type=search].form-control-no-shadow,
input[type=search].input-no-shadow,
input[type=tel].form-control-no-shadow,
input[type=tel].input-no-shadow,
input[type=time].form-control-no-shadow,
input[type=time].input-no-shadow,
input[type=url].form-control-no-shadow,
input[type=url].input-no-shadow,
input[type=week].form-control-no-shadow,
input[type=week].input-no-shadow,
select.form-control-no-shadow,
select.input-no-shadow,
textarea.form-control-no-shadow,
textarea.input-no-shadow {
  box-shadow: none !important;
}
input[type=text].form-control-plain, input[type=text].input-plain,
input[type=email].form-control-plain,
input[type=email].input-plain,
input[type=date].form-control-plain,
input[type=date].input-plain,
input[type=datetime-local].form-control-plain,
input[type=datetime-local].input-plain,
input[type=month].form-control-plain,
input[type=month].input-plain,
input[type=number].form-control-plain,
input[type=number].input-plain,
input[type=password].form-control-plain,
input[type=password].input-plain,
input[type=search].form-control-plain,
input[type=search].input-plain,
input[type=tel].form-control-plain,
input[type=tel].input-plain,
input[type=time].form-control-plain,
input[type=time].input-plain,
input[type=url].form-control-plain,
input[type=url].input-plain,
input[type=week].form-control-plain,
input[type=week].input-plain,
select.form-control-plain,
select.input-plain,
textarea.form-control-plain,
textarea.input-plain {
  border-color: transparent !important;
  box-shadow: none !important;
}
input[type=text].form-control-small, input[type=text].input-small,
input[type=email].form-control-small,
input[type=email].input-small,
input[type=date].form-control-small,
input[type=date].input-small,
input[type=datetime-local].form-control-small,
input[type=datetime-local].input-small,
input[type=month].form-control-small,
input[type=month].input-small,
input[type=number].form-control-small,
input[type=number].input-small,
input[type=password].form-control-small,
input[type=password].input-small,
input[type=search].form-control-small,
input[type=search].input-small,
input[type=tel].form-control-small,
input[type=tel].input-small,
input[type=time].form-control-small,
input[type=time].input-small,
input[type=url].form-control-small,
input[type=url].input-small,
input[type=week].form-control-small,
input[type=week].input-small,
select.form-control-small,
select.input-small,
textarea.form-control-small,
textarea.input-small {
  padding: var(--form-control-small-padding, var(--space-2) var(--space-3));
  font-size: var(--form-control-small-font-size, var(--font-size-2));
  line-height: var(--form-control-small-line-height, var(--line-height-1));
}
input[type=text]::placeholder,
input[type=email]::placeholder,
input[type=date]::placeholder,
input[type=datetime-local]::placeholder,
input[type=month]::placeholder,
input[type=number]::placeholder,
input[type=password]::placeholder,
input[type=search]::placeholder,
input[type=tel]::placeholder,
input[type=time]::placeholder,
input[type=url]::placeholder,
input[type=week]::placeholder,
select::placeholder,
textarea::placeholder {
  color: var(--form-control-placeholder-color, currentColor);
  opacity: 0.55;
}
input[type=text]:disabled, input[type=text][readonly],
input[type=email]:disabled,
input[type=email][readonly],
input[type=date]:disabled,
input[type=date][readonly],
input[type=datetime-local]:disabled,
input[type=datetime-local][readonly],
input[type=month]:disabled,
input[type=month][readonly],
input[type=number]:disabled,
input[type=number][readonly],
input[type=password]:disabled,
input[type=password][readonly],
input[type=search]:disabled,
input[type=search][readonly],
input[type=tel]:disabled,
input[type=tel][readonly],
input[type=time]:disabled,
input[type=time][readonly],
input[type=url]:disabled,
input[type=url][readonly],
input[type=week]:disabled,
input[type=week][readonly],
select:disabled,
select[readonly],
textarea:disabled,
textarea[readonly] {
  background: var(--form-control-disabled-background, var(--lichtgrijs, #f6f6f6));
  cursor: not-allowed;
  opacity: 1;
}

textarea {
  min-height: var(--form-control-textarea-min-height, calc(var(--space-10) * 2));
  resize: vertical;
}

select:not([multiple]) {
  appearance: none;
  padding-right: var(--form-control-select-padding-right, var(--space-9));
  background-color: var(--form-control-background, var(--wit, #fff));
  background-image: var(--form-control-select-icon, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9' fill='none'%3E%3Cpath d='M1.5 1.5L7 7L12.5 1.5' stroke='%23002B7F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"));
  background-repeat: no-repeat;
  background-position: right var(--space-4) center;
  background-size: 14px 9px;
}
select:not([multiple]):disabled {
  background-color: var(--form-control-disabled-background, var(--lichtgrijs, #f6f6f6));
}
select:not([multiple]).form-control-small, select:not([multiple]).input-small {
  padding-right: var(--form-control-small-select-padding-right, var(--space-8));
  background-position: right var(--space-3) center;
}

.form-control-no-border input,
.form-control-no-border select,
.form-control-no-border textarea,
.input-no-border input,
.input-no-border select,
.input-no-border textarea {
  border-color: transparent !important;
}

.form-control-no-shadow input,
.form-control-no-shadow select,
.form-control-no-shadow textarea,
.input-no-shadow input,
.input-no-shadow select,
.input-no-shadow textarea {
  box-shadow: none !important;
}

.form-control-plain input,
.form-control-plain select,
.form-control-plain textarea,
.input-plain input,
.input-plain select,
.input-plain textarea {
  border-color: transparent !important;
  box-shadow: none !important;
}

.form-control-small input,
.form-control-small select,
.form-control-small textarea,
.input-small input,
.input-small select,
.input-small textarea {
  padding: var(--form-control-small-padding, var(--space-2) var(--space-3));
  font-size: var(--form-control-small-font-size, var(--font-size-2));
  line-height: var(--form-control-small-line-height, var(--line-height-1));
}
.form-control-small select:not([multiple]),
.input-small select:not([multiple]) {
  padding-right: var(--form-control-small-select-padding-right, var(--space-8));
  background-position: right var(--space-3) center;
}

.button {
  display: inline-flex;
  min-height: var(--space-8);
  padding-inline: var(--space-4);
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  border-radius: var(--border-radius-1);
  cursor: pointer;
  font-size: var(--font-size-3);
  text-decoration: none !important;
  transition: background-color 180ms ease, color 180ms ease, border-color 180ms ease;
}
.button:hover {
  background: var(--oranje-hover);
  transform: translateY(-2px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.16);
}
.button:active {
  background: var(--oranje-active);
  transform: translateY(0);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.12);
}
.button.button-no-animate:hover, .button.button-no-animate:active {
  transform: none;
}
.button.button-small {
  min-height: var(--space-7);
  height: var(--space-7);
  padding: var(--space-3) var(--space-5);
  font-size: var(--font-size-2);
}
@media (max-width: 767px) {
  .button.button-small {
    min-height: var(--space-9);
    height: var(--space-9);
    padding: var(--space-4) var(--space-6);
  }
}
.button.button-medium {
  height: var(--space-9);
  padding-inline: var(--space-5);
  font-size: var(--font-size-4);
}
.button.button-large {
  height: var(--space-10);
  padding-inline: var(--space-6);
  font-size: var(--font-size-5);
}
.button.button-no-shadow {
  box-shadow: none !important;
}
.button.button-no-shadow:hover, .button.button-no-shadow:active {
  box-shadow: none !important;
}
.button.button-outline {
  background: transparent;
  color: var(--donkerblauw);
  border: var(--border-2);
  box-shadow: none;
}
.button.button-outline:hover {
  background: color-mix(in srgb, var(--donkerblauw) 6%, transparent);
  color: var(--donkerblauw);
  box-shadow: none;
}
.button.button-outline:active {
  background: color-mix(in srgb, var(--donkerblauw) 10%, transparent);
  color: var(--donkerblauw);
  box-shadow: none;
}
.button.bg-oranje {
  background: var(--bg-oranje);
  color: var(--bg-oranje-contrast, var(--oranje-contrast, currentColor));
}
.button.bg-ijsblauw {
  background: var(--bg-ijsblauw);
  color: var(--bg-ijsblauw-contrast, var(--ijsblauw-contrast, currentColor));
}
.button.bg-oranje-licht {
  background: var(--bg-oranje-licht);
  color: var(--bg-oranje-licht-contrast, var(--oranje-licht-contrast, currentColor));
}

.button-icon {
  display: grid;
  width: var(--space-8);
  min-width: var(--space-8);
  height: var(--space-8);
  min-height: var(--space-8);
  background: var(--oranje);
  align-items: center;
  justify-content: center;
  color: var(--wit);
  border-radius: var(--border-radius-1);
  cursor: pointer;
  flex: 0 0 auto;
  font-size: var(--font-size-3);
  line-height: var(--line-height-2);
  text-decoration: none !important;
  transition: background-color 180ms ease, color 180ms ease, transform 180ms ease, box-shadow 180ms ease;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}
.button-icon:hover {
  background: var(--oranje-hover);
  transform: translateY(-2px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.16);
}
.button-icon:active {
  background: var(--oranje-active);
  transform: translateY(0);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.12);
}
.button-icon:disabled, .button-icon.is-disabled {
  background: var(--oranje-disabled);
  color: rgba(255, 255, 255, 0.75);
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}
.button-icon.button-icon-no-animate:hover, .button-icon.button-icon-no-animate:active {
  transform: none;
}
.button-icon.button-icon-no-shadow {
  box-shadow: none !important;
}
.button-icon.button-icon-no-shadow:hover, .button-icon.button-icon-no-shadow:active {
  box-shadow: none !important;
}
.button-icon.button-icon-small {
  width: var(--space-7);
  min-width: var(--space-7);
  height: var(--space-7);
  min-height: var(--space-7);
  font-size: var(--font-size-2);
}
.button-icon.button-icon-medium {
  width: var(--space-9);
  min-width: var(--space-9);
  height: var(--space-9);
  min-height: var(--space-9);
  font-size: var(--font-size-4);
}
.button-icon.button-icon-large {
  width: var(--space-10);
  min-width: var(--space-10);
  height: var(--space-10);
  min-height: var(--space-10);
  font-size: var(--font-size-5);
}
.button-icon.button-icon-outline {
  background: transparent;
  color: var(--donkerblauw);
  border: var(--border-2);
  box-shadow: none;
}
.button-icon.button-icon-outline:hover {
  background: color-mix(in srgb, var(--donkerblauw) 6%, transparent);
  color: var(--donkerblauw);
  box-shadow: none;
}
.button-icon.button-icon-outline:active {
  background: color-mix(in srgb, var(--donkerblauw) 10%, transparent);
  color: var(--donkerblauw);
  box-shadow: none;
}
.button-icon.button-icon-outline.is-active {
  border-color: color-mix(in srgb, var(--donkerblauw) 28%, var(--opacity-2));
  background: color-mix(in srgb, var(--donkerblauw) 4%, transparent);
}
.button-icon.button-icon-outline:disabled, .button-icon.button-icon-outline.is-disabled {
  background: transparent;
  color: var(--donkerblauw-disabled);
  border: var(--border-2);
  box-shadow: none;
}

div.text p {
  line-height: var(--line-height-3);
}
div.text > * {
  margin-bottom: var(--space-4);
}
div.text > *:last-child {
  margin-bottom: 0px;
}
div.text h1,
div.text h2 {
  margin-bottom: var(--space-5);
}

div.sf-form-builder div.sf-form-input-wrapper {
  gap: var(--space-5);
}
div.sf-form-builder div.sf-form-input-label label {
  font-size: var(--fontsizes-3);
  font-weight: var(--font-weight-4);
}
div.sf-form-builder div.sf-form-input-column-submit button.sf-form-button-submit {
  width: 100%;
}

.alvgroup-partner-sites__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-2);
}
@media (min-width: 768px) {
  .alvgroup-partner-sites__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-4);
  }
}
@media (min-width: 1024px) {
  .alvgroup-partner-sites__grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}
@media (min-width: 1024px) and (max-width: 1439px) {
  .alvgroup-partner-sites__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-4);
  }
}
@media (min-width: 480px) and (max-width: 767px) {
  .alvgroup-partner-sites__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3);
  }
}
.alvgroup-partner-sites .partner {
  --partner-background: var(--donkerblauw);
  position: relative;
  aspect-ratio: auto;
  min-height: var(--space-9);
  border-radius: var(--border-radius-1);
  overflow: hidden;
  background: radial-gradient(ellipse at 0% 100%, rgba(255, 255, 255, 0.18), transparent 42%), linear-gradient(35deg, rgba(255, 255, 255, 0.12) 0%, transparent 34%), var(--partner-background);
  color: var(--wit);
  transition: transform 180ms ease, box-shadow 180ms ease, opacity 180ms ease;
}
.alvgroup-partner-sites .partner .wrapper {
  position: relative;
  z-index: 1;
  display: grid;
  align-items: center;
  min-height: 100%;
  padding: var(--space-4) var(--space-5);
}
.alvgroup-partner-sites .partner span {
  display: block;
  font-size: var(--font-size-3);
  font-weight: var(--font-weight-4);
  line-height: var(--line-height-2);
}
.alvgroup-partner-sites .partner a {
  position: absolute;
  inset: 0;
}
.alvgroup-partner-sites .partner:not(.active):hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 28px rgba(0, 20, 61, 0.12);
}
.alvgroup-partner-sites .partner.active::after {
  content: "";
  position: absolute;
  top: 4px;
  right: 4px;
  width: 24px;
  height: 24px;
  background: rgba(255, 255, 255, 0.96);
  clip-path: polygon(100% 0, 0 0, 100% 100%);
  pointer-events: none;
  box-shadow: 0 8px 18px rgba(0, 20, 61, 0.12);
}
@media (min-width: 480px) and (max-width: 767px) {
  .alvgroup-partner-sites .partner {
    aspect-ratio: 16/9;
    min-height: 96px;
  }
  .alvgroup-partner-sites .partner .wrapper {
    align-items: end;
  }
}
@media (min-width: 768px) {
  .alvgroup-partner-sites .partner {
    aspect-ratio: 4/3;
    min-height: 112px;
  }
  .alvgroup-partner-sites .partner .wrapper {
    align-items: end;
    padding: var(--space-5);
  }
  .alvgroup-partner-sites .partner span {
    font-size: var(--font-size-6);
  }
  .alvgroup-partner-sites .partner.active::after {
    top: 6px;
    right: 6px;
    width: 46px;
    height: 46px;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .alvgroup-partner-sites .partner.active {
    grid-column: span 2;
    aspect-ratio: auto;
  }
}
@media (min-width: 1024px) {
  .alvgroup-partner-sites .partner {
    aspect-ratio: 5/3;
    min-height: 124px;
  }
}
@media (min-width: 1024px) and (max-width: 1439px) {
  .alvgroup-partner-sites .partner {
    aspect-ratio: 16/6;
    min-height: 112px;
  }
}

/*# sourceMappingURL=app.css.map */