/**
 * Settings.
 */
/**
 * Settings.
 */
/**
 * Font family map.
 */
/**
 * Font size map.
 */
/**
 * Line height map.
 */
/**
* Mobile.
**/
/**
 * Font size map.
 */
/**
 * Line height map.
 */
/**
 * Color Map (https://convertacolor.com/).
 */
/**
 * Colors Variables.
 */
/**
 * Grid.
 */
/**
 * Assets.
 */
/**
 * Body.
 */
/**
 * Other.
 */
@import "../../node_modules/keen-slider/keen-slider.min.css";
@import "../../node_modules/photoswipe/dist/photoswipe.css";
*::selection {
  background-color: hsl(0, 0%, 0%);
  color: hsl(0, 0%, 100%);
}

/**
 * Responsive.
 */
/**
 * Vendor.
 */
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
/* Document
   ========================================================================== */
/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */
html {
  line-height: 1.15; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
}

/* Sections
   ========================================================================== */
/**
 * Remove the margin in all browsers.
 */
body {
  margin: 0;
}

/**
 * Render the `main` element consistently in IE.
 */
main {
  display: block;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */
h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

/* Grouping content
   ========================================================================== */
/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */
hr {
  box-sizing: content-box; /* 1 */
  height: 0; /* 1 */
  overflow: visible; /* 2 */
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
pre {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/* Text-level semantics
   ========================================================================== */
/**
 * Remove the gray background on active links in IE 10.
 */
a {
  background-color: transparent;
}

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */
abbr[title] {
  border-bottom: none; /* 1 */
  text-decoration: underline; /* 2 */
  text-decoration: underline dotted; /* 2 */
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */
b,
strong {
  font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
code,
kbd,
samp {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/**
 * Add the correct font size in all browsers.
 */
small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/* Embedded content
   ========================================================================== */
/**
 * Remove the border on images inside links in IE 10.
 */
img {
  border-style: none;
}

/* Forms
   ========================================================================== */
/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */
button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-size: 100%; /* 1 */
  line-height: 1.15; /* 1 */
  margin: 0; /* 2 */
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */
button,
input { /* 1 */
  overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */
button,
select { /* 1 */
  text-transform: none;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */
button,
[type=button],
[type=reset],
[type=submit] {
  -webkit-appearance: button;
}

/**
 * Remove the inner border and padding in Firefox.
 */
button::-moz-focus-inner,
[type=button]::-moz-focus-inner,
[type=reset]::-moz-focus-inner,
[type=submit]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */
button:-moz-focusring,
[type=button]:-moz-focusring,
[type=reset]:-moz-focusring,
[type=submit]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

/**
 * Correct the padding in Firefox.
 */
fieldset {
  padding: 0.35em 0.75em 0.625em;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *    `fieldset` elements in all browsers.
 */
legend {
  box-sizing: border-box; /* 1 */
  color: inherit; /* 2 */
  display: table; /* 1 */
  max-width: 100%; /* 1 */
  padding: 0; /* 3 */
  white-space: normal; /* 1 */
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */
progress {
  vertical-align: baseline;
}

/**
 * Remove the default vertical scrollbar in IE 10+.
 */
textarea {
  overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */
[type=checkbox],
[type=radio] {
  box-sizing: border-box; /* 1 */
  padding: 0; /* 2 */
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */
[type=number]::-webkit-inner-spin-button,
[type=number]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */
[type=search] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */
[type=search]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */
::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/* Interactive
   ========================================================================== */
/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */
details {
  display: block;
}

/*
 * Add the correct display in all browsers.
 */
summary {
  display: list-item;
}

/* Misc
   ========================================================================== */
/**
 * Add the correct display in IE 10+.
 */
template {
  display: none;
}

/**
 * Add the correct display in IE 10.
 */
[hidden] {
  display: none;
}

/**
 * Tools.
 */
/**
 * Tools.
 */
/* Magnific Popup CSS */
.mfp-bg {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1042;
  overflow: hidden;
  position: fixed;
  background: #0b0b0b;
  opacity: 0.8;
}

.mfp-wrap {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1043;
  position: fixed;
  outline: none !important;
  -webkit-backface-visibility: hidden;
}

.mfp-container {
  text-align: center;
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  padding: 0 8px;
  box-sizing: border-box;
}

.mfp-container:before {
  content: "";
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}

.mfp-align-top .mfp-container:before {
  display: none;
}

.mfp-content {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  margin: 0 auto;
  text-align: left;
  z-index: 1045;
}

.mfp-inline-holder .mfp-content,
.mfp-ajax-holder .mfp-content {
  width: 100%;
  cursor: auto;
}

.mfp-ajax-cur {
  cursor: progress;
}

.mfp-zoom-out-cur, .mfp-zoom-out-cur .mfp-image-holder .mfp-close {
  cursor: -moz-zoom-out;
  cursor: -webkit-zoom-out;
  cursor: zoom-out;
}

.mfp-zoom {
  cursor: pointer;
  cursor: -webkit-zoom-in;
  cursor: -moz-zoom-in;
  cursor: zoom-in;
}

.mfp-auto-cursor .mfp-content {
  cursor: auto;
}

.mfp-close,
.mfp-arrow,
.mfp-preloader,
.mfp-counter {
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

.mfp-loading.mfp-figure {
  display: none;
}

.mfp-hide {
  display: none !important;
}

.mfp-preloader {
  color: #CCC;
  position: absolute;
  top: 50%;
  width: auto;
  text-align: center;
  margin-top: -0.8em;
  left: 8px;
  right: 8px;
  z-index: 1044;
}

.mfp-preloader a {
  color: #CCC;
}

.mfp-preloader a:hover {
  color: #FFF;
}

.mfp-s-ready .mfp-preloader {
  display: none;
}

.mfp-s-error .mfp-content {
  display: none;
}

button.mfp-close,
button.mfp-arrow {
  overflow: visible;
  cursor: pointer;
  background: transparent;
  border: 0;
  -webkit-appearance: none;
  display: block;
  outline: none;
  padding: 0;
  z-index: 1046;
  box-shadow: none;
  touch-action: manipulation;
}

button::-moz-focus-inner {
  padding: 0;
  border: 0;
}

.mfp-close {
  width: 44px;
  height: 44px;
  line-height: 44px;
  position: absolute;
  right: 0;
  top: 0;
  text-decoration: none;
  text-align: center;
  opacity: 0.65;
  padding: 0 0 18px 10px;
  color: #FFF;
  font-style: normal;
  font-size: 28px;
  font-family: Arial, Baskerville, monospace;
}

.mfp-close:hover,
.mfp-close:focus {
  opacity: 1;
}

.mfp-close:active {
  top: 1px;
}

.mfp-close-btn-in .mfp-close {
  color: #333;
}

.mfp-image-holder .mfp-close,
.mfp-iframe-holder .mfp-close {
  color: #FFF;
  right: -6px;
  text-align: right;
  padding-right: 6px;
  width: 100%;
}

.mfp-counter {
  position: absolute;
  top: 0;
  right: 0;
  color: #CCC;
  font-size: 12px;
  line-height: 18px;
  white-space: nowrap;
}

.mfp-arrow {
  position: absolute;
  opacity: 0.65;
  margin: 0;
  top: 50%;
  margin-top: -55px;
  padding: 0;
  width: 90px;
  height: 110px;
  -webkit-tap-highlight-color: transparent;
}

.mfp-arrow:active {
  margin-top: -54px;
}

.mfp-arrow:hover,
.mfp-arrow:focus {
  opacity: 1;
}

.mfp-arrow:before,
.mfp-arrow:after {
  content: "";
  display: block;
  width: 0;
  height: 0;
  position: absolute;
  left: 0;
  top: 0;
  margin-top: 35px;
  margin-left: 35px;
  border: medium inset transparent;
}

.mfp-arrow:after {
  border-top-width: 13px;
  border-bottom-width: 13px;
  top: 8px;
}

.mfp-arrow:before {
  border-top-width: 21px;
  border-bottom-width: 21px;
  opacity: 0.7;
}

.mfp-arrow-left {
  left: 0;
}

.mfp-arrow-left:after {
  border-right: 17px solid #FFF;
  margin-left: 31px;
}

.mfp-arrow-left:before {
  margin-left: 25px;
  border-right: 27px solid #3F3F3F;
}

.mfp-arrow-right {
  right: 0;
}

.mfp-arrow-right:after {
  border-left: 17px solid #FFF;
  margin-left: 39px;
}

.mfp-arrow-right:before {
  border-left: 27px solid #3F3F3F;
}

.mfp-iframe-holder {
  padding-top: 40px;
  padding-bottom: 40px;
}

.mfp-iframe-holder .mfp-content {
  line-height: 0;
  width: 100%;
  max-width: 900px;
}

.mfp-iframe-holder .mfp-close {
  top: -40px;
}

.mfp-iframe-scaler {
  width: 100%;
  height: 0;
  overflow: hidden;
  padding-top: 56.25%;
}

.mfp-iframe-scaler iframe {
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
  background: #000;
}

/* Main image in popup */
img.mfp-img {
  width: auto;
  max-width: 100%;
  height: auto;
  display: block;
  line-height: 0;
  box-sizing: border-box;
  padding: 40px 0 40px;
  margin: 0 auto;
}

/* The shadow behind the image */
.mfp-figure {
  line-height: 0;
}

.mfp-figure:after {
  content: "";
  position: absolute;
  left: 0;
  top: 40px;
  bottom: 40px;
  display: block;
  right: 0;
  width: auto;
  height: auto;
  z-index: -1;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
  background: #444;
}

.mfp-figure small {
  color: #BDBDBD;
  display: block;
  font-size: 12px;
  line-height: 14px;
}

.mfp-figure figure {
  margin: 0;
}

.mfp-bottom-bar {
  margin-top: -36px;
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  cursor: auto;
}

.mfp-title {
  text-align: left;
  line-height: 18px;
  color: #F3F3F3;
  word-wrap: break-word;
  padding-right: 36px;
}

.mfp-image-holder .mfp-content {
  max-width: 100%;
}

.mfp-gallery .mfp-image-holder .mfp-figure {
  cursor: pointer;
}

@media screen and (max-width: 800px) and (orientation: landscape), screen and (max-height: 300px) {
  /**
       * Remove all paddings around the image on small screen
       */
  .mfp-img-mobile .mfp-image-holder {
    padding-left: 0;
    padding-right: 0;
  }
  .mfp-img-mobile img.mfp-img {
    padding: 0;
  }
  .mfp-img-mobile .mfp-figure:after {
    top: 0;
    bottom: 0;
  }
  .mfp-img-mobile .mfp-figure small {
    display: inline;
    margin-left: 5px;
  }
  .mfp-img-mobile .mfp-bottom-bar {
    background: rgba(0, 0, 0, 0.6);
    bottom: 0;
    margin: 0;
    top: auto;
    padding: 3px 5px;
    position: fixed;
    box-sizing: border-box;
  }
  .mfp-img-mobile .mfp-bottom-bar:empty {
    padding: 0;
  }
  .mfp-img-mobile .mfp-counter {
    right: 5px;
    top: 3px;
  }
  .mfp-img-mobile .mfp-close {
    top: 0;
    right: 0;
    width: 35px;
    height: 35px;
    line-height: 35px;
    background: rgba(0, 0, 0, 0.6);
    position: fixed;
    text-align: center;
    padding: 0;
  }
}
@media all and (max-width: 900px) {
  .mfp-arrow {
    -webkit-transform: scale(0.75);
    transform: scale(0.75);
  }
  .mfp-arrow-left {
    -webkit-transform-origin: 0;
    transform-origin: 0;
  }
  .mfp-arrow-right {
    -webkit-transform-origin: 100%;
    transform-origin: 100%;
  }
  .mfp-container {
    padding-left: 6px;
    padding-right: 6px;
  }
}
/**
 * Container
 * 
 * Center aligns element with given maximum width, padding, and margins top and bottom.
 * @param {String} $width - Pixel unit value.
 * @param {String} $gap - Pixel unit value.
 * @example @include container(1024px, 20px);
 */
/**
 * Section
 *
 * Add top and bottom spacing to element using paddings.
 * @param {String} $top - Pixel unit value.
 * @param {String} $bottom - Pixel unit value.
 * @example @include section(100px, 100px);
 */
/**
 * Media.
 *
 * Media queries according to "The 100% Correct Way To Do CSS Breakpoints" (https://medium.freecodecamp.com/the-100-correct-way-to-do-css-breakpoints-88d6a5ba1862).
 * @param {String} $breakpoint - Breakpoint pixel unit value.
 * @example @include media('phone') {}
 */
/**
 * Elements.
 */
/**
 * General.
 */
/**
 * Remove margin and padding from every selector including their
 * psuedo selectors.
 *
 * 1. More sensible default box sizing.
 *    (css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice).
 */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: inherit; /* 1 */
}

/**
 * Set height of the document to maxium viewport height.
 *
 * 1. Set root font size to 10.
 */
html {
  height: 100vh;
  font-size: 62.5%; /* 1 */
  box-sizing: border-box;
}

/**
 * Set minimal height of the body to maximum viewport height to
 * match the document's height.
 *
 * 1. Firefox 25+.
 * 2. Chrome 5+.
 */
body {
  min-height: 100vh;
  background-color: hsl(27, 100%, 96%);
  color: hsl(0, 0%, 0%);
  font-family: "Plus Jakarta Sans";
  font-weight: 400;
  text-rendering: optimizeLegibility;
  -moz-osx-font-smoothing: grayscale; /* 1 */
  -webkit-font-smoothing: antialiased; /* 2 */
}

/**
 * Custom user agent resets and overrides that are not present in
 * Normalize 8.0.0. This mostly removes some annoying margin and padding
 * defaults, border radius, and outlines.
 */
a {
  color: inherit;
  text-decoration: none;
}

/**
 * 1. Remove border radius on Chrome 62.0+ on macOS.
 */
button {
  border: 0;
  border-radius: 0; /* 1 */
  outline: none;
  background: none;
  cursor: pointer;
}

fieldset {
  margin: 0;
  padding: 0;
  border: 0;
}

figure {
  margin: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  padding: 0;
  font-size: inherit;
  font-weight: inherit;
}

hr {
  margin: 0;
  padding: 0;
}

/**
 * 1. Remove white space.
 */
img {
  max-width: 100%;
  height: auto;
  vertical-align: middle; /* 1 */
}

/**
 * 1. Remove inherited user agent appearance.
 */
input,
select,
textarea {
  max-width: 100%;
  border: 0;
  border-radius: 0;
  outline: none;
  appearance: none; /* 1 */
}

/**
 * 1. Only allow vertical resizing to prevent the textarea
 *    from overflowing the container.
 */
textarea {
  resize: vertical;
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

p {
  margin: 0;
}

/**
 * 1. Collapse borders to prevent double sided borders.
 */
table {
  max-width: 100%;
  border-collapse: collapse; /* 1 */
}

strong {
  font-weight: 700;
}

@keyframes bp-fadein {
  from {
    opacity: 0.01;
  }
  to {
    opacity: 1;
  }
}
@keyframes bp-bar {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0);
  }
}
@keyframes bp-o {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
.bp-wrap {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  position: fixed;
  z-index: 999;
  /* If you're mounting on a portion of the screen and need visible
  overflow on .bp-wrap, change contain to "layout" on that instance */
  contain: strict;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
}
.bp-wrap > div:first-child {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.75);
  animation: bp-fadein 0.48s cubic-bezier(0.215, 0.61, 0.355, 1);
}

.bp-vid audio {
  position: absolute;
  left: 14px;
  width: calc(100% - 28px);
  bottom: 14px;
  height: 50px;
}

.bp-inner {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  position: absolute;
  display: flex;
}

.bp-html {
  display: contents;
}
.bp-html > :first-child {
  margin: auto;
}

.bp-img-wrap {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  position: absolute;
  contain: strict;
}
.bp-img-wrap .bp-canzoom {
  cursor: zoom-in;
}
.bp-img-wrap .bp-drag {
  cursor: grabbing;
}

.bp-close {
  contain: layout size;
}

.bp-img {
  position: absolute;
  top: 50%;
  left: 50%;
  user-select: none;
  background-size: 100% 100%;
}
.bp-img img,
.bp-img div {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.bp-img .bp-o {
  display: none;
}

.bp-zoomed .bp-img:not(.bp-drag) {
  cursor: grab;
}
.bp-zoomed .bp-cap {
  opacity: 0;
  animation: none !important;
}

.bp-zoomed.bp-small .bp-controls {
  opacity: 0;
}
.bp-zoomed.bp-small .bp-controls button {
  pointer-events: none;
}

.bp-controls {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  text-align: left;
  transition: opacity 0.3s;
  animation: bp-fadein 0.3s;
}
.bp-controls button {
  pointer-events: auto;
  cursor: pointer;
  position: absolute;
  border: 0;
  background: rgba(0, 0, 0, 0.15);
  opacity: 0.9;
  transition: all 0.1s;
  contain: content;
}
.bp-controls button:hover {
  background-color: rgba(0, 0, 0, 0.2);
  opacity: 1;
}
.bp-controls svg {
  fill: #fff;
}

.bp-count {
  position: absolute;
  color: rgba(255, 255, 255, 0.9);
  line-height: 1;
  margin: 16px;
  height: 50px;
  width: 100px;
}

.bp-prev,
.bp-next {
  top: 50%;
  right: 0;
  margin-top: -32px;
  height: 64px;
  width: 58px;
  border-radius: 3px 0 0 3px;
}
.bp-prev:hover:before,
.bp-next:hover:before {
  transform: translateX(-2px);
}
.bp-prev:before,
.bp-next:before {
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z'/%3E%3C/svg%3E");
  position: absolute;
  left: 7px;
  top: 9px;
  width: 46px;
  transition: all 0.2s;
}

.bp-prev {
  right: auto;
  left: 0;
  transform: scalex(-1);
}

.bp-x {
  top: 0;
  right: 0;
  height: 55px;
  width: 58px;
  border-radius: 0 0 0 3px;
}
.bp-x:before {
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='%23fff'%3E%3Cpath d='M24 10l-2-2-6 6-6-6-2 2 6 6-6 6 2 2 6-6 6 6 2-2-6-6z'/%3E%3C/svg%3E");
  position: absolute;
  width: 37px;
  top: 8px;
  right: 10px;
}

.bp-if,
.bp-vid {
  position: relative;
  margin: auto;
  background: #000;
  background-size: 100% 100%;
}
.bp-if iframe,
.bp-if video,
.bp-if div,
.bp-vid iframe,
.bp-vid video,
.bp-vid div {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  position: absolute;
  border: 0;
}

.bp-load {
  display: flex;
  background-size: 100% 100%;
  overflow: hidden;
  z-index: 1;
}

.bp-bar {
  position: absolute;
  top: 0;
  left: 0;
  height: 3px;
  width: 100%;
  transform: translateX(-100%);
  background: rgba(255, 255, 255, 0.9);
  border-radius: 0 3px 3px 0;
  animation: bp-bar 4s both;
}

.bp-o,
.bp-o:after {
  border-radius: 50%;
  width: 90px;
  height: 90px;
}

.bp-o {
  margin: auto;
  border: 10px solid rgba(255, 255, 255, 0.2);
  border-left-color: rgba(255, 255, 255, 0.9);
  animation: bp-o 1s infinite linear;
}

.bp-cap {
  position: absolute;
  bottom: 2%;
  background: rgba(9, 9, 9, 0.8);
  color: rgba(255, 255, 255, 0.9);
  border-radius: 4px;
  max-width: 95%;
  line-height: 1.3;
  padding: 0.6em 1.2em;
  left: 50%;
  transform: translateX(-50%);
  width: fit-content;
  width: -moz-fit-content;
  display: table;
  transition: opacity 0.3s;
  animation: bp-fadein 0.2s;
}
.bp-cap a {
  color: inherit;
}

.bp-inline {
  position: absolute;
}

.bp-lock {
  overflow-y: hidden;
}
.bp-lock body {
  overflow: scroll;
}

.bp-noclose .bp-x {
  display: none;
}
.bp-noclose:not(.bp-zoomed) {
  touch-action: pan-y;
}
.bp-noclose:not(.bp-zoomed) .bp-img-wrap {
  cursor: zoom-in;
}

@media (prefers-reduced-motion) {
  .bp-wrap * {
    animation-duration: 0s !important;
  }
}
@media (max-width: 500px) {
  .bp-x {
    height: 47px;
    width: 47px;
  }
  .bp-x:before {
    width: 34px;
    top: 6px;
    right: 6px;
  }
  .bp-prev,
  .bp-next {
    margin-top: -27px;
    height: 54px;
    width: 45px;
  }
  .bp-prev:before,
  .bp-next:before {
    top: 7px;
    left: 2px;
    width: 43px;
  }
  .bp-o,
  .bp-o:after {
    border-width: 6px;
    width: 60px;
    height: 60px;
  }
  .bp-count {
    margin: 12px 10px;
  }
}
/**
 * Objects.
 */
/**
 * Button.
 */
.button {
  font-size: 16px;
  line-height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  padding: 10px 10px;
  border-radius: 10px;
  text-decoration: none;
  transition: all 250ms ease;
  cursor: pointer;
  font-weight: 500;
}

/**
 * Button (primary).
 */
.button--primary {
  gap: 0;
  transition: gap 250ms ease-in-out;
}
.button--primary:hover {
  gap: 8px;
}
.button--primary span {
  background-color: hsl(357, 68%, 20%);
  color: hsl(0, 0%, 100%);
  border-radius: 100px;
  padding: 12px 20px;
  box-shadow: 0 4px 20px 16px rgba(0, 0, 0, 0.08);
  font-size: 14px;
  font-weight: 500;
  line-height: 24px;
}
.button--primary.has-arrow svg {
  background-color: hsl(357, 68%, 20%);
  border-radius: 100px;
  height: 48px;
  width: 48px;
  padding: 16px;
  box-shadow: 0 4px 20px 16px rgba(0, 0, 0, 0.08);
}

/**
* Button (default).
*/
.button--default {
  background-color: hsl(0, 0%, 0%);
  color: hsl(0, 0%, 100%);
}
.button--default:hover {
  background-color: hsl(0, 0%, 100%);
  color: hsl(0, 0%, 0%);
}

/**
* Button (secondary).
*/
.button--secondary {
  gap: 0;
  transition: gap 250ms ease-in-out;
}
.button--secondary:hover span {
  background-color: hsl(357, 68%, 20%);
  color: hsl(0, 0%, 100%);
}
.button--secondary span {
  background-color: transparent;
  color: hsl(357, 68%, 20%);
  border-radius: 100px;
  padding: 12px 20px;
  border: 1px solid hsl(357, 68%, 20%);
  transition: all 250ms ease;
  font-size: 14px;
  font-weight: 500;
  line-height: 24px;
}

/**
 * Every conceivable HTML element within a `.cms-output` wrapper.
 *
 * 1. Exclude last childs.
 */
.cms-output p:not(:last-child) {
  margin-bottom: 2em;
}
.cms-output h2,
.cms-output h3,
.cms-output h4 {
  margin-bottom: 30px;
}
.cms-output h5 {
  margin-bottom: 20px;
}
.cms-output .is-intro {
  font-size: 20px;
  line-height: 32px;
  font-weight: 700;
}
@media only screen and (max-width: 899px) {
  .cms-output .is-intro {
    font-size: 18px;
    line-height: 24px;
  }
}
.cms-output img.aligncenter {
  display: block;
  margin: 0 auto;
}
.cms-output img.alignright {
  display: block;
  margin: 0 0 0 auto;
}
.cms-output table {
  word-break: break-word;
}
.cms-output table td {
  vertical-align: top;
}
.cms-output ul,
.cms-output ol {
  list-style-type: square;
  margin-left: 20px;
  margin-bottom: 1em;
}
.cms-output ul li,
.cms-output ol li {
  margin-bottom: 15px;
}
.cms-output ol {
  list-style-type: decimal;
}
.cms-output strong {
  font-weight: bold;
}
.cms-output a {
  text-decoration: underline;
  color: hsl(0, 100%, 50%);
  transition: all 250ms ease;
}
.cms-output a:hover {
  color: hsla(0, 100%, 50%, 0.1);
}
.cms-output blockquote {
  position: relative;
  padding: 40px 45px 20px 45px;
  color: hsl(0, 100%, 50%);
}
.cms-output .wp-caption {
  margin-bottom: 20px;
}
.cms-output .wp-caption img {
  border-radius: 10px;
}
.cms-output .wp-caption .wp-caption-text {
  font-size: 16px;
  line-height: 20px;
  color: hsl(0, 100%, 50%);
  letter-spacing: 0.44px;
  margin-top: 10px;
}

#breadcrumbs * {
  font-size: 14px;
}
#breadcrumbs > span {
  color: #550B0D;
  font-family: "Plus Jakarta Sans";
  font-size: 14px;
  font-weight: 500;
  display: flex;
  flex-direction: row;
  gap: 8px;
  align-items: center;
}
#breadcrumbs .breadcrumb_last {
  color: hsla(23, 13%, 31%, 0.64);
  font-family: "Plus Jakarta Sans";
  font-size: 14px;
  font-weight: 300;
}

/**
 * The content constraint is a constraint for all the content within
 * the document. It can be manipulated by CSS or JavaScript without
 * influencing the body.
 */
.main-content {
  position: relative;
  min-height: 100vh;
  overflow: clip;
  padding-inline: 16px;
  padding-bottom: 16px;
}
@media only screen and (max-width: 599px) {
  .main-content {
    padding-inline: 0;
  }
}

@media only screen and (min-width: 1200px) {
  .article-template-default .articles .wrapper {
    padding-block: 80px;
  }
}
@media only screen and (max-width: 1199px) {
  .article-template-default .articles .wrapper {
    padding-block: 40px;
  }
}
@media only screen and (max-width: 1199px) {
  .article-template-default .articles .articles__grid {
    margin-top: 80px;
  }
}
@media only screen and (max-width: 899px) {
  .article-template-default .articles .articles__grid {
    margin-top: 40px;
  }
}

body {
  overflow-x: clip;
}

/**
 * Example of a flex based column grid layout in practice:
 *
 * <div class="row">
 *   <div class="col col-xs-6 col-sm-12"></div>
 *   <div class="col col-xs-6 col-sm-12"></div>
 * </div>
 *
 * This example will create a row with two columns each filling half the width
 * of the row on all media, but will convert to a full width column on the
 * small `-sm` breakpoint alias, which is mobile only. Refer to
 * `settings/_definitions.scss` for all breakpoint alias.
 */
/**
 * Flex object.
 *
 * Tip: Use flex on a column to make the box the same height as the column.
 */
.flex {
  display: flex;
}

.flex-wrap {
  flex-wrap: wrap;
}

/**
 * Flex object with a column based layout system.
 */
.row {
  display: flex;
  flex: 0 1 auto;
  flex-flow: row wrap;
  margin: 0 -10px;
}

/**
 * Box, the inside of a column.
 */
.box {
  flex: 1;
}

/**
 * Align `stretch` for the xs breakpoint.
 */
.align-xs-stretch {
  align-items: stretch;
}

/**
 * Align `center` for the xs breakpoint.
 */
.align-xs-center {
  align-items: center;
}

/**
 * Align `flex-start` for the xs breakpoint.
 */
.align-xs-flex-start {
  align-items: flex-start;
}

/**
 * Align `flex-end` for the xs breakpoint.
 */
.align-xs-flex-end {
  align-items: flex-end;
}

/**
 * Align `baseline` for the xs breakpoint.
 */
.align-xs-baseline {
  align-items: baseline;
}

/**
 * Justify `start` for the xs breakpoint.
 */
.justify-xs-start {
  justify-content: start;
}

/**
 * Justify `center` for the xs breakpoint.
 */
.justify-xs-center {
  justify-content: center;
}

/**
 * Justify `space-between` for the xs breakpoint.
 */
.justify-xs-space-between {
  justify-content: space-between;
}

/**
 * Justify `space-around` for the xs breakpoint.
 */
.justify-xs-space-around {
  justify-content: space-around;
}

/**
 * Justify `space-evenly` for the xs breakpoint.
 */
.justify-xs-space-evenly {
  justify-content: space-evenly;
}

/**
 * Bleed left for the xs breakpoint.
 */
.bleed-xs-left {
  padding-left: 0;
}

/**
 * Bleed right for the xs breakpoint.
 */
.bleed-xs-right {
  padding-right: 0;
}

/**
 * Order first for the `xs` breakpoint.
 */
.first-xs {
  order: -1;
}

/**
 * Order last for the `xs` breakpoint.
 */
.last-xs {
  order: 1;
}

/**
 * Reverse order for the `xs` breakpoint.
 */
.reverse-xs {
  flex-direction: row-reverse;
}

@media only screen and (max-width: 599px) {
  /**
   * Align `stretch` for the sm breakpoint.
   */
  .align-sm-stretch {
    align-items: stretch;
  }
  /**
   * Align `center` for the sm breakpoint.
   */
  .align-sm-center {
    align-items: center;
  }
  /**
   * Align `flex-start` for the sm breakpoint.
   */
  .align-sm-flex-start {
    align-items: flex-start;
  }
  /**
   * Align `flex-end` for the sm breakpoint.
   */
  .align-sm-flex-end {
    align-items: flex-end;
  }
  /**
   * Align `baseline` for the sm breakpoint.
   */
  .align-sm-baseline {
    align-items: baseline;
  }
  /**
   * Justify `start` for the sm breakpoint.
   */
  .justify-sm-start {
    justify-content: start;
  }
  /**
   * Justify `center` for the sm breakpoint.
   */
  .justify-sm-center {
    justify-content: center;
  }
  /**
   * Justify `space-between` for the sm breakpoint.
   */
  .justify-sm-space-between {
    justify-content: space-between;
  }
  /**
   * Justify `space-around` for the sm breakpoint.
   */
  .justify-sm-space-around {
    justify-content: space-around;
  }
  /**
   * Justify `space-evenly` for the sm breakpoint.
   */
  .justify-sm-space-evenly {
    justify-content: space-evenly;
  }
  /**
   * Bleed left for the sm breakpoint.
   */
  .bleed-sm-left {
    padding-left: 0;
  }
  /**
   * Bleed right for the sm breakpoint.
   */
  .bleed-sm-right {
    padding-right: 0;
  }
  /**
   * Order first for the `sm` breakpoint.
   */
  .first-sm {
    order: -1;
  }
  /**
   * Order last for the `sm` breakpoint.
   */
  .last-sm {
    order: 1;
  }
  /**
   * Reverse order for the `sm` breakpoint.
   */
  .reverse-sm {
    flex-direction: row-reverse;
  }
}
@media only screen and (min-width: 600px) {
  /**
   * Align `stretch` for the md breakpoint.
   */
  .align-md-stretch {
    align-items: stretch;
  }
  /**
   * Align `center` for the md breakpoint.
   */
  .align-md-center {
    align-items: center;
  }
  /**
   * Align `flex-start` for the md breakpoint.
   */
  .align-md-flex-start {
    align-items: flex-start;
  }
  /**
   * Align `flex-end` for the md breakpoint.
   */
  .align-md-flex-end {
    align-items: flex-end;
  }
  /**
   * Align `baseline` for the md breakpoint.
   */
  .align-md-baseline {
    align-items: baseline;
  }
  /**
   * Justify `start` for the md breakpoint.
   */
  .justify-md-start {
    justify-content: start;
  }
  /**
   * Justify `center` for the md breakpoint.
   */
  .justify-md-center {
    justify-content: center;
  }
  /**
   * Justify `space-between` for the md breakpoint.
   */
  .justify-md-space-between {
    justify-content: space-between;
  }
  /**
   * Justify `space-around` for the md breakpoint.
   */
  .justify-md-space-around {
    justify-content: space-around;
  }
  /**
   * Justify `space-evenly` for the md breakpoint.
   */
  .justify-md-space-evenly {
    justify-content: space-evenly;
  }
  /**
   * Bleed left for the md breakpoint.
   */
  .bleed-md-left {
    padding-left: 0;
  }
  /**
   * Bleed right for the md breakpoint.
   */
  .bleed-md-right {
    padding-right: 0;
  }
  /**
   * Order first for the `md` breakpoint.
   */
  .first-md {
    order: -1;
  }
  /**
   * Order last for the `md` breakpoint.
   */
  .last-md {
    order: 1;
  }
  /**
   * Reverse order for the `md` breakpoint.
   */
  .reverse-md {
    flex-direction: row-reverse;
  }
}
@media only screen and (min-width: 900px) {
  /**
   * Align `stretch` for the lg breakpoint.
   */
  .align-lg-stretch {
    align-items: stretch;
  }
  /**
   * Align `center` for the lg breakpoint.
   */
  .align-lg-center {
    align-items: center;
  }
  /**
   * Align `flex-start` for the lg breakpoint.
   */
  .align-lg-flex-start {
    align-items: flex-start;
  }
  /**
   * Align `flex-end` for the lg breakpoint.
   */
  .align-lg-flex-end {
    align-items: flex-end;
  }
  /**
   * Align `baseline` for the lg breakpoint.
   */
  .align-lg-baseline {
    align-items: baseline;
  }
  /**
   * Justify `start` for the lg breakpoint.
   */
  .justify-lg-start {
    justify-content: start;
  }
  /**
   * Justify `center` for the lg breakpoint.
   */
  .justify-lg-center {
    justify-content: center;
  }
  /**
   * Justify `space-between` for the lg breakpoint.
   */
  .justify-lg-space-between {
    justify-content: space-between;
  }
  /**
   * Justify `space-around` for the lg breakpoint.
   */
  .justify-lg-space-around {
    justify-content: space-around;
  }
  /**
   * Justify `space-evenly` for the lg breakpoint.
   */
  .justify-lg-space-evenly {
    justify-content: space-evenly;
  }
  /**
   * Bleed left for the lg breakpoint.
   */
  .bleed-lg-left {
    padding-left: 0;
  }
  /**
   * Bleed right for the lg breakpoint.
   */
  .bleed-lg-right {
    padding-right: 0;
  }
  /**
   * Order first for the `lg` breakpoint.
   */
  .first-lg {
    order: -1;
  }
  /**
   * Order last for the `lg` breakpoint.
   */
  .last-lg {
    order: 1;
  }
  /**
   * Reverse order for the `lg` breakpoint.
   */
  .reverse-lg {
    flex-direction: row-reverse;
  }
}
@media only screen and (min-width: 1200px) {
  /**
   * Align `stretch` for the xl breakpoint.
   */
  .align-xl-stretch {
    align-items: stretch;
  }
  /**
   * Align `center` for the xl breakpoint.
   */
  .align-xl-center {
    align-items: center;
  }
  /**
   * Align `flex-start` for the xl breakpoint.
   */
  .align-xl-flex-start {
    align-items: flex-start;
  }
  /**
   * Align `flex-end` for the xl breakpoint.
   */
  .align-xl-flex-end {
    align-items: flex-end;
  }
  /**
   * Align `baseline` for the xl breakpoint.
   */
  .align-xl-baseline {
    align-items: baseline;
  }
  /**
   * Justify `start` for the xl breakpoint.
   */
  .justify-xl-start {
    justify-content: start;
  }
  /**
   * Justify `center` for the xl breakpoint.
   */
  .justify-xl-center {
    justify-content: center;
  }
  /**
   * Justify `space-between` for the xl breakpoint.
   */
  .justify-xl-space-between {
    justify-content: space-between;
  }
  /**
   * Justify `space-around` for the xl breakpoint.
   */
  .justify-xl-space-around {
    justify-content: space-around;
  }
  /**
   * Justify `space-evenly` for the xl breakpoint.
   */
  .justify-xl-space-evenly {
    justify-content: space-evenly;
  }
  /**
   * Bleed left for the xl breakpoint.
   */
  .bleed-xl-left {
    padding-left: 0;
  }
  /**
   * Bleed right for the xl breakpoint.
   */
  .bleed-xl-right {
    padding-right: 0;
  }
  /**
   * Order first for the `xl` breakpoint.
   */
  .first-xl {
    order: -1;
  }
  /**
   * Order last for the `xl` breakpoint.
   */
  .last-xl {
    order: 1;
  }
  /**
   * Reverse order for the `xl` breakpoint.
   */
  .reverse-xl {
    flex-direction: row-reverse;
  }
}
/**
 * Default fields.
 */
label {
  display: block;
  margin-bottom: 16px;
  font-weight: 400;
  color: hsl(0, 0%, 100%) !important;
  margin-left: 15px;
  font-family: "the-seasons" !important;
  font-size: 24px !important;
  line-height: 32px !important;
}

.gfield_required {
  display: none !important;
}

select,
input,
textarea {
  font-size: 16px;
  line-height: 32px;
  width: 100%;
  height: 42px;
  padding: 11px 15px 11px 0 !important;
  font-weight: 500;
  border: 1px solid hsl(0, 0%, 0%);
  color: hsl(0, 0%, 0%);
  border-radius: 0 !important;
  background-color: transparent !important;
  border: unset !important;
  border-bottom: 1px solid hsl(0, 0%, 100%) !important;
  box-shadow: unset !important;
  color: hsl(0, 0%, 100%) !important;
}
select::placeholder,
input::placeholder,
textarea::placeholder {
  color: rgba(255, 255, 255, 0.32) !important;
}

textarea {
  height: 230px;
  padding-top: 15px;
}

.gfield_required {
  color: hsl(0, 100%, 50%);
}

.ginput_container_select {
  position: relative;
  width: 100%;
  overflow: hidden;
  background-color: transparent;
  border: 1px solid hsl(0, 0%, 0%);
}
.ginput_container_select svg {
  position: absolute;
  top: 14px;
  right: 20px;
  width: 9px;
  height: 13px;
  z-index: 1;
}
.ginput_container_select select {
  position: relative;
  width: calc(100% + 50px);
  max-width: none;
  margin: -2px;
  background-color: transparent;
  border: 0;
  z-index: 2;
}

input[type=radio],
input[type=checkbox] {
  width: 15px;
  height: 15px;
  border: 2px solid hsl(0, 0%, 0%);
  border-radius: 2px;
  background-color: hsl(0, 0%, 100%);
  transition: all 250ms ease;
}
input[type=radio]:checked,
input[type=checkbox]:checked {
  background-color: hsl(0, 0%, 0%);
}

input[type=radio] {
  border-radius: 20px;
}

/**
 * Gravity Forms.
 */
.gfield {
  margin-bottom: 25px;
}

.gform_validation_container {
  display: none;
}

.hidden_label > label {
  display: none;
}

.validation_message {
  font-size: 14px;
  line-height: 23px;
  margin-top: 5px;
  border-radius: 8px;
  padding: 10px 10px;
  display: flex;
  align-items: center;
  width: 100%;
  color: hsl(0, 100%, 50%);
  background-color: hsla(0, 100%, 50%, 0.1);
}
.validation_message > svg {
  width: 16px;
  height: 16px;
  margin-right: 5px;
  margin-top: -2px;
}

.validation_error {
  display: none;
  position: relative;
  margin: 0 0 50px;
  padding: 25px 25px 25px 75px;
  background: hsla(0, 100%, 50%, 0.1);
  color: hsl(0, 100%, 50%);
}
.validation_error > svg {
  position: absolute;
  top: calc(50% - 15px);
  left: 30px;
  width: 31px;
  height: 30px;
  color: hsl(0, 100%, 50%);
}
.validation_error .close-button {
  position: absolute;
  top: 5px;
  right: 5px;
  cursor: pointer;
}
.validation_error .close-button svg {
  width: 16px;
  height: 16px;
  color: hsl(0, 0%, 0%);
}

.gform_confirmation_message {
  width: 100%;
  padding: 50px;
  background: hsl(0, 100%, 50%);
}
.gform_confirmation_message br {
  display: none;
}
.gform_confirmation_message h4 {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}
.gform_confirmation_message h4 svg {
  width: 28px;
  height: 28px;
  margin-right: 20px;
  border-radius: 20px;
  background-color: hsl(0, 0%, 100%);
  padding: 5px;
  color: hsl(0, 0%, 0%);
}

button.gform_button.button--primary {
  background-color: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
}
button.gform_button.button--primary span {
  background-color: #fff !important;
  color: hsl(26, 14%, 10%) !important;
  box-shadow: none !important;
}

.content-form {
  padding-block: 80px;
}
@media only screen and (max-width: 599px) {
  .content-form {
    padding-block: 40px;
  }
}

.content-form__form {
  background-image: url("../images/background-form.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  border-radius: 8px;
  padding: 32px;
}
@media only screen and (max-width: 599px) {
  .content-form__form {
    padding: 16px;
  }
}
.content-form__form .content-form__background {
  background-color: rgba(255, 255, 255, 0.24);
  border: 1px solid rgba(255, 255, 255, 0.24);
  backdrop-filter: blur(64px);
  -webkit-backdrop-filter: blur(64px);
  border-radius: 8px;
  padding: 80px;
}
@media only screen and (max-width: 899px) {
  .content-form__form .content-form__background {
    padding: 40px;
  }
}
@media only screen and (max-width: 599px) {
  .content-form__form .content-form__background {
    padding: 24px;
  }
}
.content-form__form .content-form__background > * {
  color: hsl(0, 0%, 100%);
}
.content-form__form .content-form__background .content-form__editor {
  margin-block: 16px 32px;
}
.content-form__form .content-form__background .content-form__editor p {
  color: hsla(0, 0%, 100%, 0.8);
}

.faq-cta label {
  justify-content: space-between;
}

.faq-cta__link {
  display: flex !important;
  flex-direction: row !important;
  justify-content: space-between !important;
  gap: 24px;
  align-items: center !important;
  position: relative !important;
  padding-right: 44px !important;
}
.faq-cta__link::after {
  background-image: url("data:image/svg+xml,%3Csvg width='27' height='27' viewBox='0 0 27 27' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='-0.5' y='0.5' width='25.88' height='25.88' rx='12.94' transform='matrix(-1 -8.74228e-08 -8.74228e-08 1 25.8809 2.30621e-06)' stroke='%23FCFCFC'/%3E%3Cpath d='M12.0244 9.45276C11.9008 9.32918 11.6997 9.32918 11.5762 9.45276C11.4528 9.57627 11.4529 9.77647 11.5762 9.90003L15.1162 13.4391L11.5752 16.9791C11.4519 17.1027 11.4517 17.3039 11.5752 17.4274C11.6373 17.4895 11.719 17.5191 11.7998 17.5192C11.8809 17.5192 11.9625 17.4887 12.0244 17.4274L15.7871 13.6637C15.9107 13.5401 15.9107 13.339 15.7871 13.2155L12.0244 9.45276Z' fill='white' stroke='white' stroke-width='0.096'/%3E%3C/svg%3E%0A");
  background-size: 27px 27px;
  background-repeat: no-repeat;
  content: "";
  width: 27px;
  height: 27px;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}
@media only screen and (max-width: 599px) {
  .faq-cta__link {
    flex-wrap: wrap;
    align-items: flex-start;
  }
}
.faq-cta__link a {
  font-weight: 300;
  font-family: "Plus Jakarta Sans";
  font-size: 16px;
  line-height: 28px;
}

.content-form__editor {
  margin-top: 64px;
}
.content-form__editor h1,
.content-form__editor h2,
.content-form__editor h3,
.content-form__editor h4,
.content-form__editor h5 {
  margin-bottom: 24px;
}
.content-form__editor p {
  color: #573C3C;
  font-weight: 300;
}
.content-form__editor a {
  color: #573C3C;
  font-weight: 500;
  font-family: "Plus Jakarta Sans";
  font-size: 16px;
  line-height: 28px;
  text-decoration: underline;
  text-decoration-color: transparent;
  transition: all 250ms ease-in-out;
  text-underline-offset: 4px;
  margin-top: 12px;
  display: flex;
  width: fit-content;
}
.content-form__editor a:hover {
  color: #573C3C;
  text-decoration: underline;
  text-decoration-color: #573C3C;
}

/**
 * Heading.
 */
h1,
h2,
h3,
h4 {
  font-family: "the-seasons";
  color: hsl(357, 68%, 20%);
}
h1.is-white,
h2.is-white,
h3.is-white,
h4.is-white {
  color: hsl(0, 0%, 100%);
}

/**
  * Heading 1.
*/
h1,
.heading-1 {
  font-size: 48px;
  line-height: 64px;
}
@media only screen and (max-width: 899px) {
  h1,
  .heading-1 {
    font-size: 40px;
    line-height: 48px;
  }
}

/**
 * Heading 2.
 */
h2,
.heading-2 {
  font-size: 40px;
  line-height: 56px;
}
@media only screen and (max-width: 899px) {
  h2,
  .heading-2 {
    font-size: 32px;
    line-height: 40px;
  }
}

/**
 * Heading 3.
 */
h3,
.heading-3 {
  font-size: 28px;
  line-height: 32px;
}
@media only screen and (max-width: 899px) {
  h3,
  .heading-3 {
    font-size: 26px;
    line-height: 30px;
  }
}

/**
* Heading 3.
*/
h4 {
  font-size: 24px;
  line-height: 32px;
}
@media only screen and (max-width: 899px) {
  h4 {
    font-size: 24px;
    line-height: 32px;
  }
}

/**
* Heading 3.
*/
h5 {
  font-size: 20px;
  line-height: 24px;
}
@media only screen and (max-width: 899px) {
  h5 {
    font-size: 20px;
    line-height: 24px;
  }
}

/**
 * Subheading.
 */
p,
a {
  font-size: 16px;
  line-height: 28px;
}
@media only screen and (max-width: 899px) {
  p,
  a {
    font-size: 16px;
    line-height: 28px;
  }
}
p.is-white,
a.is-white {
  color: hsl(0, 0%, 100%);
}

.has-lazy-load {
  transition: all 750ms ease;
  transition-delay: 500ms;
  opacity: 0;
}
.has-lazy-load.header {
  transition-delay: 750ms;
  transition: all 500ms ease;
}

.has-lazy-load[loaded=true] {
  opacity: 1;
}

.pagination {
  width: 100%;
}
.pagination .wrapper {
  justify-content: center;
  gap: 10px;
  padding: 140px 0 0 0 !important;
}
.pagination .page-numbers {
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 250ms ease;
  color: hsl(0, 0%, 100%);
  background-color: #BA9B96;
  font-weight: 500;
  font-size: 16px;
  min-width: 44px;
  min-height: 44px;
  aspect-ratio: 1;
  border-radius: 9999px;
}
.pagination .page-numbers:hover, .pagination .page-numbers.current {
  background-color: #76382D;
}
.pagination .page-numbers.prev, .pagination .page-numbers.next {
  margin-right: 15px;
  display: none;
}
.pagination .page-numbers.prev svg, .pagination .page-numbers.next svg {
  position: relative;
  top: 0;
  width: 27px;
  height: 22px;
  color: hsl(0, 0%, 0%);
  transition: all 250ms ease;
}
.pagination .page-numbers.prev:hover, .pagination .page-numbers.next:hover {
  color: hsl(0, 100%, 50%);
}
.pagination .page-numbers.next {
  margin-right: 0;
  margin-left: 5px;
}

/**
 * Wrapper (default)
 */
.wrapper {
  max-width: calc(1320px + 192px);
  padding: 0 96px;
  width: 100%;
  margin: 0 auto;
}
@media only screen and (max-width: 1199px) {
  .wrapper {
    max-width: calc(1033px + 160px);
    padding: 0 80px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 899px) {
  .wrapper {
    max-width: calc(1133px + 80px);
    padding: 0 40px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 599px) {
  .wrapper {
    max-width: calc(1133px + 48px);
    padding: 0 24px;
    width: 100%;
    margin: 0 auto;
  }
}

/**
 * Wrapper (small)
 */
.wrapper--small {
  max-width: calc(952px + 560px);
  padding: 0 280px;
  width: 100%;
  margin: 0 auto;
}
@media only screen and (max-width: 1199px) {
  .wrapper--small {
    max-width: calc(933px + 160px);
    padding: 0 80px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 899px) {
  .wrapper--small {
    max-width: calc(819px + 80px);
    padding: 0 40px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 599px) {
  .wrapper--small {
    max-width: calc(1280px + 48px);
    padding: 0 24px;
    width: 100%;
    margin: 0 auto;
  }
}

/**
* Self hosted google webfonts.
* https://gwfh.mranftl.com/fonts
**/
/* plus-jakarta-sans-300 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 300;
  src: url("../fonts/plus-jakarta-sans-v11-latin-300.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* plus-jakarta-sans-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 400;
  src: url("../fonts/plus-jakarta-sans-v11-latin-regular.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* plus-jakarta-sans-500 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 500;
  src: url("../fonts/plus-jakarta-sans-v11-latin-500.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* plus-jakarta-sans-600 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 600;
  src: url("../fonts/plus-jakarta-sans-v11-latin-600.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* plus-jakarta-sans-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 700;
  src: url("../fonts/plus-jakarta-sans-v11-latin-700.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/**
 * Components.
 */
.navigation-mobile {
  position: fixed;
  top: 100vh;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: calc(100% - 100px);
  margin-top: 100px;
  transition: all 500ms ease;
  background: hsl(0, 0%, 100%);
  opacity: 0;
  z-index: 999;
  overflow-x: hidden;
}
@media only screen and (max-width: 1199px) {
  .navigation-mobile {
    height: calc(100% - 80px);
    margin-top: 80px;
  }
}
.navigation-mobile.is-active {
  top: 0;
  opacity: 1;
}
.navigation-mobile::-webkit-scrollbar {
  display: none;
}
.navigation-mobile .wrapper {
  height: 100%;
}

/**
 * Main menu.
 */
.navigation-mobile__main {
  padding: 10px 0;
}
.navigation-mobile__main > li {
  position: relative;
}
.navigation-mobile__main > li.current_page_ancestor > a, .navigation-mobile__main > li.current-menu-item > a {
  color: hsl(0, 0%, 0%);
}
.navigation-mobile__main > li.is-active > a {
  color: hsl(0, 0%, 0%);
}
.navigation-mobile__main > li.is-active > a > span svg {
  transform: rotate(-90deg);
}
.navigation-mobile__main > li > a {
  font-size: 20px;
  line-height: 24px;
  display: block;
  position: relative;
  width: 100%;
  font-weight: 700;
  margin: 22px 0 0 0;
  color: hsl(0, 0%, 0%);
}
.navigation-mobile__main > li > a > span {
  padding: 0 20px 0 5px;
  cursor: pointer;
}
.navigation-mobile__main > li > a > span svg {
  position: absolute;
  top: calc(50% - 8px);
  right: 0;
  width: 18px;
  height: 18px;
  margin-left: 5px;
  transition: all 500ms ease;
  color: hsl(0, 0%, 0%);
}
.navigation-mobile__main > li .submenu-container {
  display: none;
  position: relative;
  margin-top: 10px;
  padding-top: 20px;
}
.navigation-mobile__main > li .submenu-container li a {
  font-size: 14px;
  line-height: 18px;
  position: relative;
  display: block;
  margin-bottom: 10px;
  font-weight: 600;
  color: hsl(0, 0%, 0%);
}
.navigation-mobile__main > li .submenu-container li.current_page_ancestor > a, .navigation-mobile__main > li .submenu-container li.current-menu-item > a {
  color: hsl(0, 0%, 0%);
}
.navigation-mobile__main > li .submenu-container li.is-active > a {
  color: hsl(0, 0%, 0%);
}

/**
 * Disable scroll.
 */
body.is-active {
  overflow: hidden;
}
body.is-active .header::before {
  bottom: 0;
}

.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  margin-inline: 16px;
  isolation: isolate;
}
.header::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 100%;
  background: rgba(255, 255, 255, 0.64);
  backdrop-filter: blur(32px);
  -webkit-backdrop-filter: blur(32px);
  border: 1px solid rgba(255, 255, 255, 0.32);
  border-radius: 0 0 16px 16px;
  transition: all 0.3s ease;
  z-index: -1;
}
.header--dropdown-active::before {
  height: calc(100% + var(--dropdown-height, 400px));
  border-radius: 0 0 16px 16px;
}
.header .wrapper {
  padding-block: 12px;
}
.header__container {
  display: flex;
  align-items: center;
}
@media (max-width: 600px) {
  .header__container {
    justify-content: space-between;
  }
}
@media (min-width: 1200px) {
  .header__container {
    justify-content: space-between;
  }
}
.header__logo {
  width: 48px;
  height: 44px;
  position: relative;
  flex-shrink: 0;
}
.header__logo-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.header__nav--desktop {
  display: none;
}
@media (min-width: 1200px) {
  .header__nav--desktop {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding-inline: 32px;
  }
}
@media (min-width: 1280px) {
  .header__nav--desktop {
    padding-inline: 64px;
  }
}
.header .header__nav-icon path {
  transition: all 0.2s ease;
}
.header .header__nav-item--active span.header__nav-link {
  color: #640D0D;
}
.header .header__nav-item--active .header__nav-icon path {
  stroke: #640D0D;
}
.header__nav-item--dropdown {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  position: relative;
  padding: 8px 0;
  transition: all 0.2s ease;
}
.header__nav-item--dropdown:hover .header__nav-link {
  color: #640D0D;
}
.header__nav-item--dropdown--active .header__nav-link {
  color: #640D0D;
}
.header__nav-link {
  color: hsl(26, 14%, 10%);
  font-weight: 500;
  font-size: 16px;
  text-decoration: none;
  transition: color 0.2s ease;
}
.header__nav-link:hover {
  color: #640D0D;
}
.header__nav-icon {
  width: 8px;
  height: 8px;
  color: hsl(26, 14%, 10%);
}
.header__cta--desktop {
  display: none;
}
@media (min-width: 600px) {
  .header__cta--desktop {
    display: flex;
    align-items: center;
    min-width: fit-content;
    margin-left: auto;
  }
}
.header__cta-text {
  background: #551013;
  color: white;
  padding: 12px 20px;
  border-radius: 9999px;
  font-size: 14px;
  font-weight: 500;
}
.header__cta-icon {
  background: #551013;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 0;
}
.header__cta-icon svg {
  width: 20px;
  height: 20px;
  color: white;
}
.header__menu-toggle--mobile {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px;
  background: none;
  border: none;
  cursor: pointer;
}
@media (min-width: 1200px) {
  .header__menu-toggle--mobile {
    display: none;
  }
}
.header__menu-line {
  width: 24px;
  height: 2px;
  background: #374151;
  transition: all 0.3s ease;
}
.header__menu-toggle--active .header__menu-line:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
}
.header__menu-toggle--active .header__menu-line:nth-child(2) {
  opacity: 0;
}
.header__menu-toggle--active .header__menu-line:nth-child(3) {
  transform: rotate(-45deg) translate(7px, -6px);
}
.header__dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  z-index: 1;
  background: transparent;
}
.header__dropdown--active {
  opacity: 1;
  visibility: visible;
}
.header__dropdown-container {
  padding: 40px 80px 32px;
}
@media (max-width: 1023px) and (min-width: 768px) {
  .header__dropdown-container {
    padding: 40px 40px 32px;
  }
}
@media (max-width: 767px) {
  .header__dropdown-container {
    padding: 40px 25px 32px;
  }
}
.header__dropdown-content {
  display: flex;
  flex-direction: column;
  gap: 32px;
  max-width: 1200px;
  margin: 0 auto;
}
.header__dropdown-title {
  font-family: "the-seasons";
  color: hsl(26, 14%, 10%);
  margin: 0;
}
.header__dropdown-sections {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
}
@media (max-width: 1023px) {
  .header__dropdown-sections {
    gap: 32px;
  }
}
@media (max-width: 767px) {
  .header__dropdown-sections {
    grid-template-columns: 1fr;
  }
}
.header__dropdown-section {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.header__dropdown-section-header {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.header__dropdown-section-title {
  font-family: "the-seasons";
  font-size: 20px;
  color: hsl(26, 14%, 10%);
  margin: 0;
}
.header__dropdown-section-description {
  font-family: "Plus Jakarta Sans";
  font-size: 14px;
  font-weight: 300;
  color: hsl(26, 14%, 10%);
  line-height: normal;
  margin: 0;
}
.header__dropdown-items {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.header__dropdown-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  transition: transform 0.2s ease;
}
.header__dropdown-item:hover {
  transform: translateX(4px);
}
.header__dropdown-item:hover .header__dropdown-item-text {
  color: #640D0D;
}
.header__dropdown-item-text {
  font-family: "Plus Jakarta Sans";
  font-size: 16px;
  color: hsl(26, 14%, 10%);
  transition: color 0.2s ease;
}
.header__dropdown-item-icon {
  width: 24px;
  height: 24px;
  background: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  rotate: -90deg;
}
.header__dropdown-item-icon svg {
  width: 16px;
  height: 16px;
  color: hsl(26, 14%, 10%);
  opacity: 0.8;
}
.header__dropdown-section-cta {
  font-family: "Plus Jakarta Sans";
  font-size: 16px;
  font-weight: 500;
  color: hsl(26, 14%, 10%);
  background: none;
  border: none;
  text-align: left;
  padding: 0;
  cursor: pointer;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease;
  margin-top: 20px;
  width: fit-content;
}
@media (max-width: 1023px) {
  .header__dropdown-section-cta {
    margin-top: 0;
  }
}
.header__dropdown-section-cta:hover {
  border-bottom-color: hsl(26, 14%, 10%);
}
.header .header__cta-button.button--primary {
  gap: 0 !important;
}
.header .header__cta-button.button--primary .header__cta-icon {
  transition: all 250ms ease-in-out;
}
.header .header__cta-button.button--primary:hover .header__cta-icon {
  transform: translateX(4px);
}

.navbar {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: none;
  left: 16px;
  right: 16px;
}
@media (max-width: 1200px) {
  .navbar.navbar--active {
    display: block;
  }
  .navbar .navbar__title {
    display: none;
  }
}
@media (min-width: 1200px) {
  .navbar {
    display: none !important;
  }
}
.navbar__overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
}
.navbar__content {
  position: fixed;
  top: 0;
  left: 16px;
  right: 16px;
  background: rgba(255, 255, 255, 0.4);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.32);
  border-radius: 0 0 16px 16px;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}
.navbar__container {
  padding-top: 16px;
  padding-bottom: 64px;
}
@media only screen and (max-width: 599px) {
  .navbar__container {
    padding-bottom: 32px;
  }
}
.navbar__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 56px;
}
.navbar__logo {
  width: 48px;
  height: 44px;
  position: relative;
}
.navbar__logo-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.navbar__close {
  padding: 0 0px 8px 8px;
  background: none;
  border: none;
  cursor: pointer;
}
.navbar__close svg {
  width: 40px;
  height: 30px;
  color: hsl(26, 14%, 10%);
}
.navbar__close svg path {
  stroke: hsl(26, 14%, 10%);
}
.navbar__menu {
  display: flex;
  flex-direction: column;
  gap: 32px;
}
@media only screen and (max-width: 599px) {
  .navbar__menu {
    max-height: calc(100svh - 164px);
    overflow-y: scroll;
    height: 100%;
  }
}
.navbar__title {
  font-family: "Seasons", serif;
  font-size: 24px;
  color: hsl(26, 14%, 10%);
  margin-bottom: 32px;
  line-height: 1.3;
}
.navbar__sections {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
}
@media (max-width: 1200px) {
  .navbar__sections {
    display: flex;
    flex-direction: column;
  }
}
.navbar__section {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.navbar__section-header {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
@media (max-width: 1200px) {
  .navbar__section-header .navbar__section-description {
    display: none;
  }
}
.navbar__section-title {
  font-family: "Seasons", serif;
  font-size: 20px;
  color: hsl(26, 14%, 10%);
  margin-bottom: 12px;
}
.navbar__section-description {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 12px;
  font-weight: 300;
  color: hsl(26, 14%, 10%);
  line-height: 1.5;
}
.navbar__items {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.navbar__item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
}
.navbar__item-text {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 16px;
  color: hsl(26, 14%, 10%);
}
.navbar__item-icon {
  width: 24px;
  height: 24px;
  background: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.navbar__item-icon svg {
  width: 16px;
  height: 16px;
  color: hsl(26, 14%, 10%);
  opacity: 0.8;
}
.navbar__section-cta {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: hsl(26, 14%, 10%);
  background: none;
  border: none;
  text-align: left;
  padding: 0;
  padding-bottom: 8px;
  cursor: pointer;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease;
  width: fit-content;
}
.navbar__section-cta:hover {
  border-bottom-color: hsl(26, 14%, 10%);
}
.navbar .navbar__menu {
  display: flex;
  flex-direction: row;
  gap: 164px;
}
@media only screen and (max-width: 599px) {
  .navbar .navbar__menu {
    gap: 32px;
    flex-direction: column;
  }
}
.navbar .navbar__menu .col--left {
  max-width: 160px;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 32px;
}
@media only screen and (max-width: 599px) {
  .navbar .navbar__menu .col--left {
    max-width: 100%;
  }
}
.navbar .navbar__menu .col--left a.navbar__menu-dropdown-title {
  font-family: "the-seasons";
  color: #2A303D;
  font-size: 24px;
  line-height: 32px;
}
@media only screen and (max-width: 899px) {
  .navbar .navbar__menu .col--left a.navbar__menu-dropdown-title {
    font-size: 24px;
    line-height: 32px;
  }
}
.navbar .navbar__menu .col--left .navbar__menu-subitem-link {
  font-family: "Plus Jakarta Sans";
  color: #2A303D;
  font-size: 20px;
  line-height: 24px;
}
@media only screen and (max-width: 899px) {
  .navbar .navbar__menu .col--left .navbar__menu-subitem-link {
    font-size: 20px;
    line-height: 24px;
  }
}
.navbar .navbar__menu .col--left .navbar__menu-subitems {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.navbar .navbar__menu .col--right {
  max-width: 240px;
  display: flex;
  flex-direction: column;
  gap: 32px;
}
@media only screen and (max-width: 599px) {
  .navbar .navbar__menu .col--right {
    max-width: 100%;
  }
}
.navbar .navbar__menu .col--right a {
  font-family: "the-seasons";
  color: #2A303D;
  font-size: 24px;
  line-height: 32px;
}
@media only screen and (max-width: 899px) {
  .navbar .navbar__menu .col--right a {
    font-size: 24px;
    line-height: 32px;
  }
}
.navbar .navbar__menu-dropdown-header {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.navbar .navbar__menu-subitem-link {
  display: flex;
  flex-direction: row;
  align-items: center;
  max-width: 160px;
  justify-content: space-between;
  gap: 24px;
}
.navbar__cta {
  display: flex;
  align-items: center;
}
@media only screen and (min-width: 600px) {
  .navbar__cta {
    display: none;
  }
}
.navbar__cta .button--primary {
  padding-left: 0;
}
.navbar__cta-text {
  background: #551013;
  color: white;
  padding: 12px 20px;
  border-radius: 9999px;
  font-size: 14px;
  font-weight: 500;
  font-family: "Plus Jakarta Sans";
}
.navbar__cta-icon {
  background: #551013;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 0;
}
.navbar__cta-icon svg {
  width: 20px;
  height: 20px;
  color: white;
}

body.home .hero__breadcrumbs {
  display: none;
}

.hero {
  position: relative;
  border-bottom-right-radius: 8px;
  border-bottom-left-radius: 8px;
  overflow: hidden;
  gap: 0;
}
@media only screen and (max-width: 599px) {
  .hero {
    margin-inline: 16px;
    overflow: clip;
    height: 100svh;
  }
}
.hero.type--gradient .wrapper {
  height: 560px;
}
@media only screen and (max-width: 599px) {
  .hero.type--gradient .wrapper {
    height: 100svh;
  }
}
.hero.type--image #breadcrumbs, .hero.type--video #breadcrumbs, .hero.type--gradient #breadcrumbs {
  margin-bottom: 40px;
}
.hero.type--image #breadcrumbs *, .hero.type--video #breadcrumbs *, .hero.type--gradient #breadcrumbs * {
  font-size: 14px;
}
@media only screen and (max-width: 899px) {
  .hero.type--image #breadcrumbs, .hero.type--video #breadcrumbs, .hero.type--gradient #breadcrumbs {
    margin-bottom: 32px;
  }
}
.hero.type--image #breadcrumbs > span, .hero.type--video #breadcrumbs > span, .hero.type--gradient #breadcrumbs > span {
  color: #fff;
  font-family: "Plus Jakarta Sans";
  font-size: 14px;
  font-weight: 500;
  display: flex;
  flex-direction: row;
  gap: 8px;
  align-items: center;
}
.hero.type--image #breadcrumbs svg path, .hero.type--video #breadcrumbs svg path, .hero.type--gradient #breadcrumbs svg path {
  fill: #fff;
}
.hero.type--image #breadcrumbs .breadcrumb_last, .hero.type--video #breadcrumbs .breadcrumb_last, .hero.type--gradient #breadcrumbs .breadcrumb_last {
  color: rgba(255, 255, 255, 0.64);
  font-family: "Plus Jakarta Sans";
  font-size: 14px;
  font-weight: 300;
}
.hero .wrapper {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding-block: 140px 100px;
  height: 684px;
}
@media only screen and (max-width: 1199px) {
  .hero .wrapper {
    padding-block: 120px 80px;
    height: 640px;
  }
}
@media only screen and (max-width: 899px) {
  .hero .wrapper {
    padding-block: 104px 64px;
    height: 560px;
  }
}
@media only screen and (max-width: 599px) {
  .hero .wrapper {
    height: 100svh;
    min-height: unset;
    padding-block: 64px 24px;
    justify-content: flex-start;
  }
}
@media (max-width: 1023px) and (min-width: 768px) {
  .hero {
    padding-block: 80px 40px;
  }
}
@media (max-width: 767px) {
  .hero {
    padding-block: 40px 25px;
  }
}
.hero.type--video iframe {
  box-sizing: border-box;
  width: 177.77777778vh;
  height: 56.25vw;
  min-width: 100%;
  min-height: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.hero.type--gradient {
  background-image: url("../images/gradient-banner.png");
}
.hero.type--gradient .hero__container {
  max-width: 100%;
}
.hero__background {
  position: absolute;
  inset: 0;
  z-index: 1;
}
@media only screen and (max-width: 599px) {
  .hero__background {
    height: 100svh;
    border-bottom-right-radius: 8px;
    border-bottom-left-radius: 8px;
  }
}
.hero__background-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  transform: none !important;
}
.hero__background-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  transform: none !important;
}
.hero__overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(283deg, rgba(0, 0, 0, 0) 47.71%, rgba(0, 0, 0, 0.48) 71.26%);
  z-index: 2;
}
.hero__container {
  position: relative;
  z-index: 10;
  width: 100%;
  max-width: 448px;
}
@media (min-width: 1024px) {
  .hero__container {
    max-width: 512px;
  }
}
.hero__content {
  display: flex;
  flex-direction: column;
}
@media (min-width: 900px) {
  .hero__content {
    gap: 40px;
  }
}
.hero__content--gradient {
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  gap: 48px;
}
@media (min-width: 1024px) {
  .hero__content--gradient {
    flex-direction: row;
    gap: 80px;
  }
}
.hero__text {
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.hero__content--gradient .hero__text {
  flex: 1;
  max-width: 512px;
}
@media (min-width: 900px) {
  .hero__content--gradient .hero__text {
    width: 50%;
  }
}
.hero__cta-button {
  padding-left: 0 !important;
}
.hero__info {
  flex: 1;
  max-width: 488px;
  display: flex;
  flex-direction: column;
  gap: 40px;
}
@media only screen and (max-width: 1199px) {
  .hero__info {
    max-width: 340px;
  }
}
@media only screen and (max-width: 599px) {
  .hero__info {
    max-width: 100%;
  }
}
.hero__title {
  font-family: "the-seasons";
  color: white;
}
.hero__title-accent {
  color: #ed1c24;
}
.hero.type--gradient .hero__title-accent {
  color: #640d0d;
}
.hero__description {
  font-family: "Plus Jakarta Sans";
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  color: #fff;
}
@media (min-width: 900px) {
  .hero__description {
    font-size: 18px;
  }
}
.hero__cta {
  display: flex;
  align-items: center;
}
.hero__cta-text {
  background: #551013;
  color: white;
  padding: 12px 20px;
  border-radius: 9999px;
  font-size: 14px;
  font-weight: 500;
  font-family: "Plus Jakarta Sans";
}
.hero__cta-icon {
  background: #551013;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 0;
}
.hero__cta-icon svg {
  width: 20px;
  height: 20px;
  color: white;
}
.hero__scroll {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-end;
  z-index: 10;
  cursor: pointer;
  transition: transform 0.2s ease;
  width: 100%;
}
@media only screen and (max-width: 599px) {
  .hero__scroll {
    display: none;
  }
}
.hero__scroll:hover {
  transform: translateY(-2px);
}
.hero__scroll-content {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: -80px;
}
@media only screen and (max-width: 1199px) {
  .hero__scroll-content {
    margin-bottom: -64px;
  }
}
.hero__scroll-text {
  color: white;
  font-size: 14px;
  font-family: "Plus Jakarta Sans";
}

.content-default {
  padding-block: 144px 0;
}
@media (max-width: 1023px) and (min-width: 768px) {
  .content-default {
    padding-top: 80px;
  }
}
@media (max-width: 767px) {
  .content-default {
    padding-top: 40px;
  }
}
.content-default__container {
  display: flex;
  flex-direction: column;
}
.content-default__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  gap: 32px;
  margin-bottom: 0;
}
@media (min-width: 600px) {
  .content-default__content {
    flex-direction: row;
    justify-content: space-between;
  }
}
.content-default__text {
  max-width: 480px;
  width: 100%;
}
.content-default__text .content-default__title {
  margin-bottom: 0;
}
@media only screen and (max-width: 1199px) {
  .content-default__text {
    max-width: 400px;
  }
}
@media only screen and (max-width: 899px) {
  .content-default__text {
    max-width: 400px;
  }
}
@media only screen and (max-width: 599px) {
  .content-default__text {
    max-width: 100%;
  }
}
.content-default__title {
  font-family: "the-seasons";
  color: #550B0D;
  margin-bottom: 32px;
}
@media (min-width: 1024px) {
  .content-default__title {
    margin-bottom: 40px;
  }
}
.content-default__title-accent {
  color: #640D0D;
}
.content-default__info {
  display: flex;
  flex-direction: column;
  gap: 40px;
  max-width: 488px;
  width: 100%;
}
@media only screen and (max-width: 899px) {
  .content-default__info {
    max-width: 340px;
  }
}
@media only screen and (max-width: 599px) {
  .content-default__info {
    max-width: 100%;
  }
}
.content-default__info.no--title {
  max-width: 100%;
  width: 100%;
}
.content-default__info.no--title .content-default__description {
  max-width: 952px;
  margin-inline: auto;
}
.content-default__info.no--title .content-default__description h2,
.content-default__info.no--title .content-default__description h3,
.content-default__info.no--title .content-default__description h4 {
  margin-bottom: 40px;
}
.content-default__info.no--title .content-default__description p {
  color: #573C3C;
  font-weight: 300;
}
.content-default__info.no--title .content-default__description p img {
  width: 100%;
  height: 480px;
  object-fit: cover;
  margin-block: 40px;
  border-radius: 8px;
}
.content-default:has(.no--title) {
  padding-block: 80px;
}
@media only screen and (max-width: 899px) {
  .content-default:has(.no--title) {
    padding-block: 40px;
  }
}
.content-default:has(.no--title) .content-default__text {
  display: none;
}
.content-default__description {
  font-family: "Plus Jakarta Sans";
  font-size: 16px;
  font-weight: 300;
  line-height: 1.5;
  color: hsl(26, 14%, 10%);
}
.content-default__cta {
  padding: 12px 20px;
  border: 1px solid #640D0D;
  border-radius: 9999px;
  color: #640D0D;
  font-size: 14px;
  font-weight: 500;
  font-family: "Plus Jakarta Sans";
  background: transparent;
  cursor: pointer;
  transition: all 0.2s ease;
  align-self: flex-start;
  margin-bottom: 140px;
}
.content-default__cta:hover {
  background: #640D0D;
  color: white;
}
.content-default__image {
  margin-top: 0;
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  overflow: hidden;
}
.content-default__image-img {
  width: 100%;
  height: 600px;
  object-fit: cover;
  object-position: center;
}

.article-single .wrapper {
  padding-block: 164px 64px;
}
@media only screen and (max-width: 599px) {
  .article-single .wrapper {
    padding-block: 120px 64px;
  }
}
.article-single .article-single__header-head {
  display: flex;
  flex-direction: row;
  gap: 40px;
  justify-content: space-between;
  margin-top: 64px;
}
@media only screen and (max-width: 599px) {
  .article-single .article-single__header-head {
    flex-direction: column;
    gap: 32px;
    margin-top: 40px;
  }
}
.article-single .article-single__title {
  max-width: 540px;
  width: 100%;
}
@media only screen and (max-width: 1199px) {
  .article-single .article-single__title {
    max-width: 400px;
  }
}
@media only screen and (max-width: 599px) {
  .article-single .article-single__title {
    max-width: 100%;
  }
}
.article-single .article-single__description {
  max-width: 488px;
  width: 100%;
  margin-top: 20px;
}
@media only screen and (max-width: 1199px) {
  .article-single .article-single__description {
    max-width: 400px;
  }
}
@media only screen and (max-width: 899px) {
  .article-single .article-single__description {
    max-width: 340px;
  }
}
@media only screen and (max-width: 599px) {
  .article-single .article-single__description {
    max-width: 100%;
    margin-top: 0;
  }
}
.article-single .article-single__description * {
  color: #573C3C;
}
.article-single .article-single__meta {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  margin-top: 86px;
}
@media only screen and (max-width: 1199px) {
  .article-single .article-single__meta {
    margin-top: 80px;
    flex-direction: column;
    gap: 40px;
    align-items: flex-start;
  }
}
.article-single .article-single__meta-tags {
  display: flex;
  flex-direction: row;
  gap: 32px;
  align-items: center;
}
@media only screen and (max-width: 899px) {
  .article-single .article-single__meta-tags {
    flex-wrap: wrap;
    gap: 16px;
  }
}
.article-single .article-single__meta-item {
  display: flex;
  flex-direction: row;
  gap: 24px;
  align-items: center;
}
.article-single .article-single__meta-label {
  font-family: "the-seasons";
  font-size: 20px;
  color: #550B0D;
}
@media only screen and (max-width: 899px) {
  .article-single .article-single__meta-label {
    font-size: 16px;
  }
}
.article-single .article-single__meta-badge {
  border-radius: 100px;
  background-color: #FAE1D8;
  padding: 8px 16px;
}
.article-single .article-single__meta-badge span {
  line-height: normal;
  font-family: "Plus Jakarta Sans";
  color: hsl(26, 14%, 10%);
  font-size: 12px;
  font-weight: 300;
}
.article-single .article-single__author {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 24px;
}
.article-single .article-single__author img {
  width: 56px;
  height: 56px;
  min-width: 56px;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 100px;
}
.article-single .article-single__author .article-single__author-name {
  font-family: "Plus Jakarta Sans";
  font-weight: 300;
  color: #000;
  font-size: 16px;
}
.article-single__image-container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(100% + 64px);
  position: relative;
  animation: slideInDesktop 2000ms cubic-bezier(0.7, 0, 0.3, 1);
  animation-play-state: paused;
  margin-left: -32px;
}
.article-single__hero-image {
  width: 100%;
  height: 480px;
  object-fit: cover;
}
@media (min-width: 900px) {
  .article-single__hero-image {
    height: 560px;
  }
}
@media (min-width: 1200px) {
  .article-single__hero-image {
    height: 600px;
  }
}
.article-single .article-single__image-container[loaded=true] {
  animation-play-state: running;
}

@keyframes slideInDesktop {
  0% {
    clip-path: inset(100px 190px);
    -webkit-clip-path: inset(100px 190px);
  }
  100% {
    clip-path: inset(0 0);
    -webkit-clip-path: inset(0 0);
  }
}
.articles {
  padding-block: 140px;
}
@media only screen and (max-width: 899px) {
  .articles {
    padding-block: 80px;
  }
}
@media only screen and (max-width: 599px) {
  .articles {
    padding-block: 40px;
  }
}
.articles__container {
  width: 100%;
  margin-top: 80px;
}
@media only screen and (max-width: 899px) {
  .articles__container {
    margin-top: 40px;
  }
}
.articles__content {
  display: flex;
  flex-direction: column;
  gap: 64px;
}
.articles__header {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  gap: 32px;
}
@media (min-width: 600px) {
  .articles__header {
    flex-direction: row;
    gap: 24px;
  }
}
.articles__title {
  font-family: "the-seasons";
  max-width: 50%;
}
@media only screen and (max-width: 899px) {
  .articles__title {
    max-width: 100%;
  }
}
.articles__title-part--primary {
  color: #551013;
}
.articles__title-part--secondary {
  color: #711111;
}
.articles__info {
  display: flex;
  flex-direction: column;
  gap: 40px;
}
.articles__description {
  font-family: "Plus Jakarta Sans";
  font-size: 16px;
  font-weight: 300;
  line-height: 1.5;
  color: #573C3C;
  max-width: 448px;
}
.articles__section {
  display: flex;
  flex-direction: column;
  gap: 40px;
}
.articles__controls {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  gap: 32px;
}
@media (min-width: 1024px) {
  .articles__controls {
    flex-direction: row;
    align-items: center;
    gap: 0;
  }
}
.articles__pagination {
  display: flex;
  align-items: center;
  gap: 24px;
}
.articles__pagination-text {
  font-weight: 400;
  font-size: 24px;
  color: #2A303D;
}
.articles__pagination-buttons {
  display: flex;
  align-items: center;
  gap: 8px;
}
.articles__pagination-button {
  width: 36px;
  height: 36px;
  background-color: #76382D;
  border-radius: 50%;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
}
.articles__pagination-button:hover {
  background: #6B7280;
}
.articles__pagination-button svg {
  color: white;
  opacity: 0.8;
}
.articles__cta {
  padding: 12px 20px;
  border: 1px solid #640D0D;
  border-radius: 9999px;
  color: #640D0D;
  font-size: 14px;
  font-weight: 500;
  font-family: "Plus Jakarta Sans", sans-serif;
  background: transparent;
  cursor: pointer;
  transition: all 0.2s ease;
}
.articles__cta:hover {
  background: #640D0D;
  color: white;
}
.articles__list {
  width: 100%;
}
.articles__grid:not(.keen-slider) {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  width: 100%;
}
@media (min-width: 600px) {
  .articles__grid:not(.keen-slider) {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1200px) {
  .articles__grid:not(.keen-slider) {
    grid-template-columns: repeat(3, 1fr);
  }
}
.articles__grid.keen-slider {
  display: flex;
  flex-direction: row;
  overflow: clip;
}
.articles__card {
  background: white;
  border-radius: 8px;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  display: block;
  text-decoration: none;
  color: inherit;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.articles__card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 25px -5px rgba(0, 0, 0, 0.15);
  text-decoration: none;
  color: inherit;
}
.articles__card-image {
  height: 240px;
  overflow: hidden;
}
.articles__card-image-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.articles__card-content {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  flex-grow: 1;
}
.articles__card-title {
  font-family: "the-seasons";
  font-size: 24px;
  color: #551013;
  line-height: 1.3;
}
.articles__card-description {
  font-family: "Plus Jakarta Sans";
  font-size: 16px;
  font-weight: 300;
  line-height: 1.5;
  color: #573C3C;
}
.articles__card-link {
  font-family: "Plus Jakarta Sans";
  font-size: 16px;
  font-weight: 500;
  color: #640D0D;
  margin-top: auto;
  transition: color 0.2s ease;
}

/**
 * Articles Section Component
 */
.articles {
  padding: 0;
}
.articles .wrapper {
  padding-block: 164px 140px;
}
@media only screen and (max-width: 899px) {
  .articles .wrapper {
    padding-block: 164px 80px;
  }
}
@media only screen and (max-width: 599px) {
  .articles .wrapper {
    padding-block: 120px 40px;
  }
}
.articles .articles__filter-form {
  display: flex;
  flex-direction: row;
  gap: 32px;
  justify-content: space-between;
  margin-top: 80px;
}
@media only screen and (max-width: 1199px) {
  .articles .articles__filter-form {
    flex-direction: column-reverse;
    align-items: flex-start;
  }
}
@media only screen and (max-width: 899px) {
  .articles .articles__filter-form {
    margin-top: 40px;
  }
}
.articles .articles__filter-categories {
  max-width: 548px;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
@media only screen and (max-width: 1199px) {
  .articles .articles__filter-categories {
    flex-direction: column;
    align-items: flex-start;
    max-width: 100%;
  }
}
.articles .articles__filter-label {
  color: hsl(26, 14%, 10%);
  font-size: 20px;
  font-weight: 400;
  font-family: "the-seasons";
}
@media only screen and (max-width: 899px) {
  .articles .articles__filter-label {
    font-size: 16px;
  }
}
.articles .articles__card-description {
  margin-bottom: 16px;
}
.articles .articles__card-link {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  margin-top: auto;
  transition: all 250ms ease-in-out;
}
.articles .articles__card-link:hover {
  gap: 12px;
}
.articles .articles__search {
  max-width: 421px;
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  position: relative;
}
@media only screen and (max-width: 1199px) {
  .articles .articles__search {
    max-width: 100%;
  }
}
.articles .articles__search .articles__search-label {
  width: 100%;
  margin-bottom: 24px;
  color: hsl(26, 14%, 10%);
  font-size: 20px;
  font-weight: 400;
  font-family: "the-seasons";
}
@media only screen and (max-width: 899px) {
  .articles .articles__search .articles__search-label {
    font-size: 16px;
  }
}
.articles .articles__search input {
  width: 100%;
  border-bottom: 1px solid #550B0D !important;
  padding-inline: 0 !important;
  color: #550B0D !important;
  font-weight: 400;
}
.articles .articles__search input::placeholder {
  color: #550B0D !important;
  font-weight: 300;
  font-size: 14px;
}
.articles .articles__search .articles__search-button {
  position: absolute;
  top: 48px;
  right: 0;
}
.articles .articles__filter-buttons {
  display: flex;
  flex-direction: row;
  gap: 24px;
  align-items: center;
}
@media only screen and (max-width: 899px) {
  .articles .articles__filter-buttons {
    flex-wrap: wrap;
  }
}
@media only screen and (max-width: 599px) {
  .articles .articles__filter-buttons {
    gap: 8px;
  }
}
.articles .articles__filter-buttons label {
  margin: 0;
}
.articles .articles__filter-button {
  border: 1px solid #550B0D;
  padding: 12px 20px;
  color: #550B0D;
  background-color: transparent;
  font-size: 14px;
  font-weight: 500;
  line-height: 24px;
  border-radius: 9999px;
  display: flex;
  align-items: center;
  transition: all 250ms ease-in-out;
  cursor: pointer;
}
.articles .articles__filter-button:has(input:checked) {
  background-color: #550B0D;
  color: white;
}
.articles .articles__filter-button:has(input:checked) span {
  color: white;
}
.articles .articles__filter-button:hover {
  background-color: #550B0D;
  color: white;
}
.articles .articles__filter-button:hover span {
  color: white;
}
.articles .articles__filter-button .articles__filter-input {
  display: none;
}
.articles .articles__filter-button span {
  font-family: "Plus Jakarta Sans";
  color: #550B0D;
  font-size: 14px;
  font-weight: 500;
  line-height: 24px;
  transition: all 250ms ease-in-out;
}
.articles .articles__grid {
  margin-top: 104px;
}
@media only screen and (max-width: 899px) {
  .articles .articles__grid {
    margin-top: 80px;
  }
}
@media only screen and (max-width: 599px) {
  .articles .articles__grid {
    margin-top: 40px;
  }
}

/**
 * Contact Section Component
 */
.contact-section {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10rem;
  padding: 5rem 1.5rem;
  background-color: #fff4eb;
}
@media (min-width: 768px) {
  .contact-section {
    padding: 5rem 5rem;
  }
}
.contact-section__container {
  width: 100%;
}
.contact-section__form {
  display: flex;
  padding: 2rem;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  gap: 0.625rem;
  width: 100%;
  border-radius: 0.5rem;
  position: relative;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.contact-section__form::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.32) 0%, rgba(0, 0, 0, 0.32) 100%);
  border-radius: 0.5rem;
}
.contact-section__form-overlay {
  display: flex;
  padding: 5rem;
  align-items: flex-start;
  gap: 1rem;
  width: 100%;
  border-radius: 0.5rem;
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(16px);
  position: relative;
  z-index: 1;
}
.contact-section__form-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3rem;
  flex: 1;
}
.contact-section__form-header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2rem;
  width: 100%;
}
.contact-section__form-title {
  color: white;
  font-family: "the-seasons";
}
.contact-section__form-description {
  color: rgba(255, 255, 255, 0.8);
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 1rem;
  font-weight: 300;
  line-height: 1.75rem;
  width: 100%;
}
.contact-section__form-fields {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2rem;
  width: 100%;
}
.contact-section__field {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
  width: 100%;
}
.contact-section__field-label {
  color: white;
  font-family: "The Seasons", "Crimson Text", serif;
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 2rem;
  width: 100%;
}
.contact-section__field-title {
  color: white;
  font-family: "The Seasons", "Crimson Text", serif;
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 2rem;
}
.contact-section__field-input {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
  width: 100%;
}
.contact-section__field-line {
  height: 1px;
  background-color: white;
  width: 100%;
}
.contact-section__field-select {
  display: flex;
  width: 20rem;
  justify-content: space-between;
  align-items: center;
}
.contact-section__input, .contact-section__textarea {
  color: rgba(255, 255, 255, 0.3);
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 1rem;
  font-weight: 300;
  line-height: 1.75rem;
  width: 100%;
  background: transparent;
  border: none;
  outline: none;
}
.contact-section__input::placeholder, .contact-section__textarea::placeholder {
  color: rgba(255, 255, 255, 0.3);
}
.contact-section__textarea {
  resize: none;
  height: 6rem;
}
.contact-section__select-text {
  color: white;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 1rem;
  font-weight: 300;
  line-height: 1.75rem;
}
.contact-section__select-icon {
  display: flex;
  width: 1.75rem;
  height: 1.75rem;
  justify-content: center;
  align-items: center;
  border: 1px solid white;
  border-radius: 50%;
}
.contact-section__select-icon svg {
  width: 0.75rem;
  height: 0.75rem;
}
.contact-section__submit {
  display: flex;
  padding: 0.75rem 1.25rem;
  align-items: flex-start;
  gap: 0.5rem;
  background-color: white;
  border-radius: 9999px;
  border: 1px solid white;
  color: black;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.5rem;
  cursor: pointer;
}
.contact-section__info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 2.5rem;
  width: 100%;
}
.contact-section__info-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
}
.contact-section__info-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.5rem;
  width: 100%;
}
.contact-section__info-title {
  color: hsl(var(--de-donker-rood));
  font-family: "The Seasons", "Crimson Text", serif;
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 2rem;
  width: 100%;
}
@media (min-width: 1024px) {
  .contact-section__info-title {
    font-size: 1.875rem;
  }
}
.contact-section__info-description {
  color: hsl(var(--de-body-rood));
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 1rem;
  font-weight: 300;
  line-height: 1.75rem;
  width: 100%;
}
.contact-section__info-value {
  color: hsl(var(--de-body-rood));
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.75rem;
  width: 100%;
}
.contact-section__info-locations {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
  width: 100%;
}

