@charset "UTF-8";
/* * * * * STYLE ROOT * * * * *
       * * * * * * * * * * * * * * * * * * */
/* * * * * FONTS * * * * *
       * * * * * * * * * * * * * * * * * * */
/* * * * * RockSalt * * * * *
       * * * * * * * * * * * * * * * * * * */
@font-face {
  font-family: "RockSalt";
  src: url("../fonts/rock-salt/rocksalt-subset-webfont.woff2"), url("../fonts/rock-salt/rocksalt-subset-webfont.woff");
}
/* * * * * CAVEAT * * * * *
       * * * * * * * * * * * * * * * * * * */
@font-face {
  font-family: "Caveat";
  src: url("../fonts/caveat/caveat-regular-webfont.woff2"), url("../fonts/caveat/caveat-regular-webfont.woff");
}
/* * * * * ROBOTO * * * * *
       * * * * * * * * * * * * * * * * * * */
@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 400;
  src: url("../fonts/roboto/roboto-regular-webfont.woff2"), url("../fonts/roboto/roboto-regular-webfont.woff");
}
@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 500;
  src: url("../fonts/roboto/roboto-medium-webfont.woff2"), url("../fonts/roboto/roboto-medium-webfont.woff");
}
@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 300;
  src: url("../fonts/roboto/roboto-light-webfont.woff2"), url("../fonts/roboto/roboto-light-webfont.woff");
}
@font-face {
  font-family: "Roboto";
  font-style: italic;
  font-weight: 400;
  src: url("../fonts/roboto/roboto-italic-webfont.woff2"), url("../fonts/roboto/roboto-italic-webfont.woff");
}
@font-face {
  font-family: "Roboto";
  font-style: italic;
  font-weight: 500;
  src: url("../fonts/roboto/roboto-mediumitalic-webfont.woff2"), url("../fonts/roboto/roboto-mediumitalic-webfont.woff");
}
@font-face {
  font-family: "Roboto";
  font-style: italic;
  font-weight: 300;
  src: url("../fonts/roboto/roboto-lightitalic-webfont.woff2"), url("../fonts/roboto/roboto-lightitalic-webfont.woff");
}
/* * * * * BASIC VARIABLES - COLORS * * * * *
       * * * * * * * * * * * * * * * * * * */
:root {
  /* Colors */
  --c-white: #FFFFFF;
  --c-gray-dark: #171717; /* standard css rosybrown */
  --c-egg: #FFF9F9;
  --c-orange-light: rgba(255, 235, 220, 1);
  --c-yellow-light: rgb(238, 214, 120);
  --c-orange: rgb(166, 53, 8);
  --c-green-light: #D2E5D4;
  --c-green: #90BC94;
  --c-green-dark: #34663C;
  --c-blue-light: #E1F5F5;
  --c-blue: #4aa0d5;
  --c-blue-dark: #061758;
  --c-brown-light: #e2cfcf;
  --c-rosy-brown: #BC8F8FFF; /* standard css rosybrown */
  --c-red-dark: #3b0404; /* standard css rosybrown */
  --c-marine-dark: #041d23; /* standard css rosybrown */
  --c-gray: #E5E1E1;
  --c-brown: rgb(45, 14, 3);
  --c-black: #000000;
  /* Color-Wrapper */
  --cw-scarf-outer: var(--c-orange-light);
  --cw-scarf-inner: var(--c-egg);
  --cw-text: var(--c-black);
  --cw-link: var(--c-blue-dark);
  --cw-link-underline: transparent;
  --cw-link-filter: none;
  --cw-navigation: var(--c-white);
  --cw-navigation-link: var(--c-blue-dark);
  --cw-button: var(--c-green-light);
}

/* * * * * BASIC VARIABLES - LAYOUT AND BOXES * * * * *
       * * * * * * * * * * * * * * * * * * */
:root {
  /* Responsive Layout */
  --besideSpacingMobile: var(--space8);
  --besideSpacing: var(--space14);
  --besideWiderAddition: var(--space16);
  --contentScarfWidth: 1500px;
  --contentWidth: 1300px;
  /* Breakpoints */
  --screenSm: 520px;
  --screenMd: 980px;
  --screenLg: 1200px;
  /* Box-Models */
  --border: 1px solid var(--cw-navigation-link);
  --boxShadowSmall: 0 1px 1px 0 rgba(0,0,0,0.25);
  --boxShadow: 0 4px 4px 0 rgba(0,0,0,0.25);
  --boxShadowStrong: 2px 5px 10px 0 rgba(0,0,0,0.3);
  /* Spaces */
  --space1: 0.25rem;
  --space2: 0.5rem;
  --space3: 0.75rem;
  --space4: 1rem;
  --space5: 1.25rem;
  --space6: 1.5rem;
  --space7: 1.75rem;
  --space8: 2rem;
  --space10: 2.5rem;
  --space12: 3rem;
  --space14: 3.5rem;
  --space16: 4rem;
  --space20: 5rem;
  --space24: 6rem;
  --space28: 7rem;
  --space32: 8rem;
  --space40: 10rem;
  --space48: 12rem;
  --space64: 16rem;
}

/* * * * * BASIC VARIABLES - TYPOGRAPHY * * * * *
       * * * * * * * * * * * * * * * * * * */
:root {
  /* Family */
  --font-family: "Roboto", Arial, Helvetica, sans-serif;
  /* Font-Sizes */
  --baseFontSize: 16px;
  --h1: 4rem;
  --h2: 2.6rem;
  --h3: 2rem;
  --h4: 1.6rem;
  --h5: 1.3rem;
  --h6: 1.1rem;
  --textSm: 0.9rem;
  --textMd: 1rem;
  --textLg: 1.1rem;
  --textXl: 1.2rem;
  /* Letter Spacing */
  --letteringTight: .01rem;
  --letteringDense: .04rem;
  --lettering: .08rem;
  --letteringLoose: .13rem;
  --letteringWide: .2rem;
  /* Line Height */
  --lineHeightTight: 1;
  --lineHeight: 1.6;
  --lineHeightLoose: 2.2;
}

/* * * * * CSS STYLE ORDER * * * * *
    Position (position, top, left ..)
    Box Model ( display, width, height, margin, padding, border)
    Typography
    Misc
       * * * * * * * * * * * * * * * * * * */
/* * * * * BASIC CLASSES * * * * *
       * * * * * * * * * * * * * * * * * * */