/**
 * FAQ Section Component
 */
.faq-section {
  padding-block: 164px 104px;
}
@media only screen and (max-width: 599px) {
  .faq-section {
    padding-block: 120px 104px;
  }
}
.faq-section .faq-section__container {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  border-radius: 16px;
}
.faq-section .faq-section__title {
  max-width: 540px;
  text-align: center;
  margin-inline: auto;
  margin-top: 64px;
}
@media only screen and (max-width: 1199px) {
  .faq-section .faq-section__title {
    margin-top: 48px;
  }
}
@media only screen and (max-width: 899px) {
  .faq-section .faq-section__title {
    margin-top: 40px;
  }
}
@media only screen and (max-width: 599px) {
  .faq-section .faq-section__title {
    margin-top: 32px;
    text-align: left;
    max-width: 100%;
  }
}
.faq-section .faq-section__container {
  margin-top: 104px;
  padding-block: 104px;
  padding-inline: 80px;
}
@media only screen and (max-width: 599px) {
  .faq-section .faq-section__container {
    margin-top: 40px;
    padding-block: 40px;
    padding-inline: 0;
  }
}
.faq-section .faq-section__container .faq-section__item-title {
  text-align: center;
  color: hsl(0, 0%, 100%);
  margin-bottom: 104px;
}
@media only screen and (max-width: 599px) {
  .faq-section .faq-section__container .faq-section__item-title {
    margin-bottom: 40px;
    text-align: left;
  }
}
.faq-section .faq-section__content {
  display: flex;
  flex-direction: row;
  gap: 64px;
}
@media only screen and (max-width: 599px) {
  .faq-section .faq-section__content {
    flex-direction: column;
    gap: 40px;
  }
}
.faq-section .faq-section__categories {
  max-width: 50%;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 40px;
}
@media only screen and (max-width: 599px) {
  .faq-section .faq-section__categories {
    max-width: 100%;
    gap: 32px;
  }
}
.faq-section .faq-section__questions-wrapper {
  max-width: 50%;
  width: 100%;
}
@media only screen and (max-width: 599px) {
  .faq-section .faq-section__questions-wrapper {
    max-width: 100%;
  }
}
.faq-section .faq-section__category.is-active .faq-section__category-title {
  color: hsl(0, 0%, 100%);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 16px;
}
.faq-section .faq-section__category-title {
  cursor: pointer;
  color: hsl(0, 0%, 100%);
  font-family: "Plus Jakarta Sans";
  color: #D4BCBF;
  font-weight: 300;
  font-size: 24px;
  line-height: 28px;
}
@media only screen and (max-width: 599px) {
  .faq-section .faq-section__category-title {
    font-size: 20px;
  }
}
.faq-section .faq-section__questions {
  display: none;
  opacity: 0;
  flex-direction: column;
  gap: 32px;
}
@media only screen and (max-width: 599px) {
  .faq-section .faq-section__questions {
    gap: 24px;
  }
}
.faq-section .faq-section__questions.is-active {
  display: flex;
  opacity: 1;
}
.faq-section .faq-section__question {
  background-color: rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(32px);
  -webkit-backdrop-filter: blur(32px);
  border-radius: 4px;
  cursor: pointer;
}
.faq-section .faq-section__question-text {
  color: hsl(0, 0%, 100%);
  font-family: "the-seasons";
  font-size: 24px;
  line-height: 32px;
  font-weight: 400;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 16px;
  justify-content: space-between;
  cursor: pointer;
  padding: 20px;
}
@media only screen and (max-width: 599px) {
  .faq-section .faq-section__question-text {
    flex-direction: column-reverse;
    align-items: flex-end;
  }
}
.faq-section .faq-section__question-text.is-active svg {
  rotate: 0deg;
}
.faq-section .faq-section__question-text svg {
  border: 1px solid hsl(0, 0%, 100%);
  border-radius: 100px;
  aspect-ratio: 1;
  width: 26px;
  height: 26px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 6px;
  rotate: 180deg;
  transition: rotate 0.2s ease;
}
.faq-section .faq-section__question-answer {
  color: hsl(0, 0%, 100%);
  font-size: 16px;
  line-height: 28px;
  font-weight: 300;
  font-family: "Plus Jakarta Sans";
  padding-top: 16px;
  padding-inline: 20px;
  padding-bottom: 20px;
}
.faq-section .faq-section__items {
  display: flex;
  flex-direction: column;
  gap: 104px;
}
@media only screen and (max-width: 599px) {
  .faq-section .faq-section__items {
    gap: 64px;
  }
}
@media only screen and (max-width: 599px) {
  .faq-section__wrapper {
    padding-inline: 16px;
  }
}

.reviews {
  border-radius: 16px;
  background: url("../images/Gradient.png") center/cover;
  overflow: clip;
}
@media only screen and (max-width: 599px) {
  .reviews {
    margin-inline: 16px;
  }
}
.reviews__wrapper {
  padding-block: 140px 80px;
}
@media (max-width: 1023px) and (min-width: 768px) {
  .reviews__wrapper {
    padding-block: 80px 40px;
  }
}
@media (max-width: 767px) {
  .reviews__wrapper {
    padding-block: 40px 25px;
  }
}
.reviews__container {
  width: 100%;
}
.reviews__content {
  display: flex;
  flex-direction: column;
  gap: 80px;
}
@media only screen and (max-width: 599px) {
  .reviews__content {
    gap: 40px;
  }
}
.reviews__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.reviews__title {
  font-family: "the-seasons";
  color: #F9EAEC;
  max-width: 480px;
  width: 100%;
}
@media only screen and (max-width: 599px) {
  .reviews__title {
    max-width: 100%;
  }
}
.reviews__grid {
  display: flex;
  flex-direction: row;
}
.reviews__card {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.reviews__card-content {
  background: rgba(255, 255, 255, 0.24);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 8px;
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: relative;
  height: 100%;
}
.reviews__quote {
  font-family: "the-seasons";
  font-size: 48px;
  color: #F9EAEC;
  line-height: 1;
  margin-bottom: 0;
}
@media only screen and (max-width: 899px) {
  .reviews__quote {
    font-size: 20px;
    line-height: 32px;
  }
}
.reviews__card-inner {
  padding-left: 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.reviews__client {
  font-family: "the-seasons";
  font-size: 24px;
  color: #F9EAEC;
}
.reviews__text {
  font-family: "Plus Jakarta Sans";
  font-size: 14px;
  font-weight: 300;
  line-height: 24px;
  color: #F9EAEC;
}
.reviews__treatment {
  display: inline-flex;
  padding: 8px 16px;
  border: 1px solid #F9EAEC;
  border-radius: 4px;
  align-self: flex-start;
}
.reviews__treatment-text {
  font-family: "Plus Jakarta Sans";
  font-weight: 300;
  font-size: 12px;
  color: #F9EAEC;
}
.reviews__read-more {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 16px;
  transition: all 250ms ease-in-out;
  width: fit-content;
  margin-left: auto;
}
.reviews__read-more:hover .reviews__read-more-icon {
  transform: translateX(2px);
}
.reviews__read-more-text {
  font-family: "Plus Jakarta Sans";
  font-size: 14px;
  font-weight: 300;
  color: #F9EAEC;
}
.reviews__read-more-icon {
  width: 28px;
  height: 28px;
  border: 1px solid white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
}
.reviews__read-more-icon svg {
  width: 12px;
  height: 12px;
  color: white;
}

.team .wrapper {
  padding-block: 140px;
}
@media only screen and (max-width: 899px) {
  .team .wrapper {
    padding-block: 80px;
  }
}
@media only screen and (max-width: 599px) {
  .team .wrapper {
    padding-block: 40px;
  }
}
.team__container {
  width: 100%;
}
.team__content {
  display: flex;
  flex-direction: column;
  gap: 64px;
}
.team__header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  gap: 32px;
}
@media only screen and (max-width: 599px) {
  .team__header {
    flex-direction: column;
  }
}
.team__title {
  font-family: "the-seasons";
  max-width: 480px;
  width: 100%;
  color: #550B0D;
}
@media only screen and (max-width: 899px) {
  .team__title {
    max-width: 356px;
  }
}
@media only screen and (max-width: 599px) {
  .team__title {
    max-width: 100%;
  }
}
.team__info {
  display: flex;
  flex-direction: column;
  gap: 40px;
  max-width: 488px;
  width: 100%;
}
@media only screen and (max-width: 899px) {
  .team__info {
    max-width: 340px;
  }
}
@media only screen and (max-width: 599px) {
  .team__info {
    max-width: 100%;
  }
}
.team__description {
  font-family: "Plus Jakarta Sans";
  color: hsl(26, 14%, 10%);
  font-weight: 300;
}
.team__description * {
  color: hsl(26, 14%, 10%);
  font-weight: 300;
}
.team__cta {
  padding: 12px 20px;
  border: 1px solid #640D0D;
  border-radius: 9999px;
  color: #640D0D;
  font-size: 14px;
  font-weight: 500;
  font-family: "Plus Jakarta Sans", sans-serif;
  background: transparent;
  cursor: pointer;
  transition: all 0.2s ease;
  align-self: flex-start;
}
.team__cta:hover {
  background: #640D0D;
  color: white;
}
.team__slider {
  cursor: grab;
}
.team__slider:active {
  cursor: grabbing;
}
.team__slider-container {
  display: flex;
  gap: 24px;
  width: max-content;
}
.team__member {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-width: 320px;
}
.team__member-image {
  width: 320px;
  height: 384px;
  border-radius: 12px;
  overflow: hidden;
}
.team__member-image-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.team__member-info {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.team__member-name {
  font-family: "the-seasons";
  font-size: 24px;
  color: hsl(26, 14%, 10%);
}
.team__member-role {
  font-family: "Plus Jakarta Sans";
  font-size: 16px;
  font-weight: 300;
  color: hsl(26, 14%, 10%);
}
.team__member {
  display: flex;
}
.team .team__member-button {
  justify-content: flex-start;
  padding-inline: 0;
}
.team__member-text {
  background: #551013;
  color: white;
  padding: 12px 20px;
  border-radius: 9999px;
  font-size: 14px;
  font-weight: 500;
  font-family: "Plus Jakarta Sans";
}
.team__member-icon {
  background: #551013;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 0;
}
.team__member-icon svg {
  width: 20px;
  height: 20px;
  color: white;
}
.team .team__member-small-desciption {
  font-family: "Plus Jakarta Sans";
  font-size: 16px;
  font-weight: 300;
  line-height: 28px;
  color: hsl(26, 14%, 10%);
  font-style: italic;
}
.team .team__member-small-desciption * {
  font-family: "Plus Jakarta Sans";
  font-size: 16px;
  font-weight: 300;
  line-height: 28px;
  color: hsl(26, 14%, 10%);
  font-style: italic;
}
.team .team__member-button {
  margin-top: 12px;
}

/**
 * Team Section Component
 */
.team-section {
  padding-block: 140px;
}
@media only screen and (max-width: 899px) {
  .team-section {
    padding-block: 80px;
  }
}
@media only screen and (max-width: 599px) {
  .team-section {
    padding-block: 40px;
  }
}
.team-section__container {
  width: 100%;
}
.team-section__header {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  width: 100%;
  gap: 2rem;
}
@media (min-width: 600px) {
  .team-section__header {
    flex-direction: row;
    gap: 4rem;
  }
}
.team-section__title-wrapper {
  max-width: 400px;
  width: 100%;
}
@media only screen and (max-width: 599px) {
  .team-section__title-wrapper {
    max-width: 100%;
  }
}
.team-section__title {
  color: #550B0D;
}
.team-section__info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 2.5rem;
  max-width: 488px;
  width: 100%;
}
@media only screen and (max-width: 899px) {
  .team-section__info {
    max-width: 340px;
  }
}
@media only screen and (max-width: 599px) {
  .team-section__info {
    max-width: 100%;
  }
}
.team-section__description {
  font-family: "Plus Jakarta Sans";
  font-size: 16px;
  font-weight: 300;
  line-height: 1.5;
  color: hsl(26, 14%, 10%);
}
.team-section__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  width: 100%;
  margin-top: 64px;
}
@media (min-width: 600px) {
  .team-section__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 900px) {
  .team-section__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (min-width: 1200px) {
  .team-section__grid {
    grid-template-columns: repeat(4, 1fr);
  }
}
.team-section__member {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  width: 100%;
  height: 100%;
}
.team-section__member-card {
  flex: 1;
  width: 100%;
  border-radius: 0.75rem;
  overflow: hidden;
  position: relative;
  height: 400px;
  cursor: pointer;
}
.team-section__member-card:hover .team-section__open-popup {
  opacity: 1;
  pointer-events: all;
}
.team-section__member-image-wrapper {
  position: relative;
  width: fit-content;
  height: 100%;
}
@media only screen and (max-width: 599px) {
  .team-section__member-image-wrapper {
    width: 100%;
  }
}
.team-section__open-popup {
  position: absolute;
  top: 24px;
  right: 24px;
  z-index: 1;
  opacity: 0;
  pointer-events: none;
  transition: all 0.3s ease;
}
.team-section__member-slider {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
  max-width: 320px;
}
@media only screen and (max-width: 899px) {
  .team-section__member-slider {
    max-width: 100%;
  }
}
.team-section__member-slider .keen-slider__slide {
  width: 100%;
  height: 400px;
  opacity: 0;
  transition: opacity 0.3s ease;
}
@media only screen and (max-width: 899px) {
  .team-section__member-slider .keen-slider__slide {
    max-width: 100% !important;
    min-width: 100% !important;
  }
}
.team-section__member-slider .keen-slider__slide.active {
  opacity: 1;
}
.team-section__member-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0.75rem;
  height: 400px;
}
.team-section__member-image--placeholder {
  background-color: #f3f4f6;
}
.team-section__member-dots {
  position: absolute;
  bottom: 1rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 0.5rem;
  z-index: 3;
}
.team-section__member-dot {
  width: 0.75rem;
  height: 0.75rem;
  background-color: rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.2s ease;
}
.team-section__member-dot--active {
  background-color: white;
  border-color: white;
}
.team-section__member-dot:hover {
  background-color: rgba(255, 255, 255, 0.8);
}
.team-section__member-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 0.5rem;
}
.team-section__member-name {
  font-family: "the-seasons";
  font-size: 24px;
  color: hsl(26, 14%, 10%);
}
.team-section__member-role {
  font-family: "Plus Jakarta Sans";
  font-size: 16px;
  font-weight: 300;
  color: hsl(26, 14%, 10%);
}
.team-section__member-modal {
  padding: 0;
  border: none;
  border-radius: 12px;
  max-width: 800px;
  max-height: 820px;
  width: 100%;
  height: 100%;
  padding: 40px 48px;
  background: white;
  overflow-y: auto;
}
@media only screen and (max-width: 899px) {
  .team-section__member-modal {
    padding: 24px;
    max-width: calc(100% - 32px);
  }
}
.team-section__member-modal::backdrop {
  background: rgba(0, 0, 0, 0.4);
}
.team-section__member-modal[open] {
  display: flex;
  animation: fadeIn 0.3s ease-in-out;
  position: fixed;
  z-index: 99;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
@media only screen and (max-width: 899px) {
  .team-section__member-modal[open] {
    left: 16px;
    right: 16px;
    transform: translateY(-50%);
  }
}
.team-section__modal-content {
  width: 100%;
  display: flex;
  flex-direction: column;
  height: 100%;
}
.team-section__modal-head {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  align-items: center;
  margin-bottom: 40px;
}
.team-section__modal-title {
  font-family: "the-seasons";
  color: hsl(26, 14%, 10%);
  margin: 0;
}
.team-section__modal-close {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s ease;
}
.team-section__modal-close:hover {
  transform: scale(1.03);
}
.team-section__modal-body {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: row;
  gap: 40px;
}
@media only screen and (max-width: 899px) {
  .team-section__modal-body {
    flex-direction: column;
  }
}
.team-section__modal-body-image {
  max-width: 234px;
  max-height: 400px;
  width: 100%;
  height: 100%;
}
@media only screen and (max-width: 899px) {
  .team-section__modal-body-image {
    max-width: 100%;
  }
}
.team-section__modal-body-image img {
  max-width: 234px;
  max-height: 400px;
  width: 100%;
  height: 100%;
  border-radius: 12px;
  object-fit: cover;
  object-position: center top;
}
@media only screen and (max-width: 899px) {
  .team-section__modal-body-image img {
    max-width: 100%;
  }
}
.team-section__modal-body-editor {
  font-family: "Plus Jakarta Sans";
  color: hsl(26, 14%, 10%);
  max-width: 429px;
  width: 100%;
}
@media only screen and (max-width: 899px) {
  .team-section__modal-body-editor {
    max-width: 100%;
  }
}
.team-section__modal-body-editor * {
  color: hsl(26, 14%, 10%);
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.treatments .wrapper {
  padding-block: 140px 200px;
}
@media only screen and (max-width: 1199px) {
  .treatments .wrapper {
    padding-block: 120px 180px;
  }
}
@media only screen and (max-width: 899px) {
  .treatments .wrapper {
    padding-block: 80px 40px;
  }
}
@media only screen and (max-width: 599px) {
  .treatments .wrapper {
    padding-block: 40px;
  }
}
.treatments__container {
  width: 100%;
}
@media only screen and (min-width: 1200px) {
  .treatments__container {
    padding-inline: 100px;
  }
}
.treatments__content {
  display: flex;
  flex-direction: column;
  gap: 80px;
}
@media (min-width: 600px) {
  .treatments__content {
    gap: 160px;
  }
}
@media (min-width: 900px) {
  .treatments__content {
    gap: 268px;
  }
}
.treatments__header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
  gap: 32px;
}
@media only screen and (max-width: 599px) {
  .treatments__header {
    flex-direction: column;
  }
}
.treatments__title {
  font-family: "the-seasons";
  max-width: 480px;
  width: 100%;
  color: #550B0D;
}
@media only screen and (max-width: 1199px) {
  .treatments__title {
    max-width: 400px;
  }
}
@media only screen and (max-width: 599px) {
  .treatments__title {
    max-width: 100%;
  }
}
.treatments__title-part--primary {
  color: #551013;
}
.treatments__title-part--secondary {
  color: #711111;
}
.treatments__description {
  font-family: "Plus Jakarta Sans";
  font-size: 16px;
  font-weight: 300;
  line-height: 1.5;
  color: hsl(26, 14%, 10%);
  max-width: 448px;
  width: 100%;
}
@media only screen and (max-width: 1199px) {
  .treatments__description {
    max-width: 400px;
  }
}
@media only screen and (max-width: 599px) {
  .treatments__description {
    max-width: 100%;
  }
}
.treatments__cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
}
.treatments__card {
  background: hsl(23, 94%, 88%);
  border-radius: 12px;
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.treatments__card-content {
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.treatments__card-header {
  display: flex;
  align-items: center;
  gap: 16px;
}
.treatments__card-title {
  font-family: "the-seasons";
  color: #2B1A08;
}
.treatments__card-description {
  font-family: "Plus Jakarta Sans";
  font-size: 16px;
  font-weight: 300;
  line-height: 1.5;
  color: hsl(26, 14%, 10%);
}
.treatments__card-cta {
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  transition: transform 0.2s ease;
  color: hsl(26, 14%, 10%);
}
.treatments__card-cta:hover .treatments__card-cta-icon {
  transform: translateX(2px);
}
.treatments__card-cta-text {
  font-family: "Plus Jakarta Sans";
  font-size: 16px;
  font-weight: 500;
  color: hsl(26, 14%, 10%);
}
.treatments__card-cta-icon {
  background: white;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 250ms ease-in-out;
}
.treatments__card-cta-icon svg {
  width: 12px;
  height: 12px;
  color: hsl(26, 14%, 10%);
}

body.home .treatments__cards {
  display: flex;
  flex-direction: row;
  gap: 32px;
}
@media only screen and (max-width: 599px) {
  body.home .treatments__cards {
    flex-direction: column;
  }
}
body.home .treatments__card:nth-child(n+3) {
  display: none;
}
body.home .treatments__content {
  display: flex;
  flex-direction: column;
  gap: 40px;
}
@media (min-width: 600px) {
  body.home .treatments__content {
    gap: 64px;
  }
}
@media (min-width: 900px) {
  body.home .treatments__content {
    gap: 88px;
  }
}

/* Desktop 1024px+ */
@media (min-width: 1024px) {
  .treatments__cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 32px;
  }
} /* Larger desktop 1200px+ */
@media (min-width: 1200px) {
  .treatments__cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 32px;
  }
}
/**
 * Treatment Categories Component
 */