.webpage-body .bg-c-white,
.layout-preview .bg-c-white {
  background-color: white;
}
.webpage-body .bg-c-gray-dark,
.layout-preview .bg-c-gray-dark {
  background-color: var(--c-gray-dark);
}
.webpage-body .bg-c-egg,
.layout-preview .bg-c-egg {
  background-color: var(--c-egg);
}
.webpage-body .bg-c-green-light,
.layout-preview .bg-c-green-light {
  background-color: var(--c-green-light);
}
.webpage-body .bg-c-green,
.layout-preview .bg-c-green {
  background-color: var(--c-green);
}
.webpage-body .bg-c-green-dark,
.layout-preview .bg-c-green-dark {
  background-color: var(--c-green-dark);
}
.webpage-body .bg-c-blue-light,
.layout-preview .bg-c-blue-light {
  background-color: var(--c-blue-light);
}
.webpage-body .bg-c-blue,
.layout-preview .bg-c-blue {
  background-color: var(--c-blue);
}
.webpage-body .bg-c-blue-dark,
.layout-preview .bg-c-blue-dark {
  background-color: var(--c-blue-dark);
}
.webpage-body .bg-c-brown-light,
.layout-preview .bg-c-brown-light {
  background-color: var(--c-brown-light);
}
.webpage-body .bg-c-rosy-brown,
.layout-preview .bg-c-rosy-brown {
  background-color: var(--c-rosy-brown);
}
.webpage-body .bg-c-red-dark,
.layout-preview .bg-c-red-dark {
  background-color: var(--c-red-dark);
}
.webpage-body .bg-c-yellow-light,
.layout-preview .bg-c-yellow-light {
  background-color: var(--c-yellow-light);
}
.webpage-body .bg-c-orange-light,
.layout-preview .bg-c-orange-light {
  background-color: var(--c-orange-light);
}
.webpage-body .bg-c-orange,
.layout-preview .bg-c-orange {
  background-color: var(--c-orange);
}
.webpage-body .c-white,
.layout-preview .c-white {
  color: white;
}
.webpage-body .h1,
.layout-preview .h1 {
  font-size: var(--h1);
}
.webpage-body .h2,
.layout-preview .h2 {
  font-size: var(--h2);
}
.webpage-body .h3,
.layout-preview .h3 {
  font-size: var(--h3);
}
.webpage-body .h4,
.layout-preview .h4 {
  font-size: var(--h4);
}
.webpage-body .h5,
.layout-preview .h5 {
  font-size: var(--h5);
}
.webpage-body .text-sm,
.layout-preview .text-sm {
  font-size: var(--textSm);
}
.webpage-body .text-md,
.layout-preview .text-md {
  font-size: var(--textMd);
}
.webpage-body .text-lg,
.layout-preview .text-lg {
  font-size: var(--textLg);
}
.webpage-body .text-xl,
.layout-preview .text-xl {
  font-size: var(--textXl);
}
.webpage-body .absolute,
.layout-preview .absolute {
  position: absolute;
}
.webpage-body .relative,
.layout-preview .relative {
  position: relative;
}
.webpage-body .aspect-ratio-4,
.layout-preview .aspect-ratio-4 {
  aspect-ratio: 4/1;
}
.webpage-body .aspect-ratio-3-5,
.layout-preview .aspect-ratio-3-5 {
  aspect-ratio: 3.5/1;
}
.webpage-body .aspect-ratio-3,
.layout-preview .aspect-ratio-3 {
  aspect-ratio: 3/1;
}
.webpage-body .aspect-ratio-2-5,
.layout-preview .aspect-ratio-2-5 {
  aspect-ratio: 2.5/1;
}
.webpage-body .aspect-ratio-full-height,
.layout-preview .aspect-ratio-full-height {
  height: 100vh;
}

/* * * * * CSS STYLE ORDER * * * * *
    Position (position, top, left ..)
    Box Model ( display, width, height, margin, padding, border)
    Typography
    Misc
       * * * * * * * * * * * * * * * * * * */
/* * * * * GENERAL * * * * *
       * * * * * * * * * * * * * * * * * * */
/* this wraps the whole app */
.webpage-body {
  margin: 0;
  font-size: var(--baseFontSize);
  font-family: var(--font-family);
  font-weight: 300;
  letter-spacing: var(--letteringLoose);
  line-height: var(--lineHeight);
}

.webpage-body,
.layout-preview {
  /* as far as I found images can't have classes passed directly.
  therefore the img size should always adapt to it's surrounding container (which usually has a class with sizing options) */
  /* * * * * * * * * *
  Text
  * * * * * * */
  /* * * * * * * * * *
  List
  * * * * * * */
  /* ∞ » ☼ ☾ ☉ ☀ ~ ≈ */
  /* * * * * * * * * *
  Layout
  * * * * * * */
  /* * * * * * * * * *
  Links and Buttons
  * * * * * * */
  /* Added to apply filter effect */
  /* Style the text-inside a button (wrap in span or other element) */
}
.webpage-body img,
.layout-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.webpage-body h1, .webpage-body h2, .webpage-body h3, .webpage-body h4, .webpage-body h5, .webpage-body h6, .webpage-body p,
.layout-preview h1,
.layout-preview h2,
.layout-preview h3,
.layout-preview h4,
.layout-preview h5,
.layout-preview h6,
.layout-preview p {
  line-height: var(--lineHeight);
}
.webpage-body .cke-text,
.layout-preview .cke-text {
  letter-spacing: var(--lettering);
}
.webpage-body .cke-text p:not(:last-of-type),
.layout-preview .cke-text p:not(:last-of-type) {
  padding-bottom: var(--space3);
}
.webpage-body .text-italic, .webpage-body i,
.layout-preview .text-italic,
.layout-preview i {
  font-style: italic;
}
.webpage-body .text-bold, .webpage-body strong,
.layout-preview .text-bold,
.layout-preview strong {
  font-weight: bold;
}
.webpage-body ul,
.layout-preview ul {
  padding-block: var(--space3);
  list-style-type: circle;
  list-style-position: outside;
  margin-left: var(--space10);
}
.webpage-body ul li:not(:last-child),
.layout-preview ul li:not(:last-child) {
  padding-bottom: var(--space2);
}
.webpage-body ul li::marker,
.layout-preview ul li::marker {
  content: "~  ";
  font-size: var(--h5);
  font-weight: 300;
}
.webpage-body .content-scarf,
.layout-preview .content-scarf {
  max-width: var(--contentScarfWidth);
  margin: 0 auto;
}
.webpage-body .beside,
.layout-preview .beside {
  box-sizing: border-box;
  padding-inline: var(--besideSpacingMobile);
  width: 100%;
}
@media screen and (min-width: 520px) {
  .webpage-body .beside,
  .layout-preview .beside {
    padding-inline: var(--besideSpacing);
    margin: 0 auto;
    max-width: var(--contentWidth);
  }
  .webpage-body .beside--wider,
  .layout-preview .beside--wider {
    max-width: calc(var(--contentWidth) + var(--besideWiderAddition));
  }
  .webpage-body .content-scarf,
  .layout-preview .content-scarf {
    border-inline: var(--border);
    border-width: 1px;
    box-shadow: var(--boxShadow);
  }
}
.webpage-body .hidden,
.layout-preview .hidden {
  display: none !important;
}
.webpage-body a, .webpage-body .button,
.layout-preview a,
.layout-preview .button {
  text-decoration: underline;
  text-underline-offset: 3px;
  filter: none;
  transition: text-decoration-color, filter 150ms ease-out;
}
.webpage-body a:hover,
.layout-preview a:hover {
  cursor: pointer;
  filter: var(--cw-link-filter);
}
.webpage-body a.no-filter:hover,
.webpage-body .entrance a:hover,
.layout-preview a.no-filter:hover,
.layout-preview .entrance a:hover {
  filter: none;
}
.webpage-body button:hover:disabled,
.layout-preview button:hover:disabled {
  cursor: default;
}
.webpage-body a:focus, .webpage-body button:focus,
.layout-preview a:focus,
.layout-preview button:focus {
  outline: revert;
}
.webpage-body .button,
.layout-preview .button {
  position: relative; /* Added */
  text-decoration: none;
  padding: var(--space3) var(--space6);
  margin-top: var(--space1);
  background-color: var(--cw-button);
  border-radius: 25px;
  border: 1px darkgrey dotted;
  box-shadow: var(--boxShadow);
  font-size: var(--textMd);
}
.webpage-body .button::before,
.layout-preview .button::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1;
  border-radius: 25px;
  filter: none;
  background-color: var(--cw-navigation);
  transition: filter 150ms ease-out;
}
.webpage-body .button:hover:not(:disabled),
.layout-preview .button:hover:not(:disabled) {
  cursor: pointer;
}
.webpage-body .button:hover:not(:disabled)::before,
.layout-preview .button:hover:not(:disabled)::before { /* Added */
  filter: var(--cw-button-filter);
}
.webpage-body .button *,
.layout-preview .button * {
  font-weight: bold;
  position: relative;
  color: var(--cw-link);
  text-shadow: var(--cw-button-text-shadow);
  z-index: 5;
}

/* * * * * Basic Colors * * * * *
       * * * * * * * * * * * * * * * * * * */
.webpage-body,
.layout-preview {
  /* var --cw-content-scarf is --cw-navigation-link with lighter opacity */
}
.webpage-body body.webpage-body,
.layout-preview body.webpage-body {
  background-color: var(--cw-scarf-outer);
  color: var(--cw-text);
}
.webpage-body .content-scarf-outer,
.layout-preview .content-scarf-outer {
  background-color: var(--cw-scarf-outer);
}
.webpage-body .content-scarf,
.layout-preview .content-scarf {
  background-color: var(--cw-scarf-inner);
}
.webpage-body a,
.webpage-body .cke-text a,
.webpage-body button,
.layout-preview a,
.layout-preview .cke-text a,
.layout-preview button {
  color: var(--cw-link);
  text-decoration-color: var(--cw-link-underline);
}
.webpage-body a:hover,
.webpage-body button:hover:not(:disabled),
.layout-preview a:hover,
.layout-preview button:hover:not(:disabled) {
  color: var(--cw-link);
  text-decoration-color: var(--cw-link);
}
.webpage-body .entrance a,
.layout-preview .entrance a {
  color: var(--cw-navigation-link);
  text-decoration-color: transparent;
}
.webpage-body .entrance a:hover,
.layout-preview .entrance a:hover {
  color: var(--cw-navigation-link);
  text-decoration-color: var(--cw-navigation-link);
}
.webpage-body .content-scarf,
.layout-preview .content-scarf {
  border-color: var(--cw-content-scarf);
}

/* * * * * OVERWRITE COLOUR SWATCHES STYLES * * * * *
       * * * * * * * * * * * * * * * * * * */
.content-pane .color-swatches button {
  height: 28px;
  width: 28px;
  margin: 0.5rem 6px 0 0;
}

.content-pane .color-swatches button,
.content-pane .color-swatches button:before,
.content-pane .color-swatches button:after {
  border-radius: 5%;
}

/* * * * * Carbon Badge * * * * *
       * * * * * * * * * * * * * * * * * * */
.webpage-body .carbon-badge,
.layout-preview .carbon-badge {
  padding-top: var(--space3);
}
.webpage-body #wcb.carbonbadge,
.layout-preview #wcb.carbonbadge {
  --b1: var(--cw-link);
  --b2: var(--cw-link);
}
.webpage-body .carbon-badge--right #wcb.carbonbadge, .webpage-body .carbon-badge--left #wcb.carbonbadge,
.layout-preview .carbon-badge--right #wcb.carbonbadge,
.layout-preview .carbon-badge--left #wcb.carbonbadge {
  text-align: inherit;
}

/* * * * * CKE Text Wrap * * * * *
       * * * * * * * * * * * * * * * * * * */
.webpage-body .cke-text-wrap,
.layout-preview .cke-text-wrap {
  display: block;
}
@media screen and (min-width: 520px) {
  .webpage-body .cke-text-wrap,
  .layout-preview .cke-text-wrap {
    display: inline;
  }
}

/* * * * * HEADING-LINK BUTTON * * * * *
       * * * * * * * * * * * * * * * * * * */
.heading-link-button {
  display: none;
  position: absolute;
  top: 8px;
  left: -25px;
  font-size: var(--h5);
  border: none;
  background-color: transparent;
  filter: opacity(25%);
}

.heading-link-button:hover {
  filter: opacity(75%);
  cursor: url("../assets/copy-icon.png"), auto;
}

@media screen and (min-width: 520px) {
  .heading-link-button {
    display: block;
  }
}
/* * * * * LINK * * * * *
       * * * * * * * * * * * * * * * * * * */
.webpage-body .link,
.layout-preview .link {
  display: flex;
  flex-direction: column;
  gap: var(--space4);
  padding-top: var(--space6);
}
.webpage-body .link-text,
.layout-preview .link-text {
  display: block;
  min-width: 1px;
  min-height: 1px;
  height: auto;
  font-size: var(--textLg);
  font-style: italic;
  text-align: right;
  color: var(--cw-link);
}
.webpage-body .link-text__icon-anchor,
.layout-preview .link-text__icon-anchor {
  position: relative;
  height: 100%;
  padding-left: 35px;
}
.webpage-body .link__icon,
.layout-preview .link__icon {
  position: absolute;
  top: 0;
  left: 0;
  width: 25px;
  color: var(--cw-link);
  transition: left 150ms ease-out;
}
.webpage-body .link__icon-email,
.layout-preview .link__icon-email {
  width: 23px;
  top: 2px;
}
.webpage-body a:hover .link__icon, .webpage-body a:active .link__icon,
.layout-preview a:hover .link__icon,
.layout-preview a:active .link__icon {
  left: 6px;
}
@media screen and (min-width: 520px) {
  .webpage-body .link-text,
  .layout-preview .link-text {
    font-size: var(--h5);
  }
  .webpage-body .link-text__icon-anchor,
  .layout-preview .link-text__icon-anchor {
    padding-left: 46px;
  }
  .webpage-body .link__icon,
  .layout-preview .link__icon {
    left: 0;
    width: 30px;
  }
  .webpage-body .link__icon-email,
  .layout-preview .link__icon-email {
    width: 28px;
    top: 1px;
  }
  .webpage-body a:hover .link__icon, .webpage-body a:active .link__icon,
  .layout-preview a:hover .link__icon,
  .layout-preview a:active .link__icon {
    left: 6px;
  }
}

/* * * * * CAPTION * * * * *
       * * * * * * * * * * * * * * * * * * */