.treatment-categories {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5rem;
  padding: 5rem 1.5rem;
  background-color: #fff4eb;
}
@media (min-width: 768px) {
  .treatment-categories {
    padding: 5rem 4rem;
  }
}
@media (min-width: 1024px) {
  .treatment-categories {
    padding: 7.5rem 12.5rem;
  }
}
.treatment-categories__container {
  width: 100%;
}
.treatment-categories__grid {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2rem;
  width: 100%;
}
.treatment-categories__row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  width: 100%;
}
@media (min-width: 768px) {
  .treatment-categories__row {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1024px) {
  .treatment-categories__row {
    grid-template-columns: repeat(3, 1fr);
  }
}
.treatment-categories__card {
  display: flex;
  padding: 2rem;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  flex: 1;
  gap: 2rem;
  background-color: #d6d3d1;
  border-radius: 0.75rem;
}
.treatment-categories__card-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2rem;
  width: 100%;
}
.treatment-categories__card-header {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.treatment-categories__card-icon {
  display: flex;
  padding: 0.75rem;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
  background-color: #6b7280;
  border-radius: 0.375rem;
}
.treatment-categories__card-icon svg {
  width: 2rem;
  height: 2rem;
}
.treatment-categories__card-title {
  color: #451a03;
  font-family: "The Seasons", "Crimson Text", serif;
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 2rem;
}
@media (min-width: 1024px) {
  .treatment-categories__card-title {
    font-size: 1.875rem;
  }
}
.treatment-categories__card-description {
  color: hsl(var(--de-antraciet));
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 1rem;
  font-weight: 300;
  line-height: 1.75rem;
  width: 100%;
}
.treatment-categories__card-cta {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  cursor: pointer;
}
.treatment-categories__card-cta-text {
  color: #451a03;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.5rem;
}
.treatment-categories__card-cta-icon {
  display: flex;
  width: 1.75rem;
  height: 1.75rem;
  justify-content: center;
  align-items: center;
  background-color: white;
  border-radius: 50%;
}
.treatment-categories__card-cta-icon svg {
  width: 0.75rem;
  height: 0.75rem;
}

/**
 * Treatment Detail Component
 */
.treatment-detail {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  background-color: #fff4eb;
}
.treatment-detail__container {
  width: 100%;
}
.treatment-detail__content {
  display: flex;
  padding: 5rem 1.5rem;
  justify-content: space-between;
  align-items: flex-start;
  width: 100%;
  gap: 2rem;
}
@media (min-width: 768px) {
  .treatment-detail__content {
    padding: 5rem 4rem;
  }
}
@media (min-width: 1024px) {
  .treatment-detail__content {
    padding: 9rem 6.5rem;
  }
}
@media (max-width: 1023px) {
  .treatment-detail__content {
    flex-direction: column;
  }
}
.treatment-detail__title-wrapper {
  width: 100%;
}
@media (min-width: 1024px) {
  .treatment-detail__title-wrapper {
    width: 30rem;
  }
}
.treatment-detail__title {
  color: #451a03;
  font-family: "The Seasons", "Crimson Text", serif;
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 1.5;
}
@media (min-width: 768px) {
  .treatment-detail__title {
    font-size: 1.875rem;
  }
}
@media (min-width: 1024px) {
  .treatment-detail__title {
    font-size: 2.25rem;
    line-height: 3.5rem;
  }
}
.treatment-detail__steps {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3rem;
}
.treatment-detail__step {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.5rem;
}
.treatment-detail__step-header {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 1rem;
}
@media (min-width: 1024px) {
  .treatment-detail__step-header {
    width: 30rem;
  }
}
.treatment-detail__step-icon {
  display: flex;
  width: 2.5rem;
  height: 2.5rem;
  justify-content: center;
  align-items: center;
}
.treatment-detail__step-icon svg {
  width: 2.5rem;
  height: 2.5rem;
}
.treatment-detail__step-title {
  color: #451a03;
  font-family: "The Seasons", "Crimson Text", serif;
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 2rem;
  flex: 1;
}
@media (min-width: 1024px) {
  .treatment-detail__step-title {
    font-size: 1.875rem;
  }
}
.treatment-detail__step-title--no-icon {
  width: 100%;
}
@media (min-width: 1024px) {
  .treatment-detail__step-title--no-icon {
    width: 30rem;
  }
}
.treatment-detail__step-content {
  display: flex;
  width: 100%;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 2.5rem;
}
@media (min-width: 1024px) {
  .treatment-detail__step-content {
    width: 30.5rem;
  }
}
.treatment-detail__step-description {
  width: 100%;
  color: hsl(var(--de-body-rood));
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 1rem;
  font-weight: 300;
  line-height: 1.75rem;
}
@media (min-width: 1024px) {
  .treatment-detail__step-description {
    width: 30.5rem;
  }
}

/**
 * Treatment Overview Component
 */
.treatment-overview {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2.5rem;
  padding: 5rem 1.5rem;
  background-color: #fff4eb;
}
@media (min-width: 768px) {
  .treatment-overview {
    padding: 5rem 5rem;
  }
}
@media (min-width: 1024px) {
  .treatment-overview {
    padding: 5rem 17.5rem;
  }
}
.treatment-overview__container {
  width: 100%;
}
.treatment-overview__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2.5rem;
  width: 100%;
}
.treatment-overview__title {
  text-align: center;
  color: hsl(var(--de-donker-rood));
  font-family: "The Seasons", "Crimson Text", serif;
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 1.5;
  width: 100%;
}
@media (min-width: 768px) {
  .treatment-overview__title {
    font-size: 1.875rem;
  }
}
@media (min-width: 1024px) {
  .treatment-overview__title {
    font-size: 2.25rem;
    line-height: 3.5rem;
  }
}
.treatment-overview__description {
  color: hsl(var(--de-body-rood));
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 1rem;
  font-weight: 300;
  line-height: 1.75rem;
  width: 100%;
}
.treatment-overview__image {
  width: 100%;
}
.treatment-overview__image-img {
  height: 30rem;
  width: 100%;
  border-radius: 0.5rem;
  object-fit: cover;
}