.webpage-body .caption,
.layout-preview .caption {
  padding-top: var(--space10);
  padding-bottom: var(--space20);
}
.webpage-body .caption__title,
.layout-preview .caption__title {
  font-size: var(--h4);
}
.webpage-body .caption__title--part,
.layout-preview .caption__title--part {
  display: block;
}
.webpage-body .caption__title--part:not(:first-of-type),
.layout-preview .caption__title--part:not(:first-of-type) {
  margin-left: var(--space6);
}
.webpage-body .caption__subtitle,
.layout-preview .caption__subtitle {
  text-align: right;
  font-size: var(--textLg);
}
.webpage-body .caption__spacer-line,
.layout-preview .caption__spacer-line {
  visibility: hidden;
  height: var(--space8);
}
@media screen and (min-width: 520px) {
  .webpage-body .caption__title,
  .layout-preview .caption__title {
    font-size: var(--h2);
  }
  .webpage-body .caption__title--part,
  .layout-preview .caption__title--part {
    display: inline;
  }
  .webpage-body .caption__title--part:not(:first-of-type),
  .layout-preview .caption__title--part:not(:first-of-type) {
    margin-left: 0;
  }
  .webpage-body .caption__subtitle,
  .layout-preview .caption__subtitle {
    text-align: left;
    font-size: var(--textLg);
  }
  .webpage-body .caption__spacer-line,
  .layout-preview .caption__spacer-line {
    visibility: visible;
    width: 300px;
    height: 1px;
    margin-block: var(--space6);
    border-top: var(--border);
    border-color: var(--cw-navigation-link);
  }
}
/* * * * * CAPTION BANNER * * * * *
       * * * * * * * * * * * * * * * * * * */
.webpage-body .caption-banner,
.layout-preview .caption-banner {
  padding-top: var(--space24);
}
.webpage-body .caption-banner__word,
.layout-preview .caption-banner__word {
  font-style: italic;
}
.webpage-body .caption-banner__word--pre,
.layout-preview .caption-banner__word--pre {
  margin-bottom: var(--space12);
}
.webpage-body .caption-banner__word--post,
.layout-preview .caption-banner__word--post {
  text-align: right;
}
.webpage-body .caption-banner__title,
.layout-preview .caption-banner__title {
  margin-bottom: var(--space4);
  text-align: right;
  font-family: Caveat, serif;
  font-size: var(--h3);
  letter-spacing: var(--letteringWide);
}
@media screen and (min-width: 520px) {
  .webpage-body .caption-banner__title,
  .layout-preview .caption-banner__title {
    font-size: var(--h2);
  }
}
@media screen and (min-width: 980px) {
  .webpage-body .caption-banner__word,
  .layout-preview .caption-banner__word {
    margin-left: var(--space24);
  }
  .webpage-body .caption-banner__title,
  .layout-preview .caption-banner__title {
    margin-bottom: var(--space6);
    font-size: var(--h1);
  }
}

/* * * * * FOOTER-COLUMN * * * * *
       * * * * * * * * * * * * * * * * * * */
.webpage-body,
.layout-preview {
  /* Alignments */
}
.webpage-body .footer-col,
.layout-preview .footer-col {
  width: 100%;
}
.webpage-body .footer-col__link, .webpage-body .footer-col__link:hover,
.layout-preview .footer-col__link,
.layout-preview .footer-col__link:hover {
  color: var(--cw-text);
}
.webpage-body .footer-col__title,
.layout-preview .footer-col__title {
  font-family: Caveat, serif;
  font-size: var(--h3);
  color: var(--cw-link);
}
.webpage-body .footer-col__image,
.layout-preview .footer-col__image {
  display: block;
  width: 80px;
  height: 80px;
  padding-inline: var(--space2);
  margin-bottom: var(--space2);
}
.webpage-body .footer-col--center .footer-col__title,
.layout-preview .footer-col--center .footer-col__title {
  text-align: center;
}
.webpage-body .footer-col--center .footer-col__image,
.layout-preview .footer-col--center .footer-col__image {
  margin-inline: auto;
}
.webpage-body .footer-col--right .footer-col__image,
.layout-preview .footer-col--right .footer-col__image {
  margin-left: auto;
}

@media screen and (min-width: 980px) {
  .footer-col {
    flex: 1 1 0;
    max-width: 450px;
  }
  .footer-col--nature {
    flex: 1.4 1 0;
  }
  .footer-col--right {
    text-align: right;
    height: 100%;
    margin-top: auto;
  }
}
/* * * * * BOTTOM-LINE * * * * *
       * * * * * * * * * * * * * * * * * * */
.webpage-body .bottom-line,
.layout-preview .bottom-line {
  padding-block: var(--space24);
}
.webpage-body .bottom-line__pre-word,
.layout-preview .bottom-line__pre-word {
  margin-bottom: var(--space8);
}
.webpage-body .bottom-line__invitation,
.layout-preview .bottom-line__invitation {
  margin-bottom: var(--space1);
  font-size: var(--textLg);
  font-weight: 500;
  text-align: right;
}

.webpage-body .knock-knock-form,
.layout-preview .knock-knock-form {
  padding-block: var(--space12);
  text-align: center;
}
.webpage-body .knock-knock-form__password-label,
.layout-preview .knock-knock-form__password-label {
  margin-right: var(--space1);
}
.webpage-body .knock-knock-form__submit,
.layout-preview .knock-knock-form__submit {
  display: block;
  text-decoration: none;
  padding: var(--space2) var(--space4);
  margin: var(--space8) auto;
  background-color: var(--c-green-light);
  border-radius: 20px;
  border: 1px darkgrey dotted;
  box-shadow: var(--boxShadow);
  font-size: var(--textLg);
}
.webpage-body .knock-knock-form__error,
.layout-preview .knock-knock-form__error {
  color: darkred;
}

/* * * * * MUSE COMPONENT * * * * *
       * * * * * * * * * * * * * * * * * * */
/* * * * * NOTABLE WORDS * * * * *
       * * * * * * * * * * * * * * * * * * */
.webpage-body .notable-words,
.layout-preview .notable-words {
  text-align: center;
  padding-block: var(--space20) var(--space40);
}
.webpage-body .notable-words__title,
.layout-preview .notable-words__title {
  margin-bottom: var(--space10);
  font-family: Caveat, serif;
  font-size: var(--h1);
  letter-spacing: var(--letteringWide);
  line-height: var(--lineHeightTight);
}

/* * * * * SCENT * * * * *
       * * * * * * * * * * * * * * * * * * */
.webpage-body .scent,
.layout-preview .scent {
  display: flex;
  flex-direction: column;
}
.webpage-body .scent--alignment-center,
.layout-preview .scent--alignment-center {
  text-align: center;
}
.webpage-body .scent__title,
.layout-preview .scent__title {
  font-size: var(--h5);
  font-weight: 500;
  text-align: center;
}
.webpage-body .scent__image,
.layout-preview .scent__image {
  width: 50px;
  height: 50px;
  margin: var(--space4) auto;
  text-align: center;
}
.webpage-body .scent__link,
.layout-preview .scent__link {
  padding: var(--space4);
  font-style: italic;
  font-weight: 500;
}

/* * * * * SOUND * * * * *
       * * * * * * * * * * * * * * * * * * */
.webpage-body .sound,
.layout-preview .sound {
  margin-inline: auto;
  max-width: 800px;
  padding-block: var(--space2);
}
@media screen and (min-width: 520px) {
  .webpage-body .sound,
  .layout-preview .sound {
    padding-block: var(--space4);
  }
}
.webpage-body .sound__title,
.layout-preview .sound__title {
  font-family: RockSalt, serif;
  letter-spacing: var(--letteringWide);
  font-size: var(--h5);
}
.webpage-body .sound__content,
.layout-preview .sound__content {
  padding-left: var(--space2);
}
@media screen and (min-width: 520px) {
  .webpage-body .sound__content,
  .layout-preview .sound__content {
    padding-left: var(--space10);
  }
}
.webpage-body .sound__file,
.layout-preview .sound__file {
  height: 33px;
  width: 400px;
  max-width: 100%;
  margin-top: var(--space7);
  border-radius: 30px;
  background-color: var(--c-green-light);
  filter: grayscale(100%) sepia(100%) hue-rotate(80deg) brightness(120%) opacity(0.8);
}
.webpage-body .sound__description,
.layout-preview .sound__description {
  padding-inline: var(--space1);
  font-style: italic;
  font-size: var(--textSm);
}

/* * * * * SPARK COMPONENT * * * * *
       * * * * * * * * * * * * * * * * * * */
.webpage-body .spark,
.layout-preview .spark {
  position: relative;
}
.webpage-body .spark__image,
.layout-preview .spark__image {
  width: 100%;
  opacity: 0.9;
}
.webpage-body .spark__image img,
.layout-preview .spark__image img {
  display: block;
  height: 100%;
}
.webpage-body .spark__image--mobile,
.layout-preview .spark__image--mobile {
  height: 50vw;
}
.webpage-body .spark__text,
.layout-preview .spark__text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}
.webpage-body .spark__title,
.layout-preview .spark__title {
  font-size: var(--h1);
}
.webpage-body .spark__subtitle,
.layout-preview .spark__subtitle {
  font-size: var(--h2);
}

/* * * * * TASTE * * * * *
       * * * * * * * * * * * * * * * * * * */
.webpage-body,
.layout-preview {
  /*     C I R C L E       */
  /* * * * * * * * * * * * */
  /*   R E C T A N G L E   */
  /* * * * * * * * * * * * */
}
.webpage-body .taste,
.layout-preview .taste {
  display: grid;
  grid-gap: var(--space16);
  --block-padding: var(--space12);
  --hover-offset: var(--space16);
  --hover-offset-doubled: calc(var(--hover-offset) * 2);
  --tight-hover-offset: var(--space10);
  --tight-hover-offset-doubled: calc(var(--tight-hover-offset) * 2);
  transition: padding-inline 500ms ease-out, background-color 500ms ease-out, box-shadow 500ms ease-out;
}
.webpage-body .taste__words,
.layout-preview .taste__words {
  padding-bottom: var(--block-padding);
}
.webpage-body .taste-link-wrapper a,
.layout-preview .taste-link-wrapper a {
  color: var(--cw-text);
  text-decoration: none;
}
.webpage-body .taste--tight-density,
.layout-preview .taste--tight-density {
  grid-gap: var(--space6);
}
.webpage-body .taste__image,
.layout-preview .taste__image {
  --height: 250px;
  margin: 0 auto;
}
.webpage-body .taste__title,
.layout-preview .taste__title {
  font-size: var(--h4);
  font-weight: 500;
  margin-bottom: var(--space6);
}
.webpage-body .taste__title--tight-density,
.layout-preview .taste__title--tight-density {
  margin-block: var(--space3);
}
.webpage-body .taste__link,
.layout-preview .taste__link {
  color: var(--cw-link);
}
@media screen and (min-width: 720px) {
  .webpage-body .taste,
  .layout-preview .taste {
    --tasteWordWidth: 20fr;
    --tasteImageWidth: 2fr;
    grid-template-columns: var(--tasteImageWidth) var(--tasteWordWidth);
    grid-auto-flow: column;
    align-items: center;
  }
  .webpage-body .taste__words,
  .layout-preview .taste__words {
    padding-block: var(--block-padding);
  }
  .webpage-body .taste__left,
  .layout-preview .taste__left {
    padding-right: var(--hover-offset-doubled);
  }
  .webpage-body .taste--is-link:hover, .webpage-body .taste--is-link:active,
  .layout-preview .taste--is-link:hover,
  .layout-preview .taste--is-link:active {
    background-color: rgba(0, 0, 0, 0.03);
    box-shadow: var(--boxShadowSmall);
    border-radius: 6px;
    cursor: pointer;
  }
  .webpage-body .taste--tight-density,
  .layout-preview .taste--tight-density {
    grid-gap: var(--space10);
  }
  .webpage-body .taste.taste__right,
  .layout-preview .taste.taste__right {
    grid-template-columns: var(--tasteWordWidth) var(--tasteImageWidth);
  }
  .webpage-body .taste.taste__right .taste__image,
  .layout-preview .taste.taste__right .taste__image {
    grid-column: 2/3;
  }
  .webpage-body .taste.taste__right .taste__words,
  .layout-preview .taste.taste__right .taste__words {
    grid-column: 1/2;
  }
}
@media screen and (min-width: 980px) {
  .webpage-body .taste,
  .layout-preview .taste {
    grid-gap: var(--space20);
  }
  .webpage-body .taste--tight-density,
  .layout-preview .taste--tight-density {
    grid-gap: var(--space10);
  }
  .webpage-body .taste__image,
  .layout-preview .taste__image {
    --height: 280px;
  }
  .webpage-body .taste__image.taste__image--tight-density,
  .layout-preview .taste__image.taste__image--tight-density {
    --height: 170px;
  }
}
.webpage-body .taste__image--circle,
.layout-preview .taste__image--circle {
  --diameter: var(--height);
  width: var(--diameter);
  height: var(--diameter);
  padding-top: var(--block-padding);
}
.webpage-body .taste__image--circle.taste__image--tight-density,
.layout-preview .taste__image--circle.taste__image--tight-density {
  --diameter: 160px;
}
.webpage-body .taste__image--circle img,
.layout-preview .taste__image--circle img {
  border-radius: 100%;
  box-shadow: var(--boxShadowStrong);
  border: var(--border);
}
@media screen and (min-width: 720px) {
  .webpage-body .taste__image--circle,
  .layout-preview .taste__image--circle {
    padding-block: var(--block-padding);
  }
  .webpage-body .taste--tight-density.taste__image--circle,
  .layout-preview .taste--tight-density.taste__image--circle {
    padding-block: var(--tight-hover-offset);
  }
  .webpage-body .taste__right:has(.taste__image--circle),
  .layout-preview .taste__right:has(.taste__image--circle) {
    padding-right: var(--hover-offset-doubled);
  }
  .webpage-body .taste--is-link:hover:has(.taste__image--circle), .webpage-body .taste--is-link:active:has(.taste__image--circle),
  .layout-preview .taste--is-link:hover:has(.taste__image--circle),
  .layout-preview .taste--is-link:active:has(.taste__image--circle) {
    padding-inline: var(--hover-offset);
  }
  .webpage-body .taste--tight-density.taste__image--circle,
  .layout-preview .taste--tight-density.taste__image--circle {
    padding-block: var(--tight-hover-offset);
  }
  .webpage-body .taste--tight-density.taste__image--circle.taste__left,
  .layout-preview .taste--tight-density.taste__image--circle.taste__left {
    padding-right: var(--tight-hover-offset-doubled);
  }
  .webpage-body .taste--tight-density.taste__image--circle.taste__right,
  .layout-preview .taste--tight-density.taste__image--circle.taste__right {
    padding-right: var(--tight-hover-offset-doubled);
  }
  .webpage-body .taste--tight-density.taste__image--circle.taste--is-link:hover, .webpage-body .taste--tight-density.taste__image--circle.taste--is-link:active,
  .layout-preview .taste--tight-density.taste__image--circle.taste--is-link:hover,
  .layout-preview .taste--tight-density.taste__image--circle.taste--is-link:active {
    padding-inline: var(--tight-hover-offset);
  }
}
.webpage-body .taste__image--rectangle,
.layout-preview .taste__image--rectangle {
  min-height: 100%;
  height: var(--height);
  width: 100%;
  transition: width 500ms ease-out;
}
.webpage-body .taste__image--rectangle img,
.layout-preview .taste__image--rectangle img {
  border-radius: 0;
  transition: border-radius 500ms ease-out;
}
@media screen and (max-width: 720px) {
  .webpage-body .taste:has(.taste__image--rectangle),
  .layout-preview .taste:has(.taste__image--rectangle) {
    grid-gap: var(--space8);
  }
  .webpage-body .taste--normal-density .taste__image--rectangle,
  .layout-preview .taste--normal-density .taste__image--rectangle {
    height: calc(var(--height) + var(--space6));
  }
}
@media screen and (min-width: 720px) {
  .webpage-body .taste__image--rectangle,
  .layout-preview .taste__image--rectangle {
    width: var(--height);
  }
  .webpage-body .taste__right .taste__image--rectangle,
  .layout-preview .taste__right .taste__image--rectangle {
    width: calc(var(--height) + var(--hover-offset));
  }
  .webpage-body .taste--is-link:hover.taste__right:has(.taste__image--rectangle), .webpage-body .taste--is-link:active.taste__right:has(.taste__image--rectangle),
  .layout-preview .taste--is-link:hover.taste__right:has(.taste__image--rectangle),
  .layout-preview .taste--is-link:active.taste__right:has(.taste__image--rectangle) {
    padding-left: var(--hover-offset);
    padding-right: 0;
  }
  .webpage-body .taste--is-link:hover.taste__left .taste__image--rectangle, .webpage-body .taste--is-link:active.taste__left .taste__image--rectangle,
  .layout-preview .taste--is-link:hover.taste__left .taste__image--rectangle,
  .layout-preview .taste--is-link:active.taste__left .taste__image--rectangle {
    width: calc(var(--height) + var(--hover-offset));
  }
  .webpage-body .taste--is-link:hover.taste__right .taste__image--rectangle, .webpage-body .taste--is-link:active.taste__right .taste__image--rectangle,
  .layout-preview .taste--is-link:hover.taste__right .taste__image--rectangle,
  .layout-preview .taste--is-link:active.taste__right .taste__image--rectangle {
    width: var(--height);
  }
  .webpage-body .taste--is-link:hover .taste__image--rectangle img, .webpage-body .taste--is-link:active .taste__image--rectangle img,
  .layout-preview .taste--is-link:hover .taste__image--rectangle img,
  .layout-preview .taste--is-link:active .taste__image--rectangle img {
    border-radius: 6px;
  }
}