.footer {
  margin: 0 16px 16px 16px;
  padding-bottom: 16px;
}
.footer__background {
  background: hsl(358, 77%, 19%);
  border-radius: 16px;
}
.footer__wrapper {
  padding-block: 40px;
  min-height: 575px;
  display: flex;
  flex-direction: column;
}
@media (max-width: 1023px) and (min-width: 768px) {
  .footer__wrapper {
    padding-block: 40px 40px;
    min-height: 575px;
  }
}
@media (max-width: 767px) {
  .footer__wrapper {
    padding-block: 40px 25px;
    min-height: 575px;
  }
}
.footer__container {
  width: 100%;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.footer__content {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex: 1;
  min-height: 100%;
}
.footer__main {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 48px;
}
@media (min-width: 1024px) {
  .footer__main {
    flex-direction: row;
    gap: 104px;
  }
}
.footer__logo {
  width: 80px;
  height: 96px;
  position: relative;
  flex-shrink: 0;
}
.footer__logo-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.footer__links {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
}
@media (min-width: 900px) {
  .footer__links {
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
  }
}
@media (min-width: 1240px) {
  .footer__links {
    grid-template-columns: repeat(4, 1fr);
    gap: 32px;
  }
}
.footer__section {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.footer__section-title {
  font-family: "the-seasons";
  color: hsl(23, 90%, 96%);
}
.footer__section-links {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.footer__link {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 18px;
  color: hsl(23, 90%, 96%);
  text-decoration: none;
  transition: opacity 0.2s ease;
  font-weight: 500;
}
.footer__link:hover {
  opacity: 0.8;
}
.footer__link--external {
  display: flex;
  align-items: center;
  gap: 4px;
}
.footer__external-icon {
  width: 12px;
  height: 12px;
  color: #374151;
  opacity: 0.7;
  transform: rotate(45deg);
}
.footer__bottom {
  display: flex;
  flex-direction: column;
  gap: 40px;
  margin-top: 80px;
}
.footer__partners {
  display: flex;
  align-items: center;
  gap: 96px;
  opacity: 0.7;
}
.footer__partner {
  flex-shrink: 0;
}
.footer__partner-img {
  height: 36px;
  width: auto;
  object-fit: contain;
}
.footer__bottom-links {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  width: 100%;
}
@media (min-width: 1024px) {
  .footer__bottom-links {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
  }
}
.footer__copyright, .footer__bottom-link, .footer__credit {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 16px;
  color: hsl(23, 90%, 96%);
  opacity: 0.7;
  display: block;
  white-space: nowrap;
}
.footer__bottom-link {
  text-decoration: none;
  transition: opacity 0.2s ease;
}
.footer__bottom-link:hover {
  opacity: 1;
}
.footer .footer__section-text * {
  color: hsl(23, 90%, 96%);
}
.footer .footer__section-text a {
  text-decoration: underline;
  color: hsl(23, 90%, 96%);
  transition: opacity 0.2s ease;
}
.footer .footer__section-text a:hover {
  opacity: 0.8;
}
.footer .footer__section-text p {
  margin-bottom: 16px;
}
.footer span.footer__section-title {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 18px;
  color: hsl(23, 90%, 96%);
  text-decoration: none;
  transition: opacity 0.2s ease;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 12px;
  line-height: 1;
  cursor: pointer;
}
.footer .js-toggle-body {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.footer .js-toggle-body a {
  opacity: 0.8;
}

.image {
  width: calc(100vw + 64px);
  margin-left: -32px;
}
.image img {
  width: calc(100vw + 64px);
  max-height: 600px;
  object-fit: cover;
}

.teasers .wrapper {
  padding-block: 164px 140px;
}
@media only screen and (max-width: 599px) {
  .teasers .wrapper {
    padding-block: 120px 104px;
  }
}
.teasers .teasers__title {
  max-width: 540px;
  text-align: center;
  margin-inline: auto;
  margin-top: 64px;
}
@media only screen and (max-width: 1199px) {
  .teasers .teasers__title {
    margin-top: 48px;
  }
}
@media only screen and (max-width: 899px) {
  .teasers .teasers__title {
    margin-top: 40px;
  }
}
@media only screen and (max-width: 599px) {
  .teasers .teasers__title {
    margin-top: 32px;
    text-align: left;
    max-width: 100%;
  }
}
.teasers .teasers__grid {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  gap: 32px;
  margin-top: 104px;
  flex-wrap: wrap;
}
@media only screen and (max-width: 599px) {
  .teasers .teasers__grid {
    margin-top: 40px;
  }
}
.teasers .teasers__grid .teasers__item {
  max-width: calc(32.333% - 16px);
  background-color: hsl(23, 94%, 88%);
  border-radius: 12px;
  padding: 32px;
  display: flex;
  flex-direction: column;
}
@media only screen and (max-width: 1199px) {
  .teasers .teasers__grid .teasers__item {
    max-width: calc(50% - 16px);
  }
}
@media only screen and (max-width: 599px) {
  .teasers .teasers__grid .teasers__item {
    max-width: 100%;
  }
}
.teasers .teasers__grid .teasers__item-editor {
  margin-block: 32px;
}
.teasers .teasers__grid .teasers__item-link {
  margin-top: auto;
  display: flex;
  width: fit-content;
  flex-direction: row;
  gap: 8px;
  align-items: center;
  font-weight: 500;
  color: #2B1A08;
  text-decoration: none;
  transition: opacity 0.2s ease;
}
.teasers .teasers__grid .teasers__item-link svg {
  transition: transform 0.2s ease;
}
.teasers .teasers__grid .teasers__item-link:hover svg {
  transform: translateX(4px);
}

.text-image.top .wrapper {
  display: flex;
  flex-direction: column-reverse;
}
.text-image.bottom .wrapper {
  display: flex;
  flex-direction: column;
}
.text-image .text-image__container {
  padding-block: 140px;
}
@media only screen and (max-width: 899px) {
  .text-image .text-image__container {
    padding-block: 80px;
  }
}
@media only screen and (max-width: 599px) {
  .text-image .text-image__container {
    padding-block: 40px;
  }
}
.text-image .text-image__content {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  gap: 40px;
}
@media only screen and (max-width: 599px) {
  .text-image .text-image__content {
    flex-direction: column;
    gap: 32px;
  }
}
.text-image .text-image__left {
  max-width: 480px;
  width: 100%;
}
@media only screen and (max-width: 1199px) {
  .text-image .text-image__left {
    max-width: 400px;
  }
}
@media only screen and (max-width: 899px) {
  .text-image .text-image__left {
    max-width: 356px;
  }
}
@media only screen and (max-width: 599px) {
  .text-image .text-image__left {
    max-width: 100%;
  }
}
.text-image .text-image__right {
  max-width: 488px;
  width: 100%;
}
@media only screen and (max-width: 1199px) {
  .text-image .text-image__right {
    max-width: 400px;
  }
}
@media only screen and (max-width: 899px) {
  .text-image .text-image__right {
    max-width: 340px;
  }
}
@media only screen and (max-width: 599px) {
  .text-image .text-image__right {
    max-width: 100%;
  }
}
.text-image .text-image__button {
  margin-top: 40px;
  display: flex;
}
.text-image .text-image__description {
  color: hsl(26, 14%, 10%);
  font-weight: 300;
}
.text-image .text-image__description * {
  color: hsl(26, 14%, 10%);
  font-weight: 300;
}
.text-image__image-container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(100% + 64px);
  position: relative;
  animation: slideInDesktop 2000ms cubic-bezier(0.7, 0, 0.3, 1);
  animation-play-state: paused;
  margin-left: -32px;
}
.text-image__image {
  width: 100%;
  height: 480px;
  object-fit: cover;
}
@media (min-width: 900px) {
  .text-image__image {
    height: 560px;
  }
}
@media (min-width: 1200px) {
  .text-image__image {
    height: 600px;
  }
}
.text-image .text-image__image-container[loaded=true] {
  animation-play-state: running;
}

@keyframes slideInDesktop {
  0% {
    clip-path: inset(100px 190px);
    -webkit-clip-path: inset(100px 190px);
  }
  100% {
    clip-path: inset(0 0);
    -webkit-clip-path: inset(0 0);
  }
}
.usp .usp__container {
  padding-block: 140px;
  display: flex;
  flex-direction: row;
  gap: 40px;
  justify-content: space-between;
}
@media only screen and (max-width: 899px) {
  .usp .usp__container {
    padding-block: 80px;
  }
}
@media only screen and (max-width: 599px) {
  .usp .usp__container {
    padding-block: 40px;
    flex-direction: column;
  }
}
.usp .usp__text-container {
  max-width: 480px;
  width: 100%;
}
@media only screen and (min-width: 600px) {
  .usp .usp__text-container {
    position: sticky;
    top: 132px;
    align-self: flex-start;
  }
}
@media only screen and (max-width: 1199px) {
  .usp .usp__text-container {
    max-width: 400px;
  }
}
@media only screen and (max-width: 599px) {
  .usp .usp__text-container {
    max-width: 100%;
  }
}
.usp .usp__cards {
  max-width: 488px;
  width: 100%;
}
@media only screen and (max-width: 1199px) {
  .usp .usp__cards {
    max-width: 400px;
  }
}
@media only screen and (max-width: 899px) {
  .usp .usp__cards {
    max-width: 340px;
  }
}
@media only screen and (max-width: 599px) {
  .usp .usp__cards {
    max-width: 100%;
  }
}
.usp .usp__cards {
  display: flex;
  flex-direction: column;
  gap: 48px;
}
.usp .usp__card-title {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 16px;
}
.usp .usp__card-title svg {
  min-width: 40px;
  min-height: 40px;
}
.usp .usp__card-description {
  margin-top: 24px;
}
.usp .usp__card-content p,
.usp .usp__editor p {
  font-family: "Plus Jakarta Sans";
  font-weight: 300;
  color: #573C3C;
}

.testimonial .wrapper {
  padding-block: 164px 64px;
}
@media only screen and (max-width: 599px) {
  .testimonial .wrapper {
    padding-block: 120px 64px;
  }
}
.testimonial .testimonial-header__top {
  margin-top: 64px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  gap: 40px;
}
@media only screen and (max-width: 599px) {
  .testimonial .testimonial-header__top {
    flex-direction: column;
    margin-top: 40px;
  }
}
.testimonial .testimonial-header__title {
  max-width: 544px;
  width: 100%;
}
@media only screen and (max-width: 1199px) {
  .testimonial .testimonial-header__title {
    max-width: 400px;
  }
}
@media only screen and (max-width: 599px) {
  .testimonial .testimonial-header__title {
    max-width: 100%;
  }
}
.testimonial .testimonial-header__editor {
  max-width: 488px;
  width: 100%;
  margin-top: 20px;
}
.testimonial .testimonial-header__editor * {
  color: #573C3C;
  font-weight: 300s;
}
@media only screen and (max-width: 1199px) {
  .testimonial .testimonial-header__editor {
    max-width: 400px;
  }
}
@media only screen and (max-width: 899px) {
  .testimonial .testimonial-header__editor {
    max-width: 340px;
  }
}
@media only screen and (max-width: 599px) {
  .testimonial .testimonial-header__editor {
    max-width: 100%;
    margin-top: 0;
  }
}
.testimonial .testimonial-header {
  display: flex;
  flex-direction: column;
}
.testimonial .testimonial-beforeafter {
  display: flex;
  flex-direction: row;
  overflow: clip;
  margin-top: 104px;
}
@media only screen and (max-width: 899px) {
  .testimonial .testimonial-beforeafter {
    margin-top: 80px;
  }
}
@media only screen and (max-width: 599px) {
  .testimonial .testimonial-beforeafter {
    margin-top: 40px;
  }
}
.testimonial .testimonial-beforeafter__slide {
  display: flex;
  flex-direction: row;
  gap: 10px;
}
@media only screen and (max-width: 599px) {
  .testimonial .testimonial-beforeafter__slide {
    flex-direction: column;
  }
}
.testimonial .testimonial-beforeafter__slide .before-img,
.testimonial .testimonial-beforeafter__slide .after-img {
  max-width: calc(50% - 5px);
  width: 100%;
  position: relative;
}
@media only screen and (max-width: 599px) {
  .testimonial .testimonial-beforeafter__slide .before-img,
  .testimonial .testimonial-beforeafter__slide .after-img {
    max-width: 100%;
  }
}
.testimonial .testimonial-beforeafter__slide .before-img::before {
  position: absolute;
  content: "Voor";
  top: 24px;
  left: 24px;
  font-weight: 500;
  font-size: 20px;
  line-height: 24px;
  color: hsl(0, 0%, 100%);
  background-color: #550B0D;
  border-radius: 8px;
  padding: 12px 20px;
}
.testimonial .testimonial-beforeafter__slide .after-img::before {
  position: absolute;
  content: "Na";
  top: 24px;
  left: 24px;
  font-weight: 500;
  font-size: 20px;
  line-height: 24px;
  color: hsl(0, 0%, 100%);
  background-color: #550B0D;
  border-radius: 8px;
  padding: 12px 20px;
}
.testimonial .testimonial-beforeafter__slide img {
  object-fit: cover;
  width: 100%;
  height: 464px;
}
.testimonial .testimonial-beforeafter__actions {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 24px;
  justify-content: space-between;
  margin-top: 12px;
}
.testimonial .testimonial-beforeafter__actions .progress {
  font-family: "the-seasons";
  font-size: 28px;
  line-height: 32px;
  color: #550B0D;
}
.testimonial .testimonial-beforeafter__actions .navigation {
  display: flex;
  flex-direction: row;
  gap: 16px;
  justify-content: flex-end;
}
.testimonial .testimonial-beforeafter__actions .navigation > div {
  cursor: pointer;
}

.gallery {
  padding-top: 120px;
  padding-bottom: 120px;
}
@media (max-width: 1023px) {
  .gallery {
    padding-top: 80px;
    padding-bottom: 80px;
  }
}
@media (max-width: 767px) {
  .gallery {
    padding-top: 40px;
    padding-bottom: 40px;
  }
}

.gallery-header {
  display: flex;
  width: 100%;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 80px;
}
@media only screen and (max-width: 1199px) {
  .gallery-header {
    gap: 40px;
  }
}
@media only screen and (max-width: 899px) {
  .gallery-header {
    flex-direction: column;
    gap: 32px;
    align-items: flex-start;
  }
}

.gallery-header__title {
  max-width: 540px;
  width: 100%;
}
@media only screen and (max-width: 1199px) {
  .gallery-header__title {
    max-width: 400px;
  }
}
@media only screen and (max-width: 899px) {
  .gallery-header__title {
    max-width: 100%;
  }
}

.gallery-header__editor {
  max-width: 488px;
  width: 100%;
}
@media only screen and (max-width: 899px) {
  .gallery-header__editor {
    max-width: 100%;
  }
}

.gallery-items {
  margin-top: 80px;
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
}
@media only screen and (max-width: 1199px) {
  .gallery-items {
    margin-top: 80px;
  }
}
@media only screen and (max-width: 899px) {
  .gallery-items {
    margin-top: 40px;
    gap: 20px;
  }
}

.gallery-items .gallery-items__item {
  width: calc(33.3333% - 22px);
  height: auto;
  transition: all 300ms ease-in-out;
  cursor: pointer;
  border-radius: 12px;
}
@media only screen and (max-width: 899px) {
  .gallery-items .gallery-items__item {
    width: calc(50% - 12px);
  }
}
@media only screen and (max-width: 599px) {
  .gallery-items .gallery-items__item {
    width: 100%;
  }
}
.gallery-items .gallery-items__item img {
  width: 100%;
  height: 444px;
  object-fit: cover;
  border-radius: 12px;
}
.gallery-items .gallery-items__item:hover {
  opacity: 0.8;
}

.bp-wrap {
  z-index: 99999 !important;
}

.bp-html img {
  max-height: calc(100vh - 300px) !important;
}

.extra-blocks .wrapper {
  padding-top: 120px;
  padding-bottom: 120px;
}
@media (max-width: 1023px) {
  .extra-blocks .wrapper {
    padding-top: 80px;
    padding-bottom: 80px;
  }
}
@media (max-width: 767px) {
  .extra-blocks .wrapper {
    padding-top: 40px;
    padding-bottom: 40px;
  }
}
.extra-blocks .extra-blocks__head {
  display: flex;
  width: 100%;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 80px;
}
@media only screen and (max-width: 1199px) {
  .extra-blocks .extra-blocks__head {
    gap: 40px;
  }
}
@media only screen and (max-width: 899px) {
  .extra-blocks .extra-blocks__head {
    flex-direction: column;
    gap: 32px;
    align-items: flex-start;
  }
}
.extra-blocks .extra-blocks__head .extra-blocks__title {
  max-width: 540px;
  width: 100%;
}
@media only screen and (max-width: 1199px) {
  .extra-blocks .extra-blocks__head .extra-blocks__title {
    max-width: 400px;
  }
}
@media only screen and (max-width: 899px) {
  .extra-blocks .extra-blocks__head .extra-blocks__title {
    max-width: 100%;
  }
}
.extra-blocks .extra-blocks__head .extra-blocks__editor {
  max-width: 488px;
  width: 100%;
}
@media only screen and (max-width: 899px) {
  .extra-blocks .extra-blocks__head .extra-blocks__editor {
    max-width: 100%;
  }
}
.extra-blocks .extra-blocks__blocks {
  display: flex;
  flex-direction: row;
  gap: 32px;
  flex-wrap: wrap;
  width: 100%;
  margin-top: 80px;
}
@media only screen and (max-width: 899px) {
  .extra-blocks .extra-blocks__blocks {
    margin-top: 40px;
  }
}
.extra-blocks .extra-blocks__blocks .extra-block__block {
  max-width: calc(50% - 16px);
  width: 100%;
  padding: 32px;
  min-height: 444px;
  height: 100%;
  border-radius: 12px;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.extra-blocks .extra-blocks__blocks .extra-block__block::before {
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(209deg, rgba(0, 0, 0, 0) 20.99%, rgba(0, 0, 0, 0.56) 54.02%);
  border-radius: 12px;
  z-index: 0;
  pointer-events: none;
}
@media (max-width: 767px) {
  .extra-blocks .extra-blocks__blocks .extra-block__block {
    max-width: 100%;
  }
}
.extra-blocks .extra-blocks__blocks h3 {
  z-index: 1;
  position: relative;
  color: hsl(0, 0%, 100%);
  margin-bottom: 24px;
  font-weight: 700;
}
.extra-blocks .extra-blocks__blocks .extra-block__block-editor {
  z-index: 1;
  position: relative;
  margin-bottom: 32px;
}
.extra-blocks .extra-blocks__blocks .extra-block__block-editor a {
  text-decoration: underline;
  color: hsl(0, 0%, 100%);
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
}
.extra-blocks .extra-blocks__blocks .extra-block__block-editor * {
  color: hsl(0, 0%, 100%);
}
.extra-blocks .extra-blocks__blocks .extra-block__block-link {
  color: hsl(0, 0%, 100%);
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  transition: gap 250ms ease-in-out;
  font-weight: 500;
  z-index: 1;
  position: relative;
}
.extra-blocks .extra-blocks__blocks .extra-block__block-link:hover {
  gap: 14px;
}

/**
 * Utilities.
 */
/**
 * Color utility classes.
 *
 * Automatically generated color and background color utility classes based on every color definition in `settings/_color.scss`.
 * Loop through every `$key` and `$map` in the `$colors` variable map defined in `settings/_color.scss`.
 */
/**
 * `color` hsl(0, 0%, 0%)-100 color utility.
 */
.color-black-100 {
  color: hsl(0, 0%, 0%);
}

/**
 * `background-color` hsl(0, 0%, 0%)-100 color utility.
 */
.background-color-black-100 {
  background-color: hsl(0, 0%, 0%);
}

/**
 * `color` hsla(0, 0%, 0%, 0.9)-90 color utility.
 */
.color-black-90 {
  color: hsla(0, 0%, 0%, 0.9);
}

/**
 * `background-color` hsla(0, 0%, 0%, 0.9)-90 color utility.
 */
.background-color-black-90 {
  background-color: hsla(0, 0%, 0%, 0.9);
}

/**
 * `color` hsla(0, 0%, 0%, 0.8)-80 color utility.
 */
.color-black-80 {
  color: hsla(0, 0%, 0%, 0.8);
}

/**
 * `background-color` hsla(0, 0%, 0%, 0.8)-80 color utility.
 */
.background-color-black-80 {
  background-color: hsla(0, 0%, 0%, 0.8);
}

/**
 * `color` hsla(0, 0%, 0%, 0.7)-70 color utility.
 */
.color-black-70 {
  color: hsla(0, 0%, 0%, 0.7);
}

/**
 * `background-color` hsla(0, 0%, 0%, 0.7)-70 color utility.
 */
.background-color-black-70 {
  background-color: hsla(0, 0%, 0%, 0.7);
}

/**
 * `color` hsla(0, 0%, 0%, 0.6)-60 color utility.
 */
.color-black-60 {
  color: hsla(0, 0%, 0%, 0.6);
}

/**
 * `background-color` hsla(0, 0%, 0%, 0.6)-60 color utility.
 */
.background-color-black-60 {
  background-color: hsla(0, 0%, 0%, 0.6);
}

/**
 * `color` hsla(0, 0%, 0%, 0.5)-50 color utility.
 */
.color-black-50 {
  color: hsla(0, 0%, 0%, 0.5);
}

/**
 * `background-color` hsla(0, 0%, 0%, 0.5)-50 color utility.
 */
.background-color-black-50 {
  background-color: hsla(0, 0%, 0%, 0.5);
}

/**
 * `color` hsla(0, 0%, 0%, 0.4)-40 color utility.
 */
.color-black-40 {
  color: hsla(0, 0%, 0%, 0.4);
}

/**
 * `background-color` hsla(0, 0%, 0%, 0.4)-40 color utility.
 */
.background-color-black-40 {
  background-color: hsla(0, 0%, 0%, 0.4);
}

/**
 * `color` hsla(0, 0%, 0%, 0.3)-30 color utility.
 */
.color-black-30 {
  color: hsla(0, 0%, 0%, 0.3);
}

/**
 * `background-color` hsla(0, 0%, 0%, 0.3)-30 color utility.
 */
.background-color-black-30 {
  background-color: hsla(0, 0%, 0%, 0.3);
}

/**
 * `color` hsla(0, 0%, 0%, 0.2)-20 color utility.
 */
.color-black-20 {
  color: hsla(0, 0%, 0%, 0.2);
}

/**
 * `background-color` hsla(0, 0%, 0%, 0.2)-20 color utility.
 */
.background-color-black-20 {
  background-color: hsla(0, 0%, 0%, 0.2);
}

/**
 * `color` hsla(0, 0%, 0%, 0.1)-10 color utility.
 */
.color-black-10 {
  color: hsla(0, 0%, 0%, 0.1);
}

/**
 * `background-color` hsla(0, 0%, 0%, 0.1)-10 color utility.
 */
.background-color-black-10 {
  background-color: hsla(0, 0%, 0%, 0.1);
}

/**
 * `color` hsl(26, 14%, 10%)-100 color utility.
 */
.color-black-de-100 {
  color: hsl(26, 14%, 10%);
}

/**
 * `background-color` hsl(26, 14%, 10%)-100 color utility.
 */
.background-color-black-de-100 {
  background-color: hsl(26, 14%, 10%);
}

/**
 * `color` hsla(26, 14%, 10%, 0.9)-90 color utility.
 */
.color-black-de-90 {
  color: hsla(26, 14%, 10%, 0.9);
}

/**
 * `background-color` hsla(26, 14%, 10%, 0.9)-90 color utility.
 */
.background-color-black-de-90 {
  background-color: hsla(26, 14%, 10%, 0.9);
}

/**
 * `color` hsla(26, 14%, 10%, 0.8)-80 color utility.
 */
.color-black-de-80 {
  color: hsla(26, 14%, 10%, 0.8);
}

/**
 * `background-color` hsla(26, 14%, 10%, 0.8)-80 color utility.
 */
.background-color-black-de-80 {
  background-color: hsla(26, 14%, 10%, 0.8);
}

/**
 * `color` hsla(26, 14%, 10%, 0.7)-70 color utility.
 */
.color-black-de-70 {
  color: hsla(26, 14%, 10%, 0.7);
}

/**
 * `background-color` hsla(26, 14%, 10%, 0.7)-70 color utility.
 */
.background-color-black-de-70 {
  background-color: hsla(26, 14%, 10%, 0.7);
}

/**
 * `color` hsla(26, 14%, 10%, 0.6)-60 color utility.
 */
.color-black-de-60 {
  color: hsla(26, 14%, 10%, 0.6);
}

/**
 * `background-color` hsla(26, 14%, 10%, 0.6)-60 color utility.
 */
.background-color-black-de-60 {
  background-color: hsla(26, 14%, 10%, 0.6);
}

/**
 * `color` hsla(26, 14%, 10%, 0.5)-50 color utility.
 */
.color-black-de-50 {
  color: hsla(26, 14%, 10%, 0.5);
}

/**
 * `background-color` hsla(26, 14%, 10%, 0.5)-50 color utility.
 */
.background-color-black-de-50 {
  background-color: hsla(26, 14%, 10%, 0.5);
}

/**
 * `color` hsla(26, 14%, 10%, 0.4)-40 color utility.
 */
.color-black-de-40 {
  color: hsla(26, 14%, 10%, 0.4);
}

/**
 * `background-color` hsla(26, 14%, 10%, 0.4)-40 color utility.
 */
.background-color-black-de-40 {
  background-color: hsla(26, 14%, 10%, 0.4);
}

/**
 * `color` hsla(26, 14%, 10%, 0.3)-30 color utility.
 */
.color-black-de-30 {
  color: hsla(26, 14%, 10%, 0.3);
}

/**
 * `background-color` hsla(26, 14%, 10%, 0.3)-30 color utility.
 */
.background-color-black-de-30 {
  background-color: hsla(26, 14%, 10%, 0.3);
}

/**
 * `color` hsla(26, 14%, 10%, 0.2)-20 color utility.
 */
.color-black-de-20 {
  color: hsla(26, 14%, 10%, 0.2);
}

/**
 * `background-color` hsla(26, 14%, 10%, 0.2)-20 color utility.
 */
.background-color-black-de-20 {
  background-color: hsla(26, 14%, 10%, 0.2);
}

/**
 * `color` hsla(26, 14%, 10%, 0.1)-10 color utility.
 */
.color-black-de-10 {
  color: hsla(26, 14%, 10%, 0.1);
}

/**
 * `background-color` hsla(26, 14%, 10%, 0.1)-10 color utility.
 */
.background-color-black-de-10 {
  background-color: hsla(26, 14%, 10%, 0.1);
}

/**
 * `color` hsl(0, 0%, 100%)-100 color utility.
 */
.color-white-100 {
  color: hsl(0, 0%, 100%);
}

/**
 * `background-color` hsl(0, 0%, 100%)-100 color utility.
 */
.background-color-white-100 {
  background-color: hsl(0, 0%, 100%);
}

/**
 * `color` hsla(0, 0%, 100%, 0.9)-90 color utility.
 */
.color-white-90 {
  color: hsla(0, 0%, 100%, 0.9);
}

/**
 * `background-color` hsla(0, 0%, 100%, 0.9)-90 color utility.
 */
.background-color-white-90 {
  background-color: hsla(0, 0%, 100%, 0.9);
}

/**
 * `color` hsla(0, 0%, 100%, 0.8)-80 color utility.
 */
.color-white-80 {
  color: hsla(0, 0%, 100%, 0.8);
}

/**
 * `background-color` hsla(0, 0%, 100%, 0.8)-80 color utility.
 */
.background-color-white-80 {
  background-color: hsla(0, 0%, 100%, 0.8);
}

/**
 * `color` hsla(0, 0%, 100%, 0.7)-70 color utility.
 */
.color-white-70 {
  color: hsla(0, 0%, 100%, 0.7);
}

/**
 * `background-color` hsla(0, 0%, 100%, 0.7)-70 color utility.
 */
.background-color-white-70 {
  background-color: hsla(0, 0%, 100%, 0.7);
}

/**
 * `color` hsla(0, 0%, 100%, 0.6)-60 color utility.
 */
.color-white-60 {
  color: hsla(0, 0%, 100%, 0.6);
}

/**
 * `background-color` hsla(0, 0%, 100%, 0.6)-60 color utility.
 */
.background-color-white-60 {
  background-color: hsla(0, 0%, 100%, 0.6);
}

/**
 * `color` hsla(0, 0%, 100%, 0.5)-50 color utility.
 */
.color-white-50 {
  color: hsla(0, 0%, 100%, 0.5);
}

/**
 * `background-color` hsla(0, 0%, 100%, 0.5)-50 color utility.
 */
.background-color-white-50 {
  background-color: hsla(0, 0%, 100%, 0.5);
}

/**
 * `color` hsla(0, 0%, 100%, 0.4)-40 color utility.
 */
.color-white-40 {
  color: hsla(0, 0%, 100%, 0.4);
}

/**
 * `background-color` hsla(0, 0%, 100%, 0.4)-40 color utility.
 */
.background-color-white-40 {
  background-color: hsla(0, 0%, 100%, 0.4);
}

/**
 * `color` hsla(0, 0%, 100%, 0.32)-32 color utility.
 */
.color-white-32 {
  color: hsla(0, 0%, 100%, 0.32);
}

/**
 * `background-color` hsla(0, 0%, 100%, 0.32)-32 color utility.
 */
.background-color-white-32 {
  background-color: hsla(0, 0%, 100%, 0.32);
}

/**
 * `color` hsla(0, 0%, 100%, 0.3)-30 color utility.
 */
.color-white-30 {
  color: hsla(0, 0%, 100%, 0.3);
}

/**
 * `background-color` hsla(0, 0%, 100%, 0.3)-30 color utility.
 */
.background-color-white-30 {
  background-color: hsla(0, 0%, 100%, 0.3);
}

/**
 * `color` hsla(0, 0%, 100%, 0.24)-24 color utility.
 */
.color-white-24 {
  color: hsla(0, 0%, 100%, 0.24);
}

/**
 * `background-color` hsla(0, 0%, 100%, 0.24)-24 color utility.
 */
.background-color-white-24 {
  background-color: hsla(0, 0%, 100%, 0.24);
}

/**
 * `color` hsla(0, 0%, 100%, 0.2)-20 color utility.
 */
.color-white-20 {
  color: hsla(0, 0%, 100%, 0.2);
}

/**
 * `background-color` hsla(0, 0%, 100%, 0.2)-20 color utility.
 */
.background-color-white-20 {
  background-color: hsla(0, 0%, 100%, 0.2);
}

/**
 * `color` hsla(0, 0%, 100%, 0.1)-10 color utility.
 */
.color-white-10 {
  color: hsla(0, 0%, 100%, 0.1);
}

/**
 * `background-color` hsla(0, 0%, 100%, 0.1)-10 color utility.
 */
.background-color-white-10 {
  background-color: hsla(0, 0%, 100%, 0.1);
}

/**
 * `color` hsl(0, 100%, 50%)-100 color utility.
 */
.color-red-100 {
  color: hsl(0, 100%, 50%);
}

/**
 * `background-color` hsl(0, 100%, 50%)-100 color utility.
 */
.background-color-red-100 {
  background-color: hsl(0, 100%, 50%);
}

/**
 * `color` hsla(0, 100%, 50%, 0.9)-90 color utility.
 */
.color-red-90 {
  color: hsla(0, 100%, 50%, 0.9);
}

/**
 * `background-color` hsla(0, 100%, 50%, 0.9)-90 color utility.
 */
.background-color-red-90 {
  background-color: hsla(0, 100%, 50%, 0.9);
}

/**
 * `color` hsla(0, 100%, 50%, 0.8)-80 color utility.
 */
.color-red-80 {
  color: hsla(0, 100%, 50%, 0.8);
}

/**
 * `background-color` hsla(0, 100%, 50%, 0.8)-80 color utility.
 */
.background-color-red-80 {
  background-color: hsla(0, 100%, 50%, 0.8);
}

/**
 * `color` hsla(0, 100%, 50%, 0.7)-70 color utility.
 */
.color-red-70 {
  color: hsla(0, 100%, 50%, 0.7);
}

/**
 * `background-color` hsla(0, 100%, 50%, 0.7)-70 color utility.
 */
.background-color-red-70 {
  background-color: hsla(0, 100%, 50%, 0.7);
}

/**
 * `color` hsla(0, 100%, 50%, 0.6)-60 color utility.
 */
.color-red-60 {
  color: hsla(0, 100%, 50%, 0.6);
}

/**
 * `background-color` hsla(0, 100%, 50%, 0.6)-60 color utility.
 */
.background-color-red-60 {
  background-color: hsla(0, 100%, 50%, 0.6);
}

/**
 * `color` hsla(0, 100%, 50%, 0.5)-50 color utility.
 */
.color-red-50 {
  color: hsla(0, 100%, 50%, 0.5);
}

/**
 * `background-color` hsla(0, 100%, 50%, 0.5)-50 color utility.
 */
.background-color-red-50 {
  background-color: hsla(0, 100%, 50%, 0.5);
}

/**
 * `color` hsla(0, 100%, 50%, 0.4)-40 color utility.
 */
.color-red-40 {
  color: hsla(0, 100%, 50%, 0.4);
}

/**
 * `background-color` hsla(0, 100%, 50%, 0.4)-40 color utility.
 */
.background-color-red-40 {
  background-color: hsla(0, 100%, 50%, 0.4);
}

/**
 * `color` hsla(0, 100%, 50%, 0.3)-30 color utility.
 */
.color-red-30 {
  color: hsla(0, 100%, 50%, 0.3);
}

/**
 * `background-color` hsla(0, 100%, 50%, 0.3)-30 color utility.
 */
.background-color-red-30 {
  background-color: hsla(0, 100%, 50%, 0.3);
}

/**
 * `color` hsla(0, 100%, 50%, 0.2)-20 color utility.
 */
.color-red-20 {
  color: hsla(0, 100%, 50%, 0.2);
}

/**
 * `background-color` hsla(0, 100%, 50%, 0.2)-20 color utility.
 */
.background-color-red-20 {
  background-color: hsla(0, 100%, 50%, 0.2);
}

/**
 * `color` hsla(0, 100%, 50%, 0.1)-10 color utility.
 */
.color-red-10 {
  color: hsla(0, 100%, 50%, 0.1);
}

/**
 * `background-color` hsla(0, 100%, 50%, 0.1)-10 color utility.
 */
.background-color-red-10 {
  background-color: hsla(0, 100%, 50%, 0.1);
}

/**
 * `color` hsl(358, 77%, 19%)-100 color utility.
 */
.color-red-bordeaux-100 {
  color: hsl(358, 77%, 19%);
}

/**
 * `background-color` hsl(358, 77%, 19%)-100 color utility.
 */
.background-color-red-bordeaux-100 {
  background-color: hsl(358, 77%, 19%);
}

/**
 * `color` hsla(358, 77%, 19%, 0.9)-90 color utility.
 */
.color-red-bordeaux-90 {
  color: hsla(358, 77%, 19%, 0.9);
}

/**
 * `background-color` hsla(358, 77%, 19%, 0.9)-90 color utility.
 */
.background-color-red-bordeaux-90 {
  background-color: hsla(358, 77%, 19%, 0.9);
}

/**
 * `color` hsla(358, 77%, 19%, 0.8)-80 color utility.
 */
.color-red-bordeaux-80 {
  color: hsla(358, 77%, 19%, 0.8);
}

/**
 * `background-color` hsla(358, 77%, 19%, 0.8)-80 color utility.
 */
.background-color-red-bordeaux-80 {
  background-color: hsla(358, 77%, 19%, 0.8);
}

/**
 * `color` hsla(358, 77%, 19%, 0.7)-70 color utility.
 */
.color-red-bordeaux-70 {
  color: hsla(358, 77%, 19%, 0.7);
}

/**
 * `background-color` hsla(358, 77%, 19%, 0.7)-70 color utility.
 */
.background-color-red-bordeaux-70 {
  background-color: hsla(358, 77%, 19%, 0.7);
}

/**
 * `color` hsla(358, 77%, 19%, 0.6)-60 color utility.
 */
.color-red-bordeaux-60 {
  color: hsla(358, 77%, 19%, 0.6);
}

/**
 * `background-color` hsla(358, 77%, 19%, 0.6)-60 color utility.
 */
.background-color-red-bordeaux-60 {
  background-color: hsla(358, 77%, 19%, 0.6);
}

/**
 * `color` hsla(358, 77%, 19%, 0.5)-50 color utility.
 */
.color-red-bordeaux-50 {
  color: hsla(358, 77%, 19%, 0.5);
}

/**
 * `background-color` hsla(358, 77%, 19%, 0.5)-50 color utility.
 */
.background-color-red-bordeaux-50 {
  background-color: hsla(358, 77%, 19%, 0.5);
}

/**
 * `color` hsla(358, 77%, 19%, 0.4)-40 color utility.
 */
.color-red-bordeaux-40 {
  color: hsla(358, 77%, 19%, 0.4);
}

/**
 * `background-color` hsla(358, 77%, 19%, 0.4)-40 color utility.
 */
.background-color-red-bordeaux-40 {
  background-color: hsla(358, 77%, 19%, 0.4);
}

/**
 * `color` hsla(358, 77%, 19%, 0.3)-30 color utility.
 */
.color-red-bordeaux-30 {
  color: hsla(358, 77%, 19%, 0.3);
}

/**
 * `background-color` hsla(358, 77%, 19%, 0.3)-30 color utility.
 */
.background-color-red-bordeaux-30 {
  background-color: hsla(358, 77%, 19%, 0.3);
}

/**
 * `color` hsla(358, 77%, 19%, 0.2)-20 color utility.
 */
.color-red-bordeaux-20 {
  color: hsla(358, 77%, 19%, 0.2);
}

/**
 * `background-color` hsla(358, 77%, 19%, 0.2)-20 color utility.
 */
.background-color-red-bordeaux-20 {
  background-color: hsla(358, 77%, 19%, 0.2);
}

/**
 * `color` hsla(358, 77%, 19%, 0.1)-10 color utility.
 */
.color-red-bordeaux-10 {
  color: hsla(358, 77%, 19%, 0.1);
}

/**
 * `background-color` hsla(358, 77%, 19%, 0.1)-10 color utility.
 */
.background-color-red-bordeaux-10 {
  background-color: hsla(358, 77%, 19%, 0.1);
}

/**
 * `color` hsl(357, 68%, 20%)-100 color utility.
 */
.color-red-dark-100 {
  color: hsl(357, 68%, 20%);
}

/**
 * `background-color` hsl(357, 68%, 20%)-100 color utility.
 */
.background-color-red-dark-100 {
  background-color: hsl(357, 68%, 20%);
}

/**
 * `color` hsla(357, 68%, 20%, 0.9)-90 color utility.
 */
.color-red-dark-90 {
  color: hsla(357, 68%, 20%, 0.9);
}

/**
 * `background-color` hsla(357, 68%, 20%, 0.9)-90 color utility.
 */
.background-color-red-dark-90 {
  background-color: hsla(357, 68%, 20%, 0.9);
}

/**
 * `color` hsla(357, 68%, 20%, 0.8)-80 color utility.
 */
.color-red-dark-80 {
  color: hsla(357, 68%, 20%, 0.8);
}

/**
 * `background-color` hsla(357, 68%, 20%, 0.8)-80 color utility.
 */
.background-color-red-dark-80 {
  background-color: hsla(357, 68%, 20%, 0.8);
}

/**
 * `color` hsla(357, 68%, 20%, 0.7)-70 color utility.
 */
.color-red-dark-70 {
  color: hsla(357, 68%, 20%, 0.7);
}

/**
 * `background-color` hsla(357, 68%, 20%, 0.7)-70 color utility.
 */
.background-color-red-dark-70 {
  background-color: hsla(357, 68%, 20%, 0.7);
}

/**
 * `color` hsla(357, 68%, 20%, 0.6)-60 color utility.
 */
.color-red-dark-60 {
  color: hsla(357, 68%, 20%, 0.6);
}

/**
 * `background-color` hsla(357, 68%, 20%, 0.6)-60 color utility.
 */
.background-color-red-dark-60 {
  background-color: hsla(357, 68%, 20%, 0.6);
}

/**
 * `color` hsla(357, 68%, 20%, 0.5)-50 color utility.
 */
.color-red-dark-50 {
  color: hsla(357, 68%, 20%, 0.5);
}

/**
 * `background-color` hsla(357, 68%, 20%, 0.5)-50 color utility.
 */
.background-color-red-dark-50 {
  background-color: hsla(357, 68%, 20%, 0.5);
}

/**
 * `color` hsla(357, 68%, 20%, 0.4)-40 color utility.
 */
.color-red-dark-40 {
  color: hsla(357, 68%, 20%, 0.4);
}

/**
 * `background-color` hsla(357, 68%, 20%, 0.4)-40 color utility.
 */
.background-color-red-dark-40 {
  background-color: hsla(357, 68%, 20%, 0.4);
}

/**
 * `color` hsla(357, 68%, 20%, 0.3)-30 color utility.
 */
.color-red-dark-30 {
  color: hsla(357, 68%, 20%, 0.3);
}

/**
 * `background-color` hsla(357, 68%, 20%, 0.3)-30 color utility.
 */
.background-color-red-dark-30 {
  background-color: hsla(357, 68%, 20%, 0.3);
}

/**
 * `color` hsla(357, 68%, 20%, 0.2)-20 color utility.
 */
.color-red-dark-20 {
  color: hsla(357, 68%, 20%, 0.2);
}

/**
 * `background-color` hsla(357, 68%, 20%, 0.2)-20 color utility.
 */
.background-color-red-dark-20 {
  background-color: hsla(357, 68%, 20%, 0.2);
}

/**
 * `color` hsla(357, 68%, 20%, 0.1)-10 color utility.
 */
.color-red-dark-10 {
  color: hsla(357, 68%, 20%, 0.1);
}

/**
 * `background-color` hsla(357, 68%, 20%, 0.1)-10 color utility.
 */
.background-color-red-dark-10 {
  background-color: hsla(357, 68%, 20%, 0.1);
}

/**
 * `color` hsl(0, 18%, 29%)-100 color utility.
 */
.color-red-body-100 {
  color: hsl(0, 18%, 29%);
}

/**
 * `background-color` hsl(0, 18%, 29%)-100 color utility.
 */
.background-color-red-body-100 {
  background-color: hsl(0, 18%, 29%);
}

/**
 * `color` hsla(0, 18%, 29%, 0.9)-90 color utility.
 */
.color-red-body-90 {
  color: hsla(0, 18%, 29%, 0.9);
}

/**
 * `background-color` hsla(0, 18%, 29%, 0.9)-90 color utility.
 */
.background-color-red-body-90 {
  background-color: hsla(0, 18%, 29%, 0.9);
}

/**
 * `color` hsla(0, 18%, 29%, 0.8)-80 color utility.
 */
.color-red-body-80 {
  color: hsla(0, 18%, 29%, 0.8);
}

/**
 * `background-color` hsla(0, 18%, 29%, 0.8)-80 color utility.
 */
.background-color-red-body-80 {
  background-color: hsla(0, 18%, 29%, 0.8);
}

/**
 * `color` hsla(0, 18%, 29%, 0.7)-70 color utility.
 */
.color-red-body-70 {
  color: hsla(0, 18%, 29%, 0.7);
}

/**
 * `background-color` hsla(0, 18%, 29%, 0.7)-70 color utility.
 */
.background-color-red-body-70 {
  background-color: hsla(0, 18%, 29%, 0.7);
}

/**
 * `color` hsla(0, 18%, 29%, 0.6)-60 color utility.
 */
.color-red-body-60 {
  color: hsla(0, 18%, 29%, 0.6);
}

/**
 * `background-color` hsla(0, 18%, 29%, 0.6)-60 color utility.
 */
.background-color-red-body-60 {
  background-color: hsla(0, 18%, 29%, 0.6);
}

/**
 * `color` hsla(0, 18%, 29%, 0.5)-50 color utility.
 */
.color-red-body-50 {
  color: hsla(0, 18%, 29%, 0.5);
}

/**
 * `background-color` hsla(0, 18%, 29%, 0.5)-50 color utility.
 */
.background-color-red-body-50 {
  background-color: hsla(0, 18%, 29%, 0.5);
}

/**
 * `color` hsla(0, 18%, 29%, 0.4)-40 color utility.
 */
.color-red-body-40 {
  color: hsla(0, 18%, 29%, 0.4);
}

/**
 * `background-color` hsla(0, 18%, 29%, 0.4)-40 color utility.
 */
.background-color-red-body-40 {
  background-color: hsla(0, 18%, 29%, 0.4);
}

/**
 * `color` hsla(0, 18%, 29%, 0.3)-30 color utility.
 */
.color-red-body-30 {
  color: hsla(0, 18%, 29%, 0.3);
}

/**
 * `background-color` hsla(0, 18%, 29%, 0.3)-30 color utility.
 */
.background-color-red-body-30 {
  background-color: hsla(0, 18%, 29%, 0.3);
}

/**
 * `color` hsla(0, 18%, 29%, 0.2)-20 color utility.
 */
.color-red-body-20 {
  color: hsla(0, 18%, 29%, 0.2);
}

/**
 * `background-color` hsla(0, 18%, 29%, 0.2)-20 color utility.
 */
.background-color-red-body-20 {
  background-color: hsla(0, 18%, 29%, 0.2);
}

/**
 * `color` hsla(0, 18%, 29%, 0.1)-10 color utility.
 */
.color-red-body-10 {
  color: hsla(0, 18%, 29%, 0.1);
}

/**
 * `background-color` hsla(0, 18%, 29%, 0.1)-10 color utility.
 */
.background-color-red-body-10 {
  background-color: hsla(0, 18%, 29%, 0.1);
}

/**
 * `color` hsl(0, 77%, 22%)-100 color utility.
 */
.color-red-nav-100 {
  color: hsl(0, 77%, 22%);
}

/**
 * `background-color` hsl(0, 77%, 22%)-100 color utility.
 */
.background-color-red-nav-100 {
  background-color: hsl(0, 77%, 22%);
}

/**
 * `color` hsla(0, 77%, 22%, 0.9)-90 color utility.
 */
.color-red-nav-90 {
  color: hsla(0, 77%, 22%, 0.9);
}

/**
 * `background-color` hsla(0, 77%, 22%, 0.9)-90 color utility.
 */
.background-color-red-nav-90 {
  background-color: hsla(0, 77%, 22%, 0.9);
}

/**
 * `color` hsla(0, 77%, 22%, 0.8)-80 color utility.
 */
.color-red-nav-80 {
  color: hsla(0, 77%, 22%, 0.8);
}

/**
 * `background-color` hsla(0, 77%, 22%, 0.8)-80 color utility.
 */
.background-color-red-nav-80 {
  background-color: hsla(0, 77%, 22%, 0.8);
}

/**
 * `color` hsla(0, 77%, 22%, 0.7)-70 color utility.
 */
.color-red-nav-70 {
  color: hsla(0, 77%, 22%, 0.7);
}

/**
 * `background-color` hsla(0, 77%, 22%, 0.7)-70 color utility.
 */
.background-color-red-nav-70 {
  background-color: hsla(0, 77%, 22%, 0.7);
}

/**
 * `color` hsla(0, 77%, 22%, 0.6)-60 color utility.
 */
.color-red-nav-60 {
  color: hsla(0, 77%, 22%, 0.6);
}

/**
 * `background-color` hsla(0, 77%, 22%, 0.6)-60 color utility.
 */
.background-color-red-nav-60 {
  background-color: hsla(0, 77%, 22%, 0.6);
}

/**
 * `color` hsla(0, 77%, 22%, 0.5)-50 color utility.
 */
.color-red-nav-50 {
  color: hsla(0, 77%, 22%, 0.5);
}

/**
 * `background-color` hsla(0, 77%, 22%, 0.5)-50 color utility.
 */
.background-color-red-nav-50 {
  background-color: hsla(0, 77%, 22%, 0.5);
}

/**
 * `color` hsla(0, 77%, 22%, 0.4)-40 color utility.
 */
.color-red-nav-40 {
  color: hsla(0, 77%, 22%, 0.4);
}

/**
 * `background-color` hsla(0, 77%, 22%, 0.4)-40 color utility.
 */
.background-color-red-nav-40 {
  background-color: hsla(0, 77%, 22%, 0.4);
}

/**
 * `color` hsla(0, 77%, 22%, 0.3)-30 color utility.
 */
.color-red-nav-30 {
  color: hsla(0, 77%, 22%, 0.3);
}

/**
 * `background-color` hsla(0, 77%, 22%, 0.3)-30 color utility.
 */
.background-color-red-nav-30 {
  background-color: hsla(0, 77%, 22%, 0.3);
}

/**
 * `color` hsla(0, 77%, 22%, 0.2)-20 color utility.
 */
.color-red-nav-20 {
  color: hsla(0, 77%, 22%, 0.2);
}

/**
 * `background-color` hsla(0, 77%, 22%, 0.2)-20 color utility.
 */
.background-color-red-nav-20 {
  background-color: hsla(0, 77%, 22%, 0.2);
}

/**
 * `color` hsla(0, 77%, 22%, 0.1)-10 color utility.
 */
.color-red-nav-10 {
  color: hsla(0, 77%, 22%, 0.1);
}

/**
 * `background-color` hsla(0, 77%, 22%, 0.1)-10 color utility.
 */
.background-color-red-nav-10 {
  background-color: hsla(0, 77%, 22%, 0.1);
}

/**
 * `color` hsl(218, 30%, 93%)-100 color utility.
 */
.color-blue-100 {
  color: hsl(218, 30%, 93%);
}

/**
 * `background-color` hsl(218, 30%, 93%)-100 color utility.
 */
.background-color-blue-100 {
  background-color: hsl(218, 30%, 93%);
}

/**
 * `color` hsla(218, 30%, 93%, 0.9)-90 color utility.
 */
.color-blue-90 {
  color: hsla(218, 30%, 93%, 0.9);
}

/**
 * `background-color` hsla(218, 30%, 93%, 0.9)-90 color utility.
 */
.background-color-blue-90 {
  background-color: hsla(218, 30%, 93%, 0.9);
}

/**
 * `color` hsla(218, 30%, 93%, 0.8)-80 color utility.
 */
.color-blue-80 {
  color: hsla(218, 30%, 93%, 0.8);
}

/**
 * `background-color` hsla(218, 30%, 93%, 0.8)-80 color utility.
 */
.background-color-blue-80 {
  background-color: hsla(218, 30%, 93%, 0.8);
}

/**
 * `color` hsla(218, 30%, 93%, 0.7)-70 color utility.
 */
.color-blue-70 {
  color: hsla(218, 30%, 93%, 0.7);
}

/**
 * `background-color` hsla(218, 30%, 93%, 0.7)-70 color utility.
 */
.background-color-blue-70 {
  background-color: hsla(218, 30%, 93%, 0.7);
}

/**
 * `color` hsla(218, 30%, 93%, 0.6)-60 color utility.
 */
.color-blue-60 {
  color: hsla(218, 30%, 93%, 0.6);
}

/**
 * `background-color` hsla(218, 30%, 93%, 0.6)-60 color utility.
 */
.background-color-blue-60 {
  background-color: hsla(218, 30%, 93%, 0.6);
}

/**
 * `color` hsla(218, 30%, 93%, 0.5)-50 color utility.
 */
.color-blue-50 {
  color: hsla(218, 30%, 93%, 0.5);
}

/**
 * `background-color` hsla(218, 30%, 93%, 0.5)-50 color utility.
 */
.background-color-blue-50 {
  background-color: hsla(218, 30%, 93%, 0.5);
}

/**
 * `color` hsla(218, 30%, 93%, 0.4)-40 color utility.
 */
.color-blue-40 {
  color: hsla(218, 30%, 93%, 0.4);
}

/**
 * `background-color` hsla(218, 30%, 93%, 0.4)-40 color utility.
 */
.background-color-blue-40 {
  background-color: hsla(218, 30%, 93%, 0.4);
}

/**
 * `color` hsla(218, 30%, 93%, 0.3)-30 color utility.
 */
.color-blue-30 {
  color: hsla(218, 30%, 93%, 0.3);
}

/**
 * `background-color` hsla(218, 30%, 93%, 0.3)-30 color utility.
 */
.background-color-blue-30 {
  background-color: hsla(218, 30%, 93%, 0.3);
}

/**
 * `color` hsla(218, 30%, 93%, 0.2)-20 color utility.
 */
.color-blue-20 {
  color: hsla(218, 30%, 93%, 0.2);
}

/**
 * `background-color` hsla(218, 30%, 93%, 0.2)-20 color utility.
 */
.background-color-blue-20 {
  background-color: hsla(218, 30%, 93%, 0.2);
}

/**
 * `color` hsla(218, 30%, 93%, 0.1)-10 color utility.
 */
.color-blue-10 {
  color: hsla(218, 30%, 93%, 0.1);
}

/**
 * `background-color` hsla(218, 30%, 93%, 0.1)-10 color utility.
 */
.background-color-blue-10 {
  background-color: hsla(218, 30%, 93%, 0.1);
}

/**
 * `color` hsl(222, 14%, 68%)-100 color utility.
 */
.color-blue-dark-100 {
  color: hsl(222, 14%, 68%);
}

/**
 * `background-color` hsl(222, 14%, 68%)-100 color utility.
 */
.background-color-blue-dark-100 {
  background-color: hsl(222, 14%, 68%);
}

/**
 * `color` hsla(222, 14%, 68%, 0.9)-90 color utility.
 */
.color-blue-dark-90 {
  color: hsla(222, 14%, 68%, 0.9);
}

/**
 * `background-color` hsla(222, 14%, 68%, 0.9)-90 color utility.
 */
.background-color-blue-dark-90 {
  background-color: hsla(222, 14%, 68%, 0.9);
}

/**
 * `color` hsla(222, 14%, 68%, 0.8)-80 color utility.
 */
.color-blue-dark-80 {
  color: hsla(222, 14%, 68%, 0.8);
}

/**
 * `background-color` hsla(222, 14%, 68%, 0.8)-80 color utility.
 */
.background-color-blue-dark-80 {
  background-color: hsla(222, 14%, 68%, 0.8);
}

/**
 * `color` hsla(222, 14%, 68%, 0.7)-70 color utility.
 */
.color-blue-dark-70 {
  color: hsla(222, 14%, 68%, 0.7);
}

/**
 * `background-color` hsla(222, 14%, 68%, 0.7)-70 color utility.
 */
.background-color-blue-dark-70 {
  background-color: hsla(222, 14%, 68%, 0.7);
}

/**
 * `color` hsla(222, 14%, 68%, 0.6)-60 color utility.
 */
.color-blue-dark-60 {
  color: hsla(222, 14%, 68%, 0.6);
}

/**
 * `background-color` hsla(222, 14%, 68%, 0.6)-60 color utility.
 */
.background-color-blue-dark-60 {
  background-color: hsla(222, 14%, 68%, 0.6);
}

/**
 * `color` hsla(222, 14%, 68%, 0.5)-50 color utility.
 */
.color-blue-dark-50 {
  color: hsla(222, 14%, 68%, 0.5);
}

/**
 * `background-color` hsla(222, 14%, 68%, 0.5)-50 color utility.
 */
.background-color-blue-dark-50 {
  background-color: hsla(222, 14%, 68%, 0.5);
}

/**
 * `color` hsla(222, 14%, 68%, 0.4)-40 color utility.
 */
.color-blue-dark-40 {
  color: hsla(222, 14%, 68%, 0.4);
}

/**
 * `background-color` hsla(222, 14%, 68%, 0.4)-40 color utility.
 */
.background-color-blue-dark-40 {
  background-color: hsla(222, 14%, 68%, 0.4);
}

/**
 * `color` hsla(222, 14%, 68%, 0.3)-30 color utility.
 */
.color-blue-dark-30 {
  color: hsla(222, 14%, 68%, 0.3);
}

/**
 * `background-color` hsla(222, 14%, 68%, 0.3)-30 color utility.
 */
.background-color-blue-dark-30 {
  background-color: hsla(222, 14%, 68%, 0.3);
}

/**
 * `color` hsla(222, 14%, 68%, 0.2)-20 color utility.
 */
.color-blue-dark-20 {
  color: hsla(222, 14%, 68%, 0.2);
}

/**
 * `background-color` hsla(222, 14%, 68%, 0.2)-20 color utility.
 */
.background-color-blue-dark-20 {
  background-color: hsla(222, 14%, 68%, 0.2);
}

/**
 * `color` hsla(222, 14%, 68%, 0.1)-10 color utility.
 */
.color-blue-dark-10 {
  color: hsla(222, 14%, 68%, 0.1);
}

/**
 * `background-color` hsla(222, 14%, 68%, 0.1)-10 color utility.
 */
.background-color-blue-dark-10 {
  background-color: hsla(222, 14%, 68%, 0.1);
}

/**
 * `color` hsl(221, 18%, 20%)-100 color utility.
 */
.color-blue-deep-100 {
  color: hsl(221, 18%, 20%);
}

/**
 * `background-color` hsl(221, 18%, 20%)-100 color utility.
 */
.background-color-blue-deep-100 {
  background-color: hsl(221, 18%, 20%);
}

/**
 * `color` hsla(221, 18%, 20%, 0.9)-90 color utility.
 */
.color-blue-deep-90 {
  color: hsla(221, 18%, 20%, 0.9);
}

/**
 * `background-color` hsla(221, 18%, 20%, 0.9)-90 color utility.
 */
.background-color-blue-deep-90 {
  background-color: hsla(221, 18%, 20%, 0.9);
}

/**
 * `color` hsla(221, 18%, 20%, 0.8)-80 color utility.
 */
.color-blue-deep-80 {
  color: hsla(221, 18%, 20%, 0.8);
}

/**
 * `background-color` hsla(221, 18%, 20%, 0.8)-80 color utility.
 */
.background-color-blue-deep-80 {
  background-color: hsla(221, 18%, 20%, 0.8);
}

/**
 * `color` hsla(221, 18%, 20%, 0.7)-70 color utility.
 */
.color-blue-deep-70 {
  color: hsla(221, 18%, 20%, 0.7);
}

/**
 * `background-color` hsla(221, 18%, 20%, 0.7)-70 color utility.
 */
.background-color-blue-deep-70 {
  background-color: hsla(221, 18%, 20%, 0.7);
}

/**
 * `color` hsla(221, 18%, 20%, 0.6)-60 color utility.
 */
.color-blue-deep-60 {
  color: hsla(221, 18%, 20%, 0.6);
}

/**
 * `background-color` hsla(221, 18%, 20%, 0.6)-60 color utility.
 */
.background-color-blue-deep-60 {
  background-color: hsla(221, 18%, 20%, 0.6);
}

/**
 * `color` hsla(221, 18%, 20%, 0.5)-50 color utility.
 */
.color-blue-deep-50 {
  color: hsla(221, 18%, 20%, 0.5);
}

/**
 * `background-color` hsla(221, 18%, 20%, 0.5)-50 color utility.
 */
.background-color-blue-deep-50 {
  background-color: hsla(221, 18%, 20%, 0.5);
}

/**
 * `color` hsla(221, 18%, 20%, 0.4)-40 color utility.
 */
.color-blue-deep-40 {
  color: hsla(221, 18%, 20%, 0.4);
}

/**
 * `background-color` hsla(221, 18%, 20%, 0.4)-40 color utility.
 */
.background-color-blue-deep-40 {
  background-color: hsla(221, 18%, 20%, 0.4);
}

/**
 * `color` hsla(221, 18%, 20%, 0.3)-30 color utility.
 */
.color-blue-deep-30 {
  color: hsla(221, 18%, 20%, 0.3);
}

/**
 * `background-color` hsla(221, 18%, 20%, 0.3)-30 color utility.
 */
.background-color-blue-deep-30 {
  background-color: hsla(221, 18%, 20%, 0.3);
}

/**
 * `color` hsla(221, 18%, 20%, 0.2)-20 color utility.
 */
.color-blue-deep-20 {
  color: hsla(221, 18%, 20%, 0.2);
}

/**
 * `background-color` hsla(221, 18%, 20%, 0.2)-20 color utility.
 */
.background-color-blue-deep-20 {
  background-color: hsla(221, 18%, 20%, 0.2);
}

/**
 * `color` hsla(221, 18%, 20%, 0.1)-10 color utility.
 */
.color-blue-deep-10 {
  color: hsla(221, 18%, 20%, 0.1);
}

/**
 * `background-color` hsla(221, 18%, 20%, 0.1)-10 color utility.
 */
.background-color-blue-deep-10 {
  background-color: hsla(221, 18%, 20%, 0.1);
}

/**
 * `color` hsl(0, 0%, 95%)-100 color utility.
 */
.color-gray-light-100 {
  color: hsl(0, 0%, 95%);
}

/**
 * `background-color` hsl(0, 0%, 95%)-100 color utility.
 */
.background-color-gray-light-100 {
  background-color: hsl(0, 0%, 95%);
}

/**
 * `color` hsla(0, 0%, 95%, 0.9)-90 color utility.
 */
.color-gray-light-90 {
  color: hsla(0, 0%, 95%, 0.9);
}

/**
 * `background-color` hsla(0, 0%, 95%, 0.9)-90 color utility.
 */
.background-color-gray-light-90 {
  background-color: hsla(0, 0%, 95%, 0.9);
}

/**
 * `color` hsla(0, 0%, 95%, 0.8)-80 color utility.
 */
.color-gray-light-80 {
  color: hsla(0, 0%, 95%, 0.8);
}

/**
 * `background-color` hsla(0, 0%, 95%, 0.8)-80 color utility.
 */
.background-color-gray-light-80 {
  background-color: hsla(0, 0%, 95%, 0.8);
}

/**
 * `color` hsla(0, 0%, 95%, 0.7)-70 color utility.
 */
.color-gray-light-70 {
  color: hsla(0, 0%, 95%, 0.7);
}

/**
 * `background-color` hsla(0, 0%, 95%, 0.7)-70 color utility.
 */
.background-color-gray-light-70 {
  background-color: hsla(0, 0%, 95%, 0.7);
}

/**
 * `color` hsla(0, 0%, 95%, 0.6)-60 color utility.
 */
.color-gray-light-60 {
  color: hsla(0, 0%, 95%, 0.6);
}

/**
 * `background-color` hsla(0, 0%, 95%, 0.6)-60 color utility.
 */
.background-color-gray-light-60 {
  background-color: hsla(0, 0%, 95%, 0.6);
}

/**
 * `color` hsla(0, 0%, 95%, 0.5)-50 color utility.
 */
.color-gray-light-50 {
  color: hsla(0, 0%, 95%, 0.5);
}

/**
 * `background-color` hsla(0, 0%, 95%, 0.5)-50 color utility.
 */
.background-color-gray-light-50 {
  background-color: hsla(0, 0%, 95%, 0.5);
}

/**
 * `color` hsla(0, 0%, 95%, 0.4)-40 color utility.
 */
.color-gray-light-40 {
  color: hsla(0, 0%, 95%, 0.4);
}

/**
 * `background-color` hsla(0, 0%, 95%, 0.4)-40 color utility.
 */
.background-color-gray-light-40 {
  background-color: hsla(0, 0%, 95%, 0.4);
}

/**
 * `color` hsla(0, 0%, 95%, 0.3)-30 color utility.
 */
.color-gray-light-30 {
  color: hsla(0, 0%, 95%, 0.3);
}

/**
 * `background-color` hsla(0, 0%, 95%, 0.3)-30 color utility.
 */
.background-color-gray-light-30 {
  background-color: hsla(0, 0%, 95%, 0.3);
}

/**
 * `color` hsla(0, 0%, 95%, 0.2)-20 color utility.
 */
.color-gray-light-20 {
  color: hsla(0, 0%, 95%, 0.2);
}

/**
 * `background-color` hsla(0, 0%, 95%, 0.2)-20 color utility.
 */
.background-color-gray-light-20 {
  background-color: hsla(0, 0%, 95%, 0.2);
}

/**
 * `color` hsla(0, 0%, 95%, 0.1)-10 color utility.
 */
.color-gray-light-10 {
  color: hsla(0, 0%, 95%, 0.1);
}

/**
 * `background-color` hsla(0, 0%, 95%, 0.1)-10 color utility.
 */
.background-color-gray-light-10 {
  background-color: hsla(0, 0%, 95%, 0.1);
}

/**
 * `color` hsl(218, 5%, 59%)-100 color utility.
 */
.color-gray-dark-100 {
  color: hsl(218, 5%, 59%);
}

/**
 * `background-color` hsl(218, 5%, 59%)-100 color utility.
 */
.background-color-gray-dark-100 {
  background-color: hsl(218, 5%, 59%);
}

/**
 * `color` hsla(218, 5%, 59%, 0.9)-90 color utility.
 */
.color-gray-dark-90 {
  color: hsla(218, 5%, 59%, 0.9);
}

/**
 * `background-color` hsla(218, 5%, 59%, 0.9)-90 color utility.
 */
.background-color-gray-dark-90 {
  background-color: hsla(218, 5%, 59%, 0.9);
}

/**
 * `color` hsla(218, 5%, 59%, 0.8)-80 color utility.
 */
.color-gray-dark-80 {
  color: hsla(218, 5%, 59%, 0.8);
}

/**
 * `background-color` hsla(218, 5%, 59%, 0.8)-80 color utility.
 */
.background-color-gray-dark-80 {
  background-color: hsla(218, 5%, 59%, 0.8);
}

/**
 * `color` hsla(218, 5%, 59%, 0.7)-70 color utility.
 */
.color-gray-dark-70 {
  color: hsla(218, 5%, 59%, 0.7);
}

/**
 * `background-color` hsla(218, 5%, 59%, 0.7)-70 color utility.
 */
.background-color-gray-dark-70 {
  background-color: hsla(218, 5%, 59%, 0.7);
}

/**
 * `color` hsla(218, 5%, 59%, 0.6)-60 color utility.
 */
.color-gray-dark-60 {
  color: hsla(218, 5%, 59%, 0.6);
}

/**
 * `background-color` hsla(218, 5%, 59%, 0.6)-60 color utility.
 */
.background-color-gray-dark-60 {
  background-color: hsla(218, 5%, 59%, 0.6);
}

/**
 * `color` hsla(218, 5%, 59%, 0.5)-50 color utility.
 */
.color-gray-dark-50 {
  color: hsla(218, 5%, 59%, 0.5);
}

/**
 * `background-color` hsla(218, 5%, 59%, 0.5)-50 color utility.
 */
.background-color-gray-dark-50 {
  background-color: hsla(218, 5%, 59%, 0.5);
}

/**
 * `color` hsla(218, 5%, 59%, 0.4)-40 color utility.
 */
.color-gray-dark-40 {
  color: hsla(218, 5%, 59%, 0.4);
}

/**
 * `background-color` hsla(218, 5%, 59%, 0.4)-40 color utility.
 */
.background-color-gray-dark-40 {
  background-color: hsla(218, 5%, 59%, 0.4);
}

/**
 * `color` hsla(218, 5%, 59%, 0.3)-30 color utility.
 */
.color-gray-dark-30 {
  color: hsla(218, 5%, 59%, 0.3);
}

/**
 * `background-color` hsla(218, 5%, 59%, 0.3)-30 color utility.
 */
.background-color-gray-dark-30 {
  background-color: hsla(218, 5%, 59%, 0.3);
}

/**
 * `color` hsla(218, 5%, 59%, 0.2)-20 color utility.
 */
.color-gray-dark-20 {
  color: hsla(218, 5%, 59%, 0.2);
}

/**
 * `background-color` hsla(218, 5%, 59%, 0.2)-20 color utility.
 */
.background-color-gray-dark-20 {
  background-color: hsla(218, 5%, 59%, 0.2);
}

/**
 * `color` hsla(218, 5%, 59%, 0.1)-10 color utility.
 */
.color-gray-dark-10 {
  color: hsla(218, 5%, 59%, 0.1);
}

/**
 * `background-color` hsla(218, 5%, 59%, 0.1)-10 color utility.
 */
.background-color-gray-dark-10 {
  background-color: hsla(218, 5%, 59%, 0.1);
}

/**
 * `color` hsl(0, 0%, 35%)-100 color utility.
 */
.color-gray-antraciet-100 {
  color: hsl(0, 0%, 35%);
}

/**
 * `background-color` hsl(0, 0%, 35%)-100 color utility.
 */
.background-color-gray-antraciet-100 {
  background-color: hsl(0, 0%, 35%);
}

/**
 * `color` hsla(0, 0%, 35%, 0.9)-90 color utility.
 */
.color-gray-antraciet-90 {
  color: hsla(0, 0%, 35%, 0.9);
}

/**
 * `background-color` hsla(0, 0%, 35%, 0.9)-90 color utility.
 */
.background-color-gray-antraciet-90 {
  background-color: hsla(0, 0%, 35%, 0.9);
}

/**
 * `color` hsla(0, 0%, 35%, 0.8)-80 color utility.
 */
.color-gray-antraciet-80 {
  color: hsla(0, 0%, 35%, 0.8);
}

/**
 * `background-color` hsla(0, 0%, 35%, 0.8)-80 color utility.
 */
.background-color-gray-antraciet-80 {
  background-color: hsla(0, 0%, 35%, 0.8);
}

/**
 * `color` hsla(0, 0%, 35%, 0.7)-70 color utility.
 */
.color-gray-antraciet-70 {
  color: hsla(0, 0%, 35%, 0.7);
}

/**
 * `background-color` hsla(0, 0%, 35%, 0.7)-70 color utility.
 */
.background-color-gray-antraciet-70 {
  background-color: hsla(0, 0%, 35%, 0.7);
}

/**
 * `color` hsla(0, 0%, 35%, 0.6)-60 color utility.
 */
.color-gray-antraciet-60 {
  color: hsla(0, 0%, 35%, 0.6);
}

/**
 * `background-color` hsla(0, 0%, 35%, 0.6)-60 color utility.
 */
.background-color-gray-antraciet-60 {
  background-color: hsla(0, 0%, 35%, 0.6);
}

/**
 * `color` hsla(0, 0%, 35%, 0.5)-50 color utility.
 */
.color-gray-antraciet-50 {
  color: hsla(0, 0%, 35%, 0.5);
}

/**
 * `background-color` hsla(0, 0%, 35%, 0.5)-50 color utility.
 */
.background-color-gray-antraciet-50 {
  background-color: hsla(0, 0%, 35%, 0.5);
}

/**
 * `color` hsla(0, 0%, 35%, 0.4)-40 color utility.
 */
.color-gray-antraciet-40 {
  color: hsla(0, 0%, 35%, 0.4);
}

/**
 * `background-color` hsla(0, 0%, 35%, 0.4)-40 color utility.
 */
.background-color-gray-antraciet-40 {
  background-color: hsla(0, 0%, 35%, 0.4);
}

/**
 * `color` hsla(0, 0%, 35%, 0.3)-30 color utility.
 */
.color-gray-antraciet-30 {
  color: hsla(0, 0%, 35%, 0.3);
}

/**
 * `background-color` hsla(0, 0%, 35%, 0.3)-30 color utility.
 */
.background-color-gray-antraciet-30 {
  background-color: hsla(0, 0%, 35%, 0.3);
}

/**
 * `color` hsla(0, 0%, 35%, 0.2)-20 color utility.
 */
.color-gray-antraciet-20 {
  color: hsla(0, 0%, 35%, 0.2);
}

/**
 * `background-color` hsla(0, 0%, 35%, 0.2)-20 color utility.
 */
.background-color-gray-antraciet-20 {
  background-color: hsla(0, 0%, 35%, 0.2);
}

/**
 * `color` hsla(0, 0%, 35%, 0.1)-10 color utility.
 */
.color-gray-antraciet-10 {
  color: hsla(0, 0%, 35%, 0.1);
}

/**
 * `background-color` hsla(0, 0%, 35%, 0.1)-10 color utility.
 */
.background-color-gray-antraciet-10 {
  background-color: hsla(0, 0%, 35%, 0.1);
}

/**
 * `color` hsl(27, 100%, 96%)-100 color utility.
 */
.color-body-100 {
  color: hsl(27, 100%, 96%);
}

/**
 * `background-color` hsl(27, 100%, 96%)-100 color utility.
 */
.background-color-body-100 {
  background-color: hsl(27, 100%, 96%);
}

/**
 * `color` hsla(27, 100%, 96%, 0.9)-90 color utility.
 */
.color-body-90 {
  color: hsla(27, 100%, 96%, 0.9);
}

/**
 * `background-color` hsla(27, 100%, 96%, 0.9)-90 color utility.
 */
.background-color-body-90 {
  background-color: hsla(27, 100%, 96%, 0.9);
}

/**
 * `color` hsla(27, 100%, 96%, 0.8)-80 color utility.
 */
.color-body-80 {
  color: hsla(27, 100%, 96%, 0.8);
}

/**
 * `background-color` hsla(27, 100%, 96%, 0.8)-80 color utility.
 */
.background-color-body-80 {
  background-color: hsla(27, 100%, 96%, 0.8);
}

/**
 * `color` hsla(27, 100%, 96%, 0.7)-70 color utility.
 */
.color-body-70 {
  color: hsla(27, 100%, 96%, 0.7);
}

/**
 * `background-color` hsla(27, 100%, 96%, 0.7)-70 color utility.
 */
.background-color-body-70 {
  background-color: hsla(27, 100%, 96%, 0.7);
}

/**
 * `color` hsla(27, 100%, 96%, 0.6)-60 color utility.
 */
.color-body-60 {
  color: hsla(27, 100%, 96%, 0.6);
}

/**
 * `background-color` hsla(27, 100%, 96%, 0.6)-60 color utility.
 */
.background-color-body-60 {
  background-color: hsla(27, 100%, 96%, 0.6);
}

/**
 * `color` hsla(27, 100%, 96%, 0.5)-50 color utility.
 */
.color-body-50 {
  color: hsla(27, 100%, 96%, 0.5);
}

/**
 * `background-color` hsla(27, 100%, 96%, 0.5)-50 color utility.
 */
.background-color-body-50 {
  background-color: hsla(27, 100%, 96%, 0.5);
}

/**
 * `color` hsla(27, 100%, 96%, 0.4)-40 color utility.
 */
.color-body-40 {
  color: hsla(27, 100%, 96%, 0.4);
}

/**
 * `background-color` hsla(27, 100%, 96%, 0.4)-40 color utility.
 */
.background-color-body-40 {
  background-color: hsla(27, 100%, 96%, 0.4);
}

/**
 * `color` hsla(27, 100%, 96%, 0.3)-30 color utility.
 */
.color-body-30 {
  color: hsla(27, 100%, 96%, 0.3);
}

/**
 * `background-color` hsla(27, 100%, 96%, 0.3)-30 color utility.
 */
.background-color-body-30 {
  background-color: hsla(27, 100%, 96%, 0.3);
}

/**
 * `color` hsla(27, 100%, 96%, 0.2)-20 color utility.
 */
.color-body-20 {
  color: hsla(27, 100%, 96%, 0.2);
}

/**
 * `background-color` hsla(27, 100%, 96%, 0.2)-20 color utility.
 */
.background-color-body-20 {
  background-color: hsla(27, 100%, 96%, 0.2);
}

/**
 * `color` hsla(27, 100%, 96%, 0.1)-10 color utility.
 */
.color-body-10 {
  color: hsla(27, 100%, 96%, 0.1);
}

/**
 * `background-color` hsla(27, 100%, 96%, 0.1)-10 color utility.
 */
.background-color-body-10 {
  background-color: hsla(27, 100%, 96%, 0.1);
}

/**
 * `color` hsl(26, 38%, 79%)-100 color utility.
 */
.color-brown-light-100 {
  color: hsl(26, 38%, 79%);
}

/**
 * `background-color` hsl(26, 38%, 79%)-100 color utility.
 */
.background-color-brown-light-100 {
  background-color: hsl(26, 38%, 79%);
}

/**
 * `color` hsla(26, 38%, 79%, 0.9)-90 color utility.
 */
.color-brown-light-90 {
  color: hsla(26, 38%, 79%, 0.9);
}

/**
 * `background-color` hsla(26, 38%, 79%, 0.9)-90 color utility.
 */
.background-color-brown-light-90 {
  background-color: hsla(26, 38%, 79%, 0.9);
}

/**
 * `color` hsla(26, 38%, 79%, 0.8)-80 color utility.
 */
.color-brown-light-80 {
  color: hsla(26, 38%, 79%, 0.8);
}

/**
 * `background-color` hsla(26, 38%, 79%, 0.8)-80 color utility.
 */
.background-color-brown-light-80 {
  background-color: hsla(26, 38%, 79%, 0.8);
}

/**
 * `color` hsla(26, 38%, 79%, 0.7)-70 color utility.
 */
.color-brown-light-70 {
  color: hsla(26, 38%, 79%, 0.7);
}

/**
 * `background-color` hsla(26, 38%, 79%, 0.7)-70 color utility.
 */
.background-color-brown-light-70 {
  background-color: hsla(26, 38%, 79%, 0.7);
}

/**
 * `color` hsla(26, 38%, 79%, 0.6)-60 color utility.
 */
.color-brown-light-60 {
  color: hsla(26, 38%, 79%, 0.6);
}

/**
 * `background-color` hsla(26, 38%, 79%, 0.6)-60 color utility.
 */
.background-color-brown-light-60 {
  background-color: hsla(26, 38%, 79%, 0.6);
}

/**
 * `color` hsla(26, 38%, 79%, 0.5)-50 color utility.
 */
.color-brown-light-50 {
  color: hsla(26, 38%, 79%, 0.5);
}

/**
 * `background-color` hsla(26, 38%, 79%, 0.5)-50 color utility.
 */
.background-color-brown-light-50 {
  background-color: hsla(26, 38%, 79%, 0.5);
}

/**
 * `color` hsla(26, 38%, 79%, 0.4)-40 color utility.
 */
.color-brown-light-40 {
  color: hsla(26, 38%, 79%, 0.4);
}

/**
 * `background-color` hsla(26, 38%, 79%, 0.4)-40 color utility.
 */
.background-color-brown-light-40 {
  background-color: hsla(26, 38%, 79%, 0.4);
}

/**
 * `color` hsla(26, 38%, 79%, 0.3)-30 color utility.
 */
.color-brown-light-30 {
  color: hsla(26, 38%, 79%, 0.3);
}

/**
 * `background-color` hsla(26, 38%, 79%, 0.3)-30 color utility.
 */
.background-color-brown-light-30 {
  background-color: hsla(26, 38%, 79%, 0.3);
}

/**
 * `color` hsla(26, 38%, 79%, 0.2)-20 color utility.
 */
.color-brown-light-20 {
  color: hsla(26, 38%, 79%, 0.2);
}

/**
 * `background-color` hsla(26, 38%, 79%, 0.2)-20 color utility.
 */
.background-color-brown-light-20 {
  background-color: hsla(26, 38%, 79%, 0.2);
}

/**
 * `color` hsla(26, 38%, 79%, 0.1)-10 color utility.
 */
.color-brown-light-10 {
  color: hsla(26, 38%, 79%, 0.1);
}

/**
 * `background-color` hsla(26, 38%, 79%, 0.1)-10 color utility.
 */
.background-color-brown-light-10 {
  background-color: hsla(26, 38%, 79%, 0.1);
}

/**
 * `color` hsl(23, 90%, 96%)-100 color utility.
 */
.color-light-nude-100 {
  color: hsl(23, 90%, 96%);
}

/**
 * `background-color` hsl(23, 90%, 96%)-100 color utility.
 */
.background-color-light-nude-100 {
  background-color: hsl(23, 90%, 96%);
}

/**
 * `color` hsla(23, 90%, 96%, 0.9)-90 color utility.
 */
.color-light-nude-90 {
  color: hsla(23, 90%, 96%, 0.9);
}

/**
 * `background-color` hsla(23, 90%, 96%, 0.9)-90 color utility.
 */
.background-color-light-nude-90 {
  background-color: hsla(23, 90%, 96%, 0.9);
}

/**
 * `color` hsla(23, 90%, 96%, 0.8)-80 color utility.
 */
.color-light-nude-80 {
  color: hsla(23, 90%, 96%, 0.8);
}

/**
 * `background-color` hsla(23, 90%, 96%, 0.8)-80 color utility.
 */
.background-color-light-nude-80 {
  background-color: hsla(23, 90%, 96%, 0.8);
}

/**
 * `color` hsla(23, 90%, 96%, 0.7)-70 color utility.
 */
.color-light-nude-70 {
  color: hsla(23, 90%, 96%, 0.7);
}

/**
 * `background-color` hsla(23, 90%, 96%, 0.7)-70 color utility.
 */
.background-color-light-nude-70 {
  background-color: hsla(23, 90%, 96%, 0.7);
}

/**
 * `color` hsla(23, 90%, 96%, 0.6)-60 color utility.
 */
.color-light-nude-60 {
  color: hsla(23, 90%, 96%, 0.6);
}

/**
 * `background-color` hsla(23, 90%, 96%, 0.6)-60 color utility.
 */
.background-color-light-nude-60 {
  background-color: hsla(23, 90%, 96%, 0.6);
}

/**
 * `color` hsla(23, 90%, 96%, 0.5)-50 color utility.
 */
.color-light-nude-50 {
  color: hsla(23, 90%, 96%, 0.5);
}

/**
 * `background-color` hsla(23, 90%, 96%, 0.5)-50 color utility.
 */
.background-color-light-nude-50 {
  background-color: hsla(23, 90%, 96%, 0.5);
}

/**
 * `color` hsla(23, 90%, 96%, 0.4)-40 color utility.
 */
.color-light-nude-40 {
  color: hsla(23, 90%, 96%, 0.4);
}

/**
 * `background-color` hsla(23, 90%, 96%, 0.4)-40 color utility.
 */
.background-color-light-nude-40 {
  background-color: hsla(23, 90%, 96%, 0.4);
}

/**
 * `color` hsla(23, 90%, 96%, 0.3)-30 color utility.
 */
.color-light-nude-30 {
  color: hsla(23, 90%, 96%, 0.3);
}

/**
 * `background-color` hsla(23, 90%, 96%, 0.3)-30 color utility.
 */
.background-color-light-nude-30 {
  background-color: hsla(23, 90%, 96%, 0.3);
}

/**
 * `color` hsla(23, 90%, 96%, 0.2)-20 color utility.
 */
.color-light-nude-20 {
  color: hsla(23, 90%, 96%, 0.2);
}

/**
 * `background-color` hsla(23, 90%, 96%, 0.2)-20 color utility.
 */
.background-color-light-nude-20 {
  background-color: hsla(23, 90%, 96%, 0.2);
}

/**
 * `color` hsla(23, 90%, 96%, 0.1)-10 color utility.
 */
.color-light-nude-10 {
  color: hsla(23, 90%, 96%, 0.1);
}

/**
 * `background-color` hsla(23, 90%, 96%, 0.1)-10 color utility.
 */
.background-color-light-nude-10 {
  background-color: hsla(23, 90%, 96%, 0.1);
}

/**
 * `color` hsl(23, 94%, 88%)-100 color utility.
 */
.color-nude-100 {
  color: hsl(23, 94%, 88%);
}

/**
 * `background-color` hsl(23, 94%, 88%)-100 color utility.
 */
.background-color-nude-100 {
  background-color: hsl(23, 94%, 88%);
}

/**
 * `color` hsla(23, 94%, 88%, 0.9)-90 color utility.
 */
.color-nude-90 {
  color: hsla(23, 94%, 88%, 0.9);
}

/**
 * `background-color` hsla(23, 94%, 88%, 0.9)-90 color utility.
 */
.background-color-nude-90 {
  background-color: hsla(23, 94%, 88%, 0.9);
}

/**
 * `color` hsla(23, 94%, 88%, 0.8)-80 color utility.
 */
.color-nude-80 {
  color: hsla(23, 94%, 88%, 0.8);
}

/**
 * `background-color` hsla(23, 94%, 88%, 0.8)-80 color utility.
 */
.background-color-nude-80 {
  background-color: hsla(23, 94%, 88%, 0.8);
}

/**
 * `color` hsla(23, 94%, 88%, 0.7)-70 color utility.
 */
.color-nude-70 {
  color: hsla(23, 94%, 88%, 0.7);
}

/**
 * `background-color` hsla(23, 94%, 88%, 0.7)-70 color utility.
 */
.background-color-nude-70 {
  background-color: hsla(23, 94%, 88%, 0.7);
}

/**
 * `color` hsla(23, 94%, 88%, 0.6)-60 color utility.
 */
.color-nude-60 {
  color: hsla(23, 94%, 88%, 0.6);
}

/**
 * `background-color` hsla(23, 94%, 88%, 0.6)-60 color utility.
 */
.background-color-nude-60 {
  background-color: hsla(23, 94%, 88%, 0.6);
}

/**
 * `color` hsla(23, 94%, 88%, 0.5)-50 color utility.
 */
.color-nude-50 {
  color: hsla(23, 94%, 88%, 0.5);
}

/**
 * `background-color` hsla(23, 94%, 88%, 0.5)-50 color utility.
 */
.background-color-nude-50 {
  background-color: hsla(23, 94%, 88%, 0.5);
}

/**
 * `color` hsla(23, 94%, 88%, 0.4)-40 color utility.
 */
.color-nude-40 {
  color: hsla(23, 94%, 88%, 0.4);
}

/**
 * `background-color` hsla(23, 94%, 88%, 0.4)-40 color utility.
 */
.background-color-nude-40 {
  background-color: hsla(23, 94%, 88%, 0.4);
}

/**
 * `color` hsla(23, 94%, 88%, 0.3)-30 color utility.
 */
.color-nude-30 {
  color: hsla(23, 94%, 88%, 0.3);
}

/**
 * `background-color` hsla(23, 94%, 88%, 0.3)-30 color utility.
 */
.background-color-nude-30 {
  background-color: hsla(23, 94%, 88%, 0.3);
}

/**
 * `color` hsla(23, 94%, 88%, 0.2)-20 color utility.
 */
.color-nude-20 {
  color: hsla(23, 94%, 88%, 0.2);
}

/**
 * `background-color` hsla(23, 94%, 88%, 0.2)-20 color utility.
 */
.background-color-nude-20 {
  background-color: hsla(23, 94%, 88%, 0.2);
}

/**
 * `color` hsla(23, 94%, 88%, 0.1)-10 color utility.
 */
.color-nude-10 {
  color: hsla(23, 94%, 88%, 0.1);
}

/**
 * `background-color` hsla(23, 94%, 88%, 0.1)-10 color utility.
 */
.background-color-nude-10 {
  background-color: hsla(23, 94%, 88%, 0.1);
}