/* * * * * WORD * * * * *
       * * * * * * * * * * * * * * * * * * */
.webpage-body,
.layout-preview {
  /* optimally share with other h4-blocks like taste title */
}
.webpage-body .word,
.layout-preview .word {
  padding-top: var(--space4);
}
.webpage-body .word__text,
.layout-preview .word__text {
  padding-block: var(--space2) var(--space8);
}
.webpage-body .word__title,
.layout-preview .word__title {
  font-size: var(--h4);
  font-weight: bold;
  margin-bottom: var(--space2);
}
.webpage-body .word__text p:not(:first-child),
.layout-preview .word__text p:not(:first-child) {
  margin-block: var(--space8) 0;
}
.webpage-body .word__text ul,
.layout-preview .word__text ul {
  margin-top: 0;
}
.webpage-body .word__heading-link-button,
.layout-preview .word__heading-link-button {
  top: 8px;
}

/* * * * * PREVIEW NAVIGATION * * * * *
       * * * * * * * * * * * * * * * * * * */
.layout-preview .entrance--preview-navigation a {
  font-size: 0.95rem;
}
.layout-preview .entrance--preview-navigation .navigation-bar__logo {
  width: 50px;
}
.layout-preview .entrance--preview-navigation .navigation-bar {
  height: calc(var(--navigation-bar-height) - 17px);
}

/* * * * * PREVIEW CONTENT PIECES * * * *
       * * * * * * * * * * * * * * * * * * */
.available-content-pieces {
  background-color: #d9eff7;
  padding: var(--space5) var(--space8);
  border-radius: 10px;
}

.content-pieces {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space4);
  margin-bottom: var(--space2);
}

.content-pieces, .content-piece:after {
  border-bottom: 0;
}

.content-piece {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.content-piece__title {
  font-weight: bold;
}

.content-piece__image {
  border: 1px solid black !important;
  margin-top: var(--space1);
}

@media screen and (min-width: 980px) {
  .content-pieces {
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }
}
/* * * * * FOOTER * * * * *
       * * * * * * * * * * * * * * * * * * */
.webpage-body .footer-wrapper,
.layout-preview .footer-wrapper {
  border-block: var(--border);
  border-width: 3px;
  border-color: var(--cw-navigation-link);
}
.webpage-body .footer,
.layout-preview .footer {
  display: flex;
  flex-direction: column;
  gap: var(--space12);
  justify-content: space-evenly;
  align-items: center;
  padding-block: var(--space12) var(--space4);
}
.webpage-body .footer__copyright,
.layout-preview .footer__copyright {
  padding-top: var(--space6);
}
@media screen and (min-width: 520px) {
  .webpage-body .footer,
  .layout-preview .footer {
    padding-block: var(--space16) var(--space8);
  }
}
@media screen and (min-width: 980px) {
  .webpage-body .footer,
  .layout-preview .footer {
    flex-direction: row;
    justify-content: space-between;
    padding-block: var(--space8) var(--space14);
  }
  .webpage-body .footer--one-column,
  .layout-preview .footer--one-column {
    justify-content: flex-end;
  }
}

/* * * * * NAVIGATION ACCORDION * * * * *
       * * * * * * * * * * * * * * * * * * */
.webpage-body .navigation-accordion,
.layout-preview .navigation-accordion {
  border-block: var(--border);
  border-width: 2px;
  text-align: right;
  background-color: var(--cw-navigation);
}
.webpage-body .navigation-accordion__link,
.layout-preview .navigation-accordion__link {
  display: block;
  padding-block: var(--space4);
  margin-inline: var(--space8);
  font-size: var(--textXl);
  font-weight: 300;
  font-style: italic;
}
.webpage-body .navigation-accordion__link .nav-active,
.layout-preview .navigation-accordion__link .nav-active {
  font-size: var(--h6);
  font-weight: normal;
  letter-spacing: 0.4rem;
}
.webpage-body .navigation-accordion__link:not(:last-child),
.layout-preview .navigation-accordion__link:not(:last-child) {
  border-bottom: var(--border);
}
.webpage-body .navigation-accordion__holder,
.layout-preview .navigation-accordion__holder {
  display: block;
  height: var(--space8);
  border-block: var(--border);
  border-width: 2px;
  background-color: var(--cw-navigation);
}
@media screen and (min-width: 520px) {
  .webpage-body .navigation-accordion__link,
  .layout-preview .navigation-accordion__link {
    padding-block: var(--space5);
    margin-inline: var(--space12);
    font-weight: 500;
  }
  .webpage-body .navigation-accordion__link .nav-active,
  .layout-preview .navigation-accordion__link .nav-active {
    font-size: var(--h5);
    font-weight: bold;
  }
}

/* * * * * NAVIGATION * * * * *
       * * * * * * * * * * * * * * * * * * */
:root {
  --navigation-bar-height: var(--space24);
}

.webpage-body .navigation-bar__holder,
.layout-preview .navigation-bar__holder {
  width: 100%;
  height: var(--navigation-bar-height);
}
.webpage-body .navigation-bar,
.layout-preview .navigation-bar {
  width: 100%;
  height: var(--navigation-bar-height);
  display: flex;
  justify-items: center;
  border-block: var(--border);
  border-color: var(--cw-navigation-link);
  border-width: 2px;
  background-color: var(--cw-navigation);
}
.webpage-body .navigation-bar--mobile,
.layout-preview .navigation-bar--mobile {
  position: fixed;
  top: 0;
  z-index: 10;
  width: 100%;
}
.webpage-body .navigation-bar__inner,
.layout-preview .navigation-bar__inner {
  width: 100%;
  display: grid;
  grid-template-columns: 4fr 1fr 4fr;
  place-items: center;
}
.webpage-body .navigation-bar__logo,
.layout-preview .navigation-bar__logo {
  position: absolute;
  transform: translateY(-50%) translateX(-50%);
  width: 54px;
}
.webpage-body .navigation-bar__logo--size-medium,
.layout-preview .navigation-bar__logo--size-medium {
  width: 120px;
  transform: translateY(-10%) translateX(-50%);
}
.webpage-body .navigation-bar__logo--size-big,
.layout-preview .navigation-bar__logo--size-big {
  width: 170px;
  transform: translateY(-5%) translateX(-50%);
}
@media screen and (min-width: 520px) {
  .webpage-body .navigation-bar__logo,
  .layout-preview .navigation-bar__logo {
    width: 60px;
  }
  .webpage-body .navigation-bar__logo--size-medium,
  .layout-preview .navigation-bar__logo--size-medium {
    width: 170px;
  }
  .webpage-body .navigation-bar__logo--size-big,
  .layout-preview .navigation-bar__logo--size-big {
    width: 220px;
  }
}
.webpage-body .navigation-bar__logo a:hover,
.layout-preview .navigation-bar__logo a:hover {
  filter: none;
}
.webpage-body .navigation-bar__logo img,
.layout-preview .navigation-bar__logo img {
  position: relative;
  top: 0;
  border: var(--border);
  border-radius: 100%;
  box-shadow: var(--boxShadow);
  transition: all 100ms ease-in-out;
}
.webpage-body .navigation-bar__logo--style-imageOnly img,
.layout-preview .navigation-bar__logo--style-imageOnly img {
  position: relative;
  top: 0;
  border: none;
  box-shadow: none;
  transition: all 100ms ease-in-out;
}
.webpage-body .navigation-bar__logo--size-medium img,
.webpage-body .navigation-bar__logo--size-big img,
.layout-preview .navigation-bar__logo--size-medium img,
.layout-preview .navigation-bar__logo--size-big img {
  border-width: 2px;
}
.webpage-body .navigation-bar__logo img:active,
.layout-preview .navigation-bar__logo img:active {
  top: 2px;
  box-shadow: var(--boxShadowSmall);
}
.webpage-body .navigation-bar__links,
.layout-preview .navigation-bar__links {
  display: flex;
  justify-content: space-around;
  height: 100%;
  width: 100%;
  font-size: var(--textXl);
  font-weight: 400;
}
.webpage-body .navigation-bar__link,
.layout-preview .navigation-bar__link {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  padding-inline: var(--space5);
  text-align: center;
}
.webpage-body .navigation-bar__links a.nav-active,
.layout-preview .navigation-bar__links a.nav-active {
  font-size: var(--h6);
  font-weight: bold;
  letter-spacing: 0.3rem;
}
.webpage-body .navigation-bar__accordion,
.layout-preview .navigation-bar__accordion {
  height: 30px;
  width: 40px;
  justify-self: end;
  padding-right: var(--space6);
}
.webpage-body button.navigation-bar__accordion,
.layout-preview button.navigation-bar__accordion {
  border: none;
  box-shadow: none;
}
.webpage-body button.navigation-bar__accordion::before,
.layout-preview button.navigation-bar__accordion::before {
  border-radius: 0;
}
.webpage-body button.navigation-bar__accordion:hover:not(:disabled)::before,
.layout-preview button.navigation-bar__accordion:hover:not(:disabled)::before { /* Added */
  filter: none;
}

/* * * * * SITE LANGUAGES NAV * * * * *
       * * * * * * * * * * * * * * * * * * */
.webpage-body .site-languages-nav,
.layout-preview .site-languages-nav {
  padding-top: var(--space3);
  padding-inline: var(--besideSpacingMobile);
  text-align: right;
  font-family: RockSalt, serif;
  letter-spacing: var(--letteringWide);
}
.webpage-body .site-languages-nav__menu,
.layout-preview .site-languages-nav__menu {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  height: 30px;
}
.webpage-body .site-languages-nav__link-outer,
.layout-preview .site-languages-nav__link-outer {
  height: 100%;
  display: flex;
  align-items: center;
}
.webpage-body .site-languages-nav__link,
.layout-preview .site-languages-nav__link {
  font-size: var(--textMd);
}
.webpage-body .site-languages-nav__link--active,
.layout-preview .site-languages-nav__link--active {
  font-size: var(--textXl);
}
.webpage-body a.site-languages-nav__link,
.layout-preview a.site-languages-nav__link {
  color: var(--c-green);
  text-decoration: none;
}
.webpage-body a.site-languages-nav__link:hover,
.layout-preview a.site-languages-nav__link:hover {
  text-decoration: none;
}
.webpage-body a.site-languages-nav__link--active,
.layout-preview a.site-languages-nav__link--active {
  color: var(--c-green-dark);
}
.webpage-body .site-languages-nav__spacer-point,
.layout-preview .site-languages-nav__spacer-point {
  display: inline-block;
  margin-top: var(--space1);
  width: 2px;
  height: 2px;
  margin-inline: var(--space4);
  border-radius: 100%;
  background-color: var(--c-green);
}
.webpage-body .site-languages-nav__spacer-line,
.layout-preview .site-languages-nav__spacer-line {
  display: none;
}
@media screen and (min-width: 520px) {
  .webpage-body .site-languages-nav,
  .layout-preview .site-languages-nav {
    padding-top: var(--space6);
    padding-inline: var(--besideSpacing);
  }
  .webpage-body .site-languages-nav__link,
  .layout-preview .site-languages-nav__link {
    font-size: var(--textLg);
  }
  .webpage-body .site-languages-nav__link--active,
  .layout-preview .site-languages-nav__link--active {
    font-size: var(--textLg);
  }
  .webpage-body .site-languages-nav__spacer-point,
  .layout-preview .site-languages-nav__spacer-point {
    margin-inline: var(--space6);
  }
  .webpage-body .site-languages-nav__spacer-line,
  .layout-preview .site-languages-nav__spacer-line {
    position: relative;
    top: -4px;
    margin-left: auto;
    width: 160px;
    display: block;
  }
}

/* * * * * CHOSEN SCENTS * * * * *
       * * * * * * * * * * * * * * * * * * */
.webpage-body .chosenScents,
.layout-preview .chosenScents {
  padding-block: var(--space12) var(--space16);
  display: grid;
  grid-gap: var(--space12);
}
@media screen and (min-width: 980px) {
  .webpage-body .chosenScents,
  .layout-preview .chosenScents {
    padding-block: var(--space12) var(--space24);
    grid-template-columns: 1fr 1fr 1fr;
  }
}
@media screen and (min-width: 1200px) {
  .webpage-body .chosenScents,
  .layout-preview .chosenScents {
    grid-gap: var(--space16);
  }
}

/* * * * * CONTENT AREA * * * * *
       * * * * * * * * * * * * * * * * * * */
.webpage-body .content-area,
.layout-preview .content-area {
  padding-block: var(--space24);
  border-block: var(--border);
  border-color: var(--c-gray);
}
.webpage-body .content-area--solo,
.layout-preview .content-area--solo {
  padding-block: var(--space12);
}
.webpage-body .content-area__heading,
.layout-preview .content-area__heading {
  margin-block: var(--space4) var(--space10);
  font-size: var(--h3);
  font-weight: 500;
  font-style: italic;
  letter-spacing: var(--letteringWide);
}
.webpage-body .content-area__heading--tight-density,
.layout-preview .content-area__heading--tight-density {
  margin-block: var(--space4);
}
.webpage-body .content-area__heading-link-button,
.layout-preview .content-area__heading-link-button {
  top: 3px;
  left: -35px;
  font-size: var(--h3);
}
.webpage-body .content-area__heading-anchor,
.layout-preview .content-area__heading-anchor {
  position: absolute;
  top: -120px;
}
.webpage-body .content-piece--separate-with-border:not(:last-child),
.layout-preview .content-piece--separate-with-border:not(:last-child) {
  border-bottom: 1px solid #afa3a3;
}
.webpage-body .content-piece--separate-with-spaces,
.layout-preview .content-piece--separate-with-spaces {
  padding-block: var(--space8);
}
.webpage-body .content-piece--separate-with-border.content-piece--separate-with-spaces,
.layout-preview .content-piece--separate-with-border.content-piece--separate-with-spaces {
  padding-block: var(--space12);
}
.webpage-body .content-piece--separate-with-spaces.content-piece--tight-density,
.layout-preview .content-piece--separate-with-spaces.content-piece--tight-density {
  padding-block: var(--space4);
}
.webpage-body .content-piece--separate-with-border.content-piece--separate-with-spaces.content-piece--tight-density,
.layout-preview .content-piece--separate-with-border.content-piece--separate-with-spaces.content-piece--tight-density {
  padding-block: var(--space8);
}
.webpage-body .content-area .content-piece.content-piece--separate-with-spaces:first-of-type,
.layout-preview .content-area .content-piece.content-piece--separate-with-spaces:first-of-type {
  padding-top: 0;
}
.webpage-body .content-area .content-piece.content-piece--separate-with-spaces:last-of-type,
.layout-preview .content-area .content-piece.content-piece--separate-with-spaces:last-of-type {
  padding-bottom: 0;
}
@media screen and (min-width: 520px) {
  .webpage-body .content-area__heading,
  .layout-preview .content-area__heading {
    margin-block: var(--space4) var(--space16);
  }
  .webpage-body .content-area__heading--tight-density,
  .layout-preview .content-area__heading--tight-density {
    margin-block: var(--space4) var(--space6);
  }
}
@media screen and (min-width: 980px) {
  .webpage-body .content-area__heading-anchor,
  .layout-preview .content-area__heading-anchor {
    position: absolute;
    top: -20px;
  }
}

/* * * * * ENTRANCE * * * * *
       * * * * * * * * * * * * * * * * * * */
.webpage-body .entrance--mobile,
.layout-preview .entrance--mobile {
  display: block;
}
.webpage-body .entrance--desktop,
.layout-preview .entrance--desktop {
  display: none;
}
@media screen and (min-width: 980px) {
  .webpage-body .entrance--mobile,
  .layout-preview .entrance--mobile {
    display: none;
  }
  .webpage-body .entrance--desktop,
  .layout-preview .entrance--desktop {
    display: block;
  }
}

/* * * * * ERROR PAGE * * * * *
       * * * * * * * * * * * * * * * * * * */
.webpage-body .error,
.layout-preview .error {
  text-align: center;
  padding-block: var(--space16) var(--space40);
}
.webpage-body .error__title,
.layout-preview .error__title {
  padding-bottom: var(--space6);
}

/* * * * * KNOCK KNOCK PAGE * * * * *
       * * * * * * * * * * * * * * * * * * */
.webpage-body .knock-knock,
.layout-preview .knock-knock {
  padding-block: var(--space20);
  text-align: center;
}
.webpage-body .knock-knock__heading,
.layout-preview .knock-knock__heading {
  margin-bottom: var(--space6);
  font-family: Caveat, serif;
  font-size: var(--h1);
  letter-spacing: var(--letteringWide);
  line-height: var(--lineHeightTight);
}
.webpage-body .knock-knock__sub-heading,
.layout-preview .knock-knock__sub-heading {
  font-size: var(--h6);
}
@media screen and (min-width: 520px) {
  .webpage-body .knock-knock__sub-heading,
  .layout-preview .knock-knock__sub-heading {
    font-size: var(--h5);
  }
}

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