@font-face {
  font-family: "01 Aeternus Nano Variable Vf";
  src: url('../fonts/01-aeternus-nano-variable-weightitalic-VF.woff2') format("woff2");
  font-weight: 100 856;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "03 Aeternus Variable Vf";
  src: url('../fonts/03-aeternus-thin-variable-eightitalic-VF.woff2') format("woff2");
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "02 Aeternus Tall Variable Vf";
  src: url('../fonts/02-aeternus-tall-variable-weightitalic-VF.woff2') format("woff2");
  font-weight: 100 856;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "04 Aeternus Variable Vf";
  src: url('../fonts/04-aeternus-heavy-variable-eightitalic-VF.woff2') format("woff2");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Triple Shots;
  src: url('../fonts/TRIPLE-SHOTS.woff2') format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Josefin Sans;
  src: url('../fonts/JosefinSans-Bold.woff2') format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Josefin Sans;
  src: url('../fonts/JosefinSans-SemiBold.woff2') format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Josefin Sans;
  src: url('../fonts/JosefinSans-Regular.woff2') format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --simple-white: white;
  --sooty: #141414;
  --chocolate-hazelnut: #692917;
  --french-puce: #451609;
  --abyssal-depths: #052363;
  --mallow-root: #f7e9da;
  --overlay-image: #1817174f;
  --overlay-image-black: #4545455c;
  --overlay-menu: #1817179c;
  --life-force: #71b1e1;
  --cloudless: #d4effc;
}

body.page {
    color: var(--simple-white) !important;
}

body {
  background-color: var(--simple-white);
  color: var(--simple-white);
  font-family: Josefin Sans, Verdana, sans-serif;
  font-size: 1.2vw;
  line-height: 1.2;
}

a {
    text-decoration: none;
    color: inherit;
}

a:hover {
    text-decoration: none;
    color: inherit;
}

h2 {
  margin-top: 20px;
  margin-bottom: 10px;
  font-size: 32px;
  font-weight: 700;
  line-height: .5;
}

h3 {
  margin-top: 20px;
  margin-bottom: 10px;
  font-size: 24px;
  font-weight: 700;
  line-height: .8;
}

h4 {
  margin-top: 0;
  margin-bottom: 0;
  font-weight: 700;
}

p {
  margin-bottom: 0;
}

.nav-bar {
  z-index: 50;
  border-bottom: .12vw solid var(--simple-white);
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 2vw 4vw;
  display: flex;
  position: absolute;
  inset: 0% 0% auto;
  overflow: hidden;
}

.nav-bar.collapsible {
  z-index: 49;
  border-bottom-color: var(--sooty);
  background-color: var(--sooty);
  display: flex;
  position: absolute;
  inset: 0% 0% auto;
}

.nav-bar.main {
  border-bottom-color: #0000;
}

.hero-section {
  background-repeat: no-repeat;
  background-size: cover;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  width: 100vw;
  min-height: 100svh;
  max-height: 100vh;
  display: flex;
  position: relative;
}

.hero-section-background-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -1;

}

.hero-section picture {
    display: block;
    width: 100%;
    height: 100%;
}

.hero-section.second .hero-section-background-image {
  object-position: 100% 100%;
}

.hero-section.third .hero-section-background-image {
  object-position: 80% 100%;
}

.hero-section.first .hero-section-background-image {
  object-position: 50% 100%;
}

.section {
  grid-column-gap: 3vw;
  grid-row-gap: 3vw;
  background-color: var(--simple-white);
  flex-flow: column;
  padding: 5vw 7vw;
  display: flex;
  position: relative;
  overflow: hidden;
}

.section.category {
  background-color: var(--chocolate-hazelnut);
  padding-left: 7vw;
  padding-right: 7vw;
}

.main-headline {
  letter-spacing: -1px;
  text-transform: uppercase;
  margin-top: 0;
  margin-bottom: 1.4vw;
  font-family: "01 Aeternus Nano Variable Vf", Impact, sans-serif;
  font-size: 9vw;
  font-weight: 500;
  line-height: .55;
}

.main-headline.no-space {
  margin-bottom: 0;
}

.main-headline.banner {
  letter-spacing: 0;
  justify-content: center;
  align-self: stretch;
  margin-bottom: 0;
  padding-top: 1.2vw;
  padding-bottom: 1.2vw;
  font-size: 3vw;
  font-weight: 400;
  line-height: 0;
  display: flex;
}

.main-headline.tighter-mobile-newsletter {
  width: 100%;
  margin-bottom: 0;
  font-size: 5vw;
  font-family: '01 Aeternus Nano Variable Vf';
  font-weight: 600;
}

.main-headline.tighter-mobile-newsletter.instagram-link {
  width: 100%;
}

.main-headline.tighter-mobile-newsletter.pop-up {
  color: var(--french-puce);
}

.main-headline.hero-version {
  flex-flow: column;
  font-size: 11.5vw;
  display: flex;
  font-family: "01 Aeternus Nano Variable Vf", Impact, sans-serif;
  font-weight: 500;
  width: 13ch;
}

.sub-title {
  color: var(--french-puce);
}

.sub-title.smaller {
  text-align: left;
  width: 90%;
  font-size: 1.3vw;
}

.sub-title.smaller.space-before {
  margin-top: 1.2vw;
}

.sub-title.even-tighter {
  width: 60%;
}

.sub-title.hero-version {
  width: 35ch;
  font-size: 1.2vw;
  color: var(--simple-white);
}

.sub-title.tighter-desktop {
  width: 70%;
}

.main-headline-container {
  z-index: 2;
  grid-column-gap: 2.5vw;
  grid-row-gap: 2.5vw;
  flex-flow: column;
  flex: none;
  align-items: center;
  display: flex;
}

.main-headline-container.centre {
  text-align: center;
}

.main-headline-container.french-puce {
  color: var(--french-puce);
}

.main-headline-container.french-puce.centre {
  z-index: 2;
  align-self: center;
  position: relative;
}

.main-headline-container.french-puce.relative {
  align-items: flex-start;
  padding-right: 7vw;
  position: relative;
}

.main-headline-container.french-puce.relative.margin-left {
  padding-left: 7vw;
}

.main-headline-container.french-puce.relative.margin-left.modified {
  grid-column-gap: 0vw;
  grid-row-gap: 0vw;
}

.main-headline-container.simple-white {
  color: var(--simple-white);
}

.main-headline-container.simple-white.centre {
  align-self: center;
}

.main-headline-container.simple-white.relative {
  position: relative;
}

.main-headline-container.simple-white.relative.pop-up {
  margin-bottom: 1.2vw;
}

.feature-container {
  z-index: 2;
  position: relative;
}

.feature-container.event {
  grid-column-gap: 6vw;
  grid-row-gap: 6vw;
  flex-flow: column;
  width: 100%;
  display: flex;
}

.feature-container.event.less-space {
  grid-column-gap: 2vw;
  grid-row-gap: 2vw;
}

.underline-button {
  letter-spacing: .25vw;
  text-transform: uppercase;
  flex-flow: column;
  flex: none;
  justify-content: center;
  align-self: center;
  align-items: center;
  font-size: 1.3vw;
  font-weight: 700;
  line-height: 100%;
  text-decoration: none;
  display: flex;
}

.underline-button.french-puce {
  color: var(--french-puce);
}

.underline-button.french-puce.smaller {
  font-size: 1.8vh;
}

.underline-button.french-puce.smaller.left {
  align-self: flex-start;
}

.underline-button.simple-white {
  color: var(--simple-white);
  align-self: center;
}

.main-headline-title {
  cursor: default;
  flex: none;
  align-self: center;
}

.main-headline-title.left {
  justify-content: flex-start;
  align-self: flex-start;
}

.main-headline-title.relative {
  position: relative;
}

.main-headline-title.left-mobile {
  flex-flow: column;
  align-items: center;
  display: flex;
}

.main-headline-title.hero {
  align-self: flex-start;
}

.underline {
  background-color: var(--french-puce);
  width: 100%;
  height: .12vw;
}

.underline.simple-white {
  background-color: var(--simple-white);
}

.underline.simple-white.footer-separator {
  display: none;
}

.item-image {
  aspect-ratio: 2.5 / 2.8;
  object-fit: cover;
  width: 100%;
}

.item-image.full-size {
  aspect-ratio: 4 / 3;
}

.item-link {
  color: var(--simple-white);
  width: 100%;
  text-decoration: none;
}

.item-link:hover {
color: var(--simple-white);
}

.item-link.french-puce {
  grid-column-gap: 4vh;
  grid-row-gap: 4vh;
  color: var(--french-puce);
  text-align: center;
  flex-flow: column;
  align-items: center;
  display: flex;
}

.item-link.french-puce.left {
  grid-column-gap: 1.7vw;
  grid-row-gap: 1.7vw;
  background-color: var(--simple-white);
  border-radius: 1vh;
  align-items: flex-start;
  padding: 1.2vw;
}

.item-link.french-puce.left.blog {
  cursor: pointer;
}

.item-link.french-puce.left.event {
  cursor: pointer;
  width: 100%;
}

.item-link.french-puce.left.main-product.centre {
  justify-content: space-between;
  align-items: center;
}

.item-link.full-size {
  width: 100%;
  overflow: hidden;
}

.item-info {
  grid-column-gap: 1.7vw;
  grid-row-gap: 1.7vw;
  flex-flow: column;
  align-items: center;
  line-height: 1.2;
  display: flex;
}

.item-info.left {
  grid-column-gap: 1vw;
  grid-row-gap: 1vw;
  align-items: flex-start;
}

.item-info.right {
  justify-content: flex-end;
  align-items: flex-end;
}

.item-info.footer-option {
  grid-column-gap: 2vw;
  grid-row-gap: 2vw;
  align-items: flex-start;
}

.small-cap-title {
  letter-spacing: .18vw;
  text-transform: uppercase;
  font-size: .8vw;
  font-weight: 700;
  line-height: 100%;
}

.small-cap-title.bigger {
  font-size: .9vw;
}

.item-name {
  letter-spacing: -.5px;
  text-transform: uppercase;
  cursor: default;
  font-family: "01 Aeternus Nano Variable Vf", Impact, sans-serif;
  font-size: 3.5vw;
  font-weight: 600;
  line-height: .7;
}

.item-name.footer-version {
  font-size: 3.2vw;
  font-weight: 500;
}

.item-name.smaller {
  height: 4ch;
  font-size: 3.1vw;
}

.item-name.smaller.left {
  text-align: left;
  cursor: pointer;
  width: 99%;
  height: auto;
  font-size: 3.2vw;
  line-height: 70%;
}

.item-name.smaller.feature {
  color: var(--simple-white);
  text-align: center;
  font-weight: 500;
}

.item-image-container {
  aspect-ratio: 4 / 3;
  width: 100%;
  position: relative;
}

.item-image-container.blog.space-after {
  margin-bottom: .5vw;
}

.item-margin {
  z-index: 2;
  cursor: pointer;
  margin: 3%;
  position: absolute;
  inset: 0%;
}

.item-tag {
  border: .12vw solid var(--simple-white);
  background-color: var(--abyssal-depths);
  color: var(--simple-white);
  letter-spacing: .2vh;
  text-transform: uppercase;
  white-space: nowrap;
  background-image: url('../images/Gradient.png');
  background-position: 100% 0;
  background-repeat: no-repeat;
  background-size: cover;
  border-radius: .3vw;
  justify-content: center;
  align-items: center;
  padding: .85vw .7vw .7vw;
  font-weight: 700;
  display: flex;
  position: absolute;
  inset: 0% auto auto 0%;
}

.item-tag.blog {
  border-color: var(--french-puce);
  background-color: var(--mallow-root);
  color: var(--french-puce);
  background-image: none;
  position: static;
  inset: auto auto 0% 0%;
}

.item-tag.event {
  border-color: var(--simple-white);
  background-color: var(--abyssal-depths);
  color: var(--simple-white);
  background-image: none;
  position: static;
  inset: auto auto 0% 0%;
}

.outlined-button {
  border: .12vw solid var(--french-puce);
  letter-spacing: .5vh;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  justify-content: center;
  align-self: center;
  align-items: center;
  width: 100%;
  padding: 1.8vw 4vw;
  font-size: 2.5vh;
  font-weight: 700;
  line-height: .8;
  display: flex;
  position: relative;
  overflow: hidden;
}

.outlined-button.relative {
  z-index: 2;
  position: relative;
}

.plus-icon-container {
  border: .12vw solid var(--french-puce);
  color: var(--simple-white);
  border-radius: .3vw;
  justify-content: center;
  align-items: center;
  width: 2.3vw;
  height: 2.3vw;
  display: flex;
  position: absolute;
  inset: auto 0% 0% auto;
  overflow: hidden;
}

.plus-icon {
  color: var(--french-puce);
  flex-flow: column;
  justify-content: center;
  align-items: center;
  width: 75%;
  height: 75%;
  display: flex;
  position: relative;
  inset: 0%;
}

.plus-icon.banner {
  color: var(--simple-white);
  width: 1.8vw;
  height: 1.8vw;
  overflow: hidden;
}

.product-modal .plus-icon.banner {
  transform: rotate(45deg);
}

.plus-icon.popup {
  color: var(--french-puce);
  width: 1.8vw;
  height: 1.8vw;
  overflow: hidden;
}

.plus-icon.menu-version {
  color: var(--simple-white);
  width: 1.8vw;
  height: 1.8vw;
  display: none;
  overflow: hidden;
}

.price-tag {
  letter-spacing: .2vh;
  font-size: 1vw;
  font-weight: 600;
  line-height: 100%;
}

.items-container {
  display: flex;
}

.items-container.grid {
  grid-column-gap: 2.4vw;
  grid-row-gap: 2.4vw;
  flex-flow: wrap-reverse;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  width: 100%;
  max-width: 100%;
  display: grid;
}

.items-container.blog {
  grid-column-gap: 0vh;
  grid-row-gap: 0vh;
  width: 100%;
  overflow: auto;
}

.items-container.blog.horizontal-scroll {
  overflow: clip;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.items-container.blog.horizontal-scroll.next {
  display: flex;
  overflow: clip;
}

.items-container.blog.horizontal-scroll.first {
  position: relative;
  overflow: visible;
}

.category-name {
  letter-spacing: -1px;
  text-transform: uppercase;
  font-family: "01 Aeternus Nano Variable Vf", Impact, sans-serif;
  font-size: 5vw;
  font-weight: 500;
  line-height: 55%;
  position: absolute;
  inset: auto 0% 0% auto;
}

.category-text {
  font-size: 5vw;
  font-weight: 500;
  line-height: .5;
}

.slider {
  background-color: var(--mallow-root);
  justify-content: flex-start;
  align-self: flex-start;
  width: 18vw;
  height: .7vw;
  display: flex;
}

.slider-head {
  background-color: var(--chocolate-hazelnut);
  width: 50%;
  height: 100%;
}

.arrows {
  grid-column-gap: 1vw;
  grid-row-gap: 1vw;
  justify-content: center;
  display: flex;
}

.arrows.right {
  justify-content: flex-end;
  align-self: flex-end;
}

.round-button {
  border: .12vw solid var(--simple-white);
  cursor: pointer;
  border-radius: 100vh;
  width: 9vmin;
  height: 9vmin;
}

.round-button.french-puce {
  border-color: var(--french-puce);
  color: var(--french-puce);
  flex-flow: column;
  justify-content: center;
  align-self: center;
  align-items: center;
  display: flex;
  position: relative;
}

.arrow-container {
  justify-content: center;
  align-self: center;
  align-items: center;
  width: 100%;
  height: 100%;
  display: flex;
}

.arrow-icon {
  vertical-align: baseline;
  width: 2.5vmin;
  height: 2.5vmin;
}

.navigation {
  grid-column-gap: 3vh;
  grid-row-gap: 3vh;
  flex-flow: column;
  align-self: center;
  display: flex;
}

.navigation.wide {
  align-self: stretch;
  align-items: flex-end;
}

.navigation.no-show-tablet.wide {
  align-self: flex-end;
}

.navigation.no-show-tablet.wide.absolute {
  position: absolute;
  inset: 0% 0% auto auto;
}

.feature-banner {
  color: var(--french-puce);
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: cover;
  flex-flow: column;
  justify-content: space-between;
  align-items: flex-start;
  width: 100%;
  height: 30vw;
  overflow: hidden;
  position: relative;
}

.feature-banner-background-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -1;
}

.feature-banner.story {
  background-image: none;
  height: auto;
  overflow: hidden;
}

.feature-banner.newsletter {
  background-repeat: no-repeat;
  background-size: cover;
  justify-content: center;
  align-items: center;
  height: auto;
  padding-top: 3vw;
  padding-bottom: 3vw;
  display: flex;
  position: relative;
  overflow: hidden;
}

.copy-container {
  grid-column-gap: 3vw;
  grid-row-gap: 3vw;
  flex-flow: column;
  flex: none;
  justify-content: center;
  align-self: stretch;
  align-items: flex-start;
  padding: 5vw 7vw;
  display: flex;
  position: absolute;
  inset: 0% auto 0% 0%;
}

.copy-container.chocolate-hazelnut {
  z-index: 3;
  grid-column-gap: 4vw;
  grid-row-gap: 4vw;
  background-color: var(--chocolate-hazelnut);
  cursor: default;
  width: 50vw;
  margin-top: 5vw;
  margin-bottom: 5vw;
  margin-left: 7vw;
  padding-top: 5vw;
  padding-bottom: 5vw;
  padding-left: 5vw;
  position: relative;
}

.copy-container.relative {
  z-index: 3;
  grid-column-gap: 1.5vw;
  grid-row-gap: 1.5vw;
  align-self: flex-start;
  padding-top: 0;
  padding-bottom: 0;
  position: relative;
}

.copy-container.relative.instagram {
  grid-column-gap: 1vw;
  grid-row-gap: 1vw;
  padding-left: 7vw;
  padding-right: 7vw;
}

.button-container {
  cursor: pointer;
  display: flex;
  color: var(--simple-white);
}

.button-container.centre {
  justify-content: center;
  align-self: center;
  margin-top: 2.5vw;
}

.button-container.no-show-desktop {
  display: none;
}

.ad-banner {
  z-index: 20;
  background-color: var(--abyssal-depths);
  cursor: pointer;
  background-image: url('../images/Gradient.png');
  background-position: 50% 0;
  background-repeat: no-repeat;
  background-size: cover;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding-top: .55vw;
  padding-bottom: .4vw;
  display: flex;
  position: relative;
  overflow: hidden;
}

.close-ad-banner {
  cursor: pointer;
  align-self: center;
  margin-right: 2.5vh;
  position: absolute;
  inset: 0% 0% 0% auto;
  transform: rotate(45deg);
}

.logo {
  color: var(--simple-white);
}

.logo-back {
  z-index: 3;
  cursor: pointer;
  align-self: center;
  width: 11vw;
  display: flex;
  position: relative;
}

.nav-links {
  z-index: 3;
  grid-column-gap: 3.5vw;
  grid-row-gap: 3.5vw;
  flex: none;
  justify-content: center;
  align-self: center;
  align-items: center;
  height: 100%;
  display: flex;
  position: absolute;
  inset: 0%;
}

.nav-link {
  grid-column-gap: .1vh;
  grid-row-gap: .1vh;
  color: var(--simple-white);
  letter-spacing: .25vw;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  flex-flow: column;
  flex: none;
  justify-content: center;
  align-items: flex-end;
  margin-left: 0;
  margin-right: 0;
  font-size: .95vw;
  font-weight: 700;
  line-height: 1.3;
  text-decoration: none;
  display: flex;
  position: relative;
}

.icon-shop-all {
  margin-top: 0;
  margin-bottom: 4%;
  margin-right: 0;
  position: static;
}

.navbar-icon-right {
  color: var(--simple-white);
  width: 1.6vw;
  height: 1.6vw;
}

.right-nav {
  z-index: 3;
  grid-column-gap: 1.3vw;
  grid-row-gap: 1.3vw;
  justify-content: flex-end;
  align-items: baseline;
  display: flex;
  position: relative;
}

.button-fill {
  z-index: 1;
  background-color: var(--french-puce);
  width: 101%;
  height: 101%;
  position: absolute;
  inset: 100% 0% 0%;
}

.button-fill.simple-white {
  background-color: var(--simple-white);
}

.button-text {
  z-index: 2;
  text-align: center;
  letter-spacing: .25vw;
  align-items: stretch;
  font-size: 1.1vw;
  position: relative;
}

.overlay {
  z-index: 2;
  background-color: var(--overlay-image);
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0%;
}

.overlay.black {
  background-color: var(--overlay-image-black);
}

.overlay.tan {
  filter: contrast(120%);
  background-color: #3939392e;
}

.underline-container {
  grid-column-gap: .3vw;
  grid-row-gap: .3vw;
  flex-flow: column;
  justify-content: center;
  align-self: flex-end;
  display: flex;
}

.underline-container.smaller {
  font-size: 1vw;
}

.underline-container.smaller.shop-all {
  font-size: .9vw;
}

.navbar-icon {
  cursor: pointer;
  transition: opacity .2s;
}

.navbar-icon:hover {
  opacity: .6;
}

.review-section {
  background-color: var(--abyssal-depths);
  background-image: url('../images/Gradient.png');
  background-repeat: repeat;
  background-size: cover;
  justify-content: center;
  width: 100vw;
  height: 27vw;
  min-height: auto;
  padding-left: 7vw;
  padding-right: 7vw;
  display: flex;
  position: relative;
  overflow: hidden;
}

.body-copy {
  color: var(--simple-white);
  font-size: 1.3vw;
  line-height: 1.5;
}

.product-colour-outline {
  border: .12vw solid var(--chocolate-hazelnut);
  background-color: var(--simple-white);
  cursor: pointer;
  border-radius: 10vh;
  justify-content: center;
  align-items: center;
  width: 2.3vw;
  height: 2.3vw;
  display: flex;
}

.product-colours {
  grid-column-gap: .5vw;
  grid-row-gap: .5vw;
  display: flex;
  position: absolute;
  inset: auto auto 0% 0%;
}

.product-colour {
  background-color: #9ed07b;
  border-radius: 10vh;
  justify-content: center;
  align-items: center;
  width: 80%;
  height: 80%;
  display: flex;
}

.product-colour.beige {
  background-color: #e1b99a;
}

.product-colour.orange {
  background-color: #f57b34;
}

.standard-button {
  border: .12vw solid var(--abyssal-depths);
  background-color: var(--abyssal-depths);
  color: var(--simple-white);
  letter-spacing: .5vh;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  flex: none;
  justify-content: center;
  align-self: center;
  align-items: center;
  width: 100%;
  padding: 1.8vw 6.5vw;
  font-weight: 700;
  line-height: .8;
  display: flex;
  position: relative;
  overflow: hidden;
}

.standard-button.french-puce {
  border-color: var(--french-puce);
  background-color: var(--french-puce);
  color: var(--simple-white);
}

.standard-button.french-puce.shorter {
  padding-left: 4vw;
  padding-right: 4vw;
}

.link-container {
  grid-column-gap: .7vw;
  grid-row-gap: .7vw;
  cursor: pointer;
  justify-content: space-between;
  align-items: flex-end;
  display: flex;
}

.link-container.simple-white {
  color: var(--simple-white);
}

.small-arrow {
  align-self: center;
  width: 1.2vw;
  height: 100%;
}

.footer {
  grid-column-gap: 3vw;
  grid-row-gap: 3vw;
  background-color: var(--abyssal-depths);
  flex-flow: column;
  padding-top: 4vw;
  display: flex;
  overflow: hidden;
}

.footer-link {
  grid-column-gap: .2vw;
  grid-row-gap: .2vw;
  color: var(--simple-white);
  text-transform: none;
  flex-flow: column;
  justify-content: center;
  align-items: flex-end;
  font-size: 1.2vw;
  line-height: 1;
  text-decoration: none;
  display: flex;
}

.footer-link.social {
  transition: opacity .2s;
}

.footer-link.social:hover {
  opacity: .6;
}

.top-part {
  justify-content: space-between;
  padding-left: 7vw;
  padding-right: 7vw;
  display: flex;
}

.social-link {
  width: 1.5vw;
  height: 1.5vw;
}

.social-links {
  grid-column-gap: .9vw;
  grid-row-gap: .9vw;
  justify-content: flex-end;
  display: flex;
}

.bottom-part {
  background-image: url('../images/Gradient.png');
  background-position: 100% 100%;
  background-repeat: no-repeat;
  background-size: cover;
  flex-flow: column;
  justify-content: space-between;
  align-items: flex-end;
  width: 100%;
  line-height: 100%;
  display: flex;
}

.logo-footer {
  width: 18vw;
}

.home-link-footer {
  color: var(--simple-white);
  flex-flow: row;
  justify-content: flex-end;
  align-items: flex-end;
  display: flex;
}

.copyright {
  color: var(--simple-white);
  text-align: right;
  letter-spacing: .15vw;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: default;
  background-color: #0000;
  align-self: flex-end;
  margin-bottom: 0;
  font-size: .7vw;
  font-weight: 700;
}

.small-print {
  color: var(--simple-white);
  letter-spacing: .15vw;
  text-transform: uppercase;
  white-space: nowrap;
  align-self: flex-end;
  font-size: .7vw;
  font-weight: 700;
  text-decoration: none;
  display: flex;
}

.bottom-right {
  grid-column-gap: 2vw;
  grid-row-gap: 2vw;
  flex-flow: row;
  justify-content: space-between;
  width: 100%;
  padding: 1vw 7vw .5vw;
  display: flex;
}

.last-line {
  color: var(--simple-white);
  justify-content: space-between;
  align-self: flex-start;
  display: flex;
}

.right-side {
  grid-column-gap: 1.5vw;
  grid-row-gap: 1.5vw;
  flex-flow: row;
  justify-content: space-between;
  display: flex;
}

.instagram-image {
  aspect-ratio: 4 / 5;
  object-fit: cover;
  width: 20vw;
}

.instagram-images {
  grid-column-gap: 1.3vw;
  grid-row-gap: 1.3vw;
  justify-content: flex-end;
  display: flex;
}

.instagram-embed {
  grid-column-gap: 2vw;
  grid-row-gap: 2vw;
  flex-flow: column;
  padding-top: 5vw;
  padding-bottom: 5vw;
  display: flex;
  position: relative;
  overflow: hidden;
}

.image {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.wrapper-instagram-embed {
  z-index: 2;
  grid-column-gap: 1.3vw;
  grid-row-gap: 1.3vw;
  justify-content: flex-end;
  display: flex;
  position: relative;
}

.instagram-follow {
  color: var(--french-puce);
  letter-spacing: .2vw;
  text-transform: uppercase;
  font-size: 1.5vw;
  font-weight: 700;
  text-decoration: none;
}

.print-text-subcribe {
  color: var(--simple-white);
  justify-content: flex-start;
  align-items: flex-start;
  width: 65%;
  margin-bottom: 0;
  font-size: 1vw;
  font-weight: 400;
  line-height: 1.5;
  text-decoration: none;
}

.print-text-subcribe.pop-up {
  color: var(--french-puce);
}

.terms-and-conditions {
  white-space: nowrap;
  text-decoration: underline;
}

.text-field {
  border: .2vh solid var(--simple-white);
  color: var(--simple-white);
  background-color: #0000;
  margin-bottom: 1.2vw;
  padding: 2.3vw 5vw 2vw 1.6vw;
  font-size: 1.4vw;
}

.text-field:focus {
  border-color: var(--abyssal-depths);
  background-color: var(--simple-white);
  color: var(--abyssal-depths);
}

.text-field::placeholder {
  color: var(--simple-white);
}

.text-field.pop-up {
  border-color: var(--french-puce);
  color: var(--french-puce);
}

.text-field.pop-up::placeholder {
  color: var(--chocolate-hazelnut);
}

.text-field.newsletter-version {
  width: 80vmin;
}

.suscribe {
  grid-column-gap: 3vh;
  grid-row-gap: 3vh;
  cursor: default;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  display: flex;
}

.suscribe.pop-up {
  flex-flow: column;
  align-items: stretch;
}

.subcribe-block {
  margin-bottom: 0;
}

.submit-button {
  z-index: 3;
  letter-spacing: .25vw;
  text-transform: uppercase;
  vertical-align: middle;
  background-color: #0000;
  margin-bottom: -1%;
  padding: 1.8vw 4.5vw;
  font-size: 1vw;
  font-weight: 700;
  line-height: .8;
  position: relative;
}

.submit-button.pop-up {
  width: 100%;
  background-color: var(--french-puce);
}

.subcribe-container {
  flex-flow: column;
  width: 70%;
  display: flex;
}

.subcribe-container.pop-up {
  width: 100%;
}

.submit-button-container {
  border: .2vh solid var(--abyssal-depths);
  background-color: var(--abyssal-depths);
  color: var(--simple-white);
  cursor: pointer;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  margin-bottom: -1%;
  display: flex;
  position: relative;
  overflow: hidden;
}

.submit-button-container.pop-up {
  border-color: var(--french-puce);
  background-color: var(--french-puce);
}

.event-info {
  flex-flow: column;
  justify-content: space-between;
  align-items: flex-start;
  display: flex;
  position: absolute;
  inset: 0% 0% auto auto;
}

.lower-breakpoint {
  display: none;
}

.banner-smaller-breakpoint {
  justify-content: flex-end;
  align-items: center;
  display: flex;
}

.article-date {
  letter-spacing: .1vh;
  text-transform: uppercase;
  margin-top: 1vh;
  font-size: 1vw;
  font-weight: 700;
  line-height: 100%;
}

.menu {
  cursor: pointer;
  display: none;
}

.slider-blog {
  background-color: var(--mallow-root);
  align-self: center;
  width: 30vh;
  height: 1vh;
  display: none;
}

.slider-head-blog {
  background-color: var(--chocolate-hazelnut);
  width: 50%;
  height: 100%;
}

.horizontal-wrap {
  grid-column-gap: .5vh;
  grid-row-gap: .5vh;
  color: var(--simple-white);
  align-items: center;
  display: flex;
}

.instagram-embed-title {
  grid-column-gap: 1.8vw;
  grid-row-gap: 1.8vw;
  white-space: nowrap;
  align-items: baseline;
  display: flex;
  position: relative;
}

.xoxo {
  letter-spacing: -.25vw;
  cursor: default;
  font-family: Triple Shots, Arial, sans-serif;
  font-size: 6vw;
  line-height: 20%;
  transform: rotate(7deg);
}

.plus-wrapper {
  margin-bottom: 1.5vw;
}

.plus-wrapper.no-space {
  margin-bottom: 0;
}

.wrapper-footer-link {
  grid-column-gap: 1.5vw;
  grid-row-gap: 1.5vw;
  flex-flow: column;
  align-items: flex-start;
  display: flex;
}

.arrow-down {
  width: 2vh;
  height: 2vh;
}

.arrow-down-container {
  display: none;
}

.background-video {
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0%;
}

.hero-wrapper {
  flex-flow: row;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  margin-top: 1vh;
  padding-left: 4vw;
  padding-right: 4vw;
  display: flex;
}

.hero-content {
  z-index: 3;
  grid-column-gap: 3vw;
  grid-row-gap: 3vw;
  flex-flow: column;
  align-self: flex-start;
  align-items: flex-start;
  display: flex;
  position: relative;
}

.outlined-button-hero {
  border: .12vw solid var(--simple-white);
  letter-spacing: .5vh;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  align-self: center;
  width: 100%;
  padding: 1.8vw 4vw;
  font-size: 2.5vh;
  font-weight: 700;
  line-height: .8;
  position: relative;
  overflow: hidden;
  color: var(--simple-white);
}

.outlined-button-hero:hover {
  color: var(--simple-white);
  text-decoration: none;
}

.selector {
  z-index: 2;
  border: .13vw solid var(--simple-white);
  color: var(--simple-white);
  cursor: pointer;
  background-color: #0000;
  border-radius: 10vh;
  justify-content: center;
  align-self: center;
  align-items: center;
  width: 100%;
  height: 100%;
  transition: background-color .3s;
  position: absolute;
  inset: 0%;
}

.selector:hover {
  background-color: #fff3;
}

.selector.active {
  background-color: var(--simple-white);
}

.selector-wrapper {
  grid-column-gap: 1.5vw;
  grid-row-gap: 1.5vw;
  flex-flow: column;
  align-self: flex-end;
  display: flex;
}

.selector-container {
  z-index: 3;
  flex-flow: column;
  justify-content: center;
  align-self: flex-end;
  align-items: center;
  height: 100%;
  margin-right: 4vw;
  display: flex;
  position: absolute;
  inset: 0% 0% 0% auto;
}

.page-content-wrapper {
  z-index: 2;
  position: relative;
  overflow: clip;
}

.navbar-container {
  z-index: 25;
  justify-content: space-between;
  width: 100%;
  display: flex;
  position: sticky;
  inset: 0% 0% auto;
}

.slider-instance {
  width: 100vw;
  min-height: 100svh;
  max-height: 100vh;
  display: flex;
  position: relative;
  overflow: clip;
}

.slider-instance.v2 {
  background-color: #0000;
  align-self: center;
  height: 27vw;
  min-height: auto;
  max-height: none;
}

.hero-section-container {
  flex-flow: column;
  justify-content: center;
  align-items: center;
  width: 100vw;
  display: flex;
  position: relative;
}

.left-arrow, .right-arrow {
  display: none;
}

.slide-nav {
  flex-flow: column;
  margin-right: 2.5vh;
  padding-top: 0;
  font-size: 1vw;
  display: none;
  inset: 0% 0% 0% auto;
  transform: rotate(90deg);
}

.progress-ring {
  z-index: 1;
  color: #ffffff6b;
  cursor: pointer;
  border: .15vw solid #0000;
  border-radius: 10vh;
  justify-content: center;
  align-self: center;
  align-items: center;
  width: 1.5vw;
  height: 1.5vw;
  position: relative;
  inset: 0%;
}

.selector-dot-wrapper {
  flex: none;
  justify-content: center;
  align-self: center;
  align-items: center;
  width: 1.8vw;
  height: 1.8vw;
  display: flex;
  position: relative;
}

.progress-circle {
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0%;
}

.no-wrap {
  white-space: nowrap;
}

.slide {
  width: 100%;
  height: 100%;
}

.slider-track {
  align-self: center;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.divider {
  background-color: var(--simple-white);
  align-self: stretch;
  width: .12vw;
  height: 70%;
}

.review-text {
  text-align: center;
  width: 50%;
  font-family: Josefin Sans, Verdana, sans-serif;
  font-size: 2vw;
  font-weight: 400;
}

.review {
  grid-column-gap: 2vw;
  grid-row-gap: 2vw;
  color: var(--simple-white);
  flex-flow: column;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 27vw;
  padding-top: 4vw;
  padding-bottom: 4vw;
  display: flex;
}

.review-title {
  text-align: center;
  text-transform: uppercase;
  font-family: "01 Aeternus Nano Variable Vf", Impact, sans-serif;
  font-size: 4vw;
  font-style: italic;
  font-weight: 500;
  line-height: .8;
}

.star {
  color: var(--simple-white);
  width: 1vw;
  height: 1vw;
}

.star.french-puce {
  color: var(--french-puce);
  width: .8vw;
  height: .8vw;
}

.stars-container {
  grid-column-gap: .5vw;
  grid-row-gap: .5vw;
  align-items: center;
  display: flex;
}

.review-background {
  opacity: .02;
  color: var(--simple-white);
  mix-blend-mode: normal;
  width: 230vw;
  position: absolute;
  inset: -15% 0% 0% -10%;
}

.checkmark {
  color: var(--simple-white);
  flex-flow: column;
  justify-content: center;
  align-items: center;
  width: 60%;
  height: 60%;
  display: none;
  position: relative;
  inset: 0%;
}

.checkmark.active {
  display: block;
}

.custom-toast {
  z-index: 3;
  background-color: var(--overlay-image);
  justify-content: center;
  align-self: center;
  align-items: center;
  width: 100vw;
  height: 100vh;
  display: flex;
  position: fixed;
  overflow: hidden;
}

.custom-toast.hide-on-load {
  z-index: 2147483647;
  display: none;
  inset: 0%;
}

.popup-left {
  background-image: url('../images/StudioGrade_ToastImage.webp');
  background-position: 50%;
  background-size: cover;
  justify-content: center;
  align-self: center;
  align-items: center;
  width: 50%;
  height: 100%;
  display: flex;
  overflow: hidden;
}

.page-wrapper {
  flex-flow: column;
  align-items: stretch;
  display: flex;
  position: relative;
  overflow: clip;
}

.toast-content {
  z-index: 3;
  background-color: var(--mallow-root);
  justify-content: space-between;
  width: 60vw;
  height: 45vw;
  display: flex;
  position: relative;
  overflow: hidden;
}

.popup-right {
  justify-content: space-between;
  align-self: center;
  align-items: flex-start;
  width: 50%;
  height: 100%;
  padding: 2vw;
  display: flex;
  position: relative;
}

.close-toast {
  z-index: 2;
  cursor: pointer;
  align-self: flex-start;
  margin-top: 1.3vw;
  margin-right: 1.3vw;
  position: absolute;
  inset: 0% 0% 0% auto;
  transform: rotate(45deg);
}

.pop-up-text-container {
  z-index: 2;
  align-self: center;
  position: relative;
}

.pop-up-text {
  z-index: 2;
  color: var(--french-puce);
  text-align: center;
  letter-spacing: .25vw;
  text-transform: uppercase;
  align-items: stretch;
  margin-top: .5vw;
  font-size: .7vw;
  font-weight: 700;
  line-height: 100%;
  position: relative;
}

.toast-closer {
  z-index: 2;
  width: 100%;
  height: 100%;
  position: absolute;
}

.signature-background {
  z-index: 1;
  opacity: .03;
  color: var(--chocolate-hazelnut);
  align-self: center;
  width: 155%;
  position: absolute;
  inset: 0%;
}

.global-styles {
  display: none;
}

.horizontal-scroll-container {
  justify-content: center;
  align-self: flex-start;
  width: 100%;
  display: flex;
  position: relative;
  overflow: clip;
}

.dropdown-shop-all {
  z-index: 10;
  border-bottom: .12vw solid var(--simple-white);
  background-color: var(--sooty);
  justify-content: center;
  align-items: center;
  width: 100vw;
  padding: 5vw 4vw;
  display: none;
  position: absolute;
  inset: 0% 0% auto;
  transform: translate(0, 10.1vh);
}

.drop-down-row {
  grid-column-gap: 1.7vw;
  grid-row-gap: 1.7vw;
  flex-flow: column;
  display: flex;
}

.drop-down-link {
  grid-column-gap: .2vw;
  grid-row-gap: .2vw;
  color: var(--simple-white);
  text-transform: capitalize;
  flex-flow: column;
  justify-content: center;
  align-items: flex-start;
  font-size: 1.3vw;
  line-height: 120%;
  text-decoration: none;
  transition: opacity .2s;
  display: flex;
}

.drop-down-link:hover {
  opacity: .6;
}

.drop-down-title {
  grid-column-gap: .1vh;
  grid-row-gap: .1vh;
  color: var(--simple-white);
  letter-spacing: .25vw;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: default;
  flex-flow: column;
  flex: none;
  justify-content: center;
  align-items: flex-start;
  margin-bottom: 1.5vw;
  margin-left: 0;
  margin-right: 0;
  font-size: .95vw;
  font-weight: 700;
  line-height: 150%;
  text-decoration: none;
  display: flex;
  position: relative;
}

.dropdown-side {
  grid-column-gap: 2vw;
  grid-row-gap: 2vw;
  justify-content: space-between;
  width: 45%;
  display: flex;
  position: relative;
}

.dropdown-feature-image {
  aspect-ratio: 1;
  object-fit: cover;
  flex-flow: column;
  justify-content: center;
  width: 100%;
  text-decoration: none;
  display: flex;
  overflow: hidden;
}

.image-feature {
  object-fit: cover;
  max-width: none;
  height: 100%;
}

.dropdown-feature-link {
  grid-column-gap: 1.5vw;
  grid-row-gap: 1.5vw;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  width: 50%;
  height: 100%;
  text-decoration: none;
  display: flex;
  overflow: hidden;
}

.feature-dropdown-text {
  color: var(--simple-white);
  text-align: center;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  margin-bottom: 0;
  font-size: 1vw;
  font-weight: 400;
  line-height: 150%;
  text-decoration: none;
}

.dropdown-link-feature-container {
  grid-column-gap: 1vw;
  grid-row-gap: 1vw;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  display: flex;
}

.dropdown-inner {
  z-index: 10;
  grid-column-gap: 6vw;
  grid-row-gap: 6vw;
  justify-content: space-between;
  width: 100%;
  display: flex;
  position: relative;
}

.nav-bg-overlay {
  z-index: 1;
  background-color: var(--sooty);
  align-self: flex-start;
  width: 100%;
  height: 100%;
  display: none;
  position: absolute;
  inset: 0% 0% auto;
}

.main-navbar-container {
  position: absolute;
  inset: 0% 0% auto;
}

.hero-slider-container {
  flex-flow: column;
  justify-content: center;
  align-items: center;
  width: 100vw;
  min-height: 100svh;
  max-height: 100vh;
  display: flex;
  position: relative;
  color: var(--simple-white);
}

.hero-slider-container._2 {
  background-image: url('../images/Hero_Banner_1_Desktop.webp');
  background-position: 0 100%;
}

.hero-slider-container._3 {
  background-image: url('../images/Hero_Banner_StudioGrade_Desktop.webp');
  background-position: 80% 100%;
}

.hero-slider-container._1 {
  background-image: url('../images/Hero_Banner_Rayemi_Desktop.webp');
  background-position: 50% 100%;
}

.dropdown-menu {
  z-index: 200;
  width: 100vw;
  min-height: 100svh;
  max-height: 100vh;
  display: none;
  position: fixed;
  inset: 0% 0% auto;
  background-color: transparent;
}

.accordion-title {
  color: var(--simple-white);
  text-decoration: none;
}

.dropdown-menu-wrapper {
  min-height: 100svh;
  max-height: 100vh;
}

.dropdown-menu-lower {
  width: 100%;
  min-height: 100svh;
  max-height: 100vh;
  position: relative;
}

.menu-overlay {
  display: none;
}

.small-logo {
  align-self: center;
  width: 1.5vw;
  height: 1.5vw;
}

.small-logo.smaller {
  width: 1vw;
  height: 1vw;
  position: relative;
  top: -1px;
}

.paper-background {
  z-index: 1;
  opacity: .35;
  background-image: url('../images/white-fabric-texture.webp');
  background-position: 0 0;
  background-repeat: no-repeat;
  background-size: cover;
  position: absolute;
  inset: 0%;
}

.h1-hidden {
  z-index: 1;
  color: #0000;
  margin-top: 0;
  margin-bottom: 0;
  font-size: 1px;
  line-height: 1px;
  position: absolute;
  inset: 0%;
}

.header {
  z-index: 100;
  position: sticky;
  top: 0;
}

.success-message {
  background-color: var(--abyssal-depths);
  color: var(--simple-white);
}

.success-message.french-puce {
  background-color: var(--french-puce);
}

.error-message {
  color: var(--simple-white);
  background-color: #8b1a1a;
}

@media screen and (min-width: 1280px) {
  body {
    font-size: 2.3vh;
  }

  .nav-bar {
    border-bottom-width: .13vh;
    padding-top: 3.5vh;
    padding-bottom: 3.5vh;
  }

  .hero-section.second .hero-section-background-image {
    object-position: 95% 100%;
  }

  .hero-section.first .hero-section-background-image {
    object-position: 50%;
  }

  .section {
    grid-column-gap: 5vh;
    grid-row-gap: 5vh;
  }

  .main-headline {
    margin-bottom: 2vh;
    font-size: 15vh;
  }

  .main-headline.banner {
    padding-top: 2vh;
    padding-bottom: 2vh;
    font-size: 5vh;
  }

  .main-headline.tighter-mobile-newsletter, .main-headline.tighter-mobile-newsletter.instagram-link {
    font-size: 10vh;
  }

  .main-headline.hero-version {
    font-size: 24vh;
  }

  .sub-title {
    font-size: 2.6vh;
  }

  .sub-title.smaller {
    font-size: 2.2vh;
  }

  .sub-title.smaller.space-before {
    margin-top: 2vh;
  }

  .sub-title.hero-version {
    font-size: 2.3vh;
  }

  .main-headline-container {
    grid-column-gap: 4vh;
    grid-row-gap: 4vh;
  }

  .main-headline-container.simple-white.relative.pop-up {
    margin-bottom: 3vh;
  }

  .feature-container.event, .feature-container.event.less-space {
    grid-column-gap: 4vh;
    grid-row-gap: 4vh;
  }

  .underline-button {
    letter-spacing: .5vh;
    font-size: 2.3vh;
  }

  .underline {
    height: .19vh;
  }

  .item-link.french-puce.left {
    grid-column-gap: 3vh;
    grid-row-gap: 3vh;
    padding: 2vh;
  }

  .item-info {
    grid-column-gap: 3vh;
    grid-row-gap: 3vh;
  }

  .item-info.left, .item-info.footer-option {
    grid-column-gap: 2vh;
    grid-row-gap: 2vh;
  }

  .small-cap-title {
    letter-spacing: .2vh;
    font-size: 1.4vh;
  }

  .small-cap-title.bigger {
    font-size: 1.6vh;
  }

  .item-name.footer-version {
    font-size: 6vh;
  }

  .item-name.smaller {
    font-size: 4.8vh;
  }

  .item-name.smaller.left {
    font-size: 6vh;
  }

  .item-name.smaller.feature {
    font-size: 5.7vh;
  }

  .item-image-container.blog.space-after {
    margin-bottom: .3vh;
  }

  .item-tag {
    border-width: .15vh;
    border-radius: .5vh;
    padding: 1.5vh 1.2vh 1.2vh;
  }

  .outlined-button {
    border-width: .2vh;
    padding: 3vh 7vh;
  }

  .plus-icon-container {
    border-width: .2vh;
    border-radius: .5vh;
    width: 4vh;
    height: 4vh;
  }

  .plus-icon.banner, .plus-icon.popup, .plus-icon.menu-version {
    width: 3.5vh;
    height: 3.5vh;
  }

  .price-tag.smaller {
    font-size: 2vh;
  }

  .items-container.grid {
    grid-column-gap: 4vh;
    grid-row-gap: 4vh;
  }

  .category-name {
    font-size: 9vh;
  }

  .slider {
    width: 30vh;
    height: 1vh;
  }

  .arrows {
    grid-column-gap: 1.2vh;
    grid-row-gap: 1.2vh;
  }

  .round-button {
    border-width: .25vh;
  }

  .feature-banner {
    height: 50vh;
  }

  .copy-container.chocolate-hazelnut {
    grid-column-gap: 5vh;
    grid-row-gap: 5vh;
  }

  .copy-container.relative {
    grid-column-gap: 4vh;
    grid-row-gap: 4vh;
  }

  .copy-container.relative.instagram {
    grid-column-gap: 2vh;
    grid-row-gap: 2vh;
  }

  .button-container.centre {
    margin-top: 5vh;
  }

  .ad-banner {
    padding-top: 1.4vh;
    padding-bottom: 1vh;
  }

  .logo-back {
    width: 19vh;
  }

  .nav-links {
    z-index: 2;
    grid-column-gap: 2vh;
    grid-row-gap: 2vh;
  }

  .nav-link {
    letter-spacing: .5vh;
    font-size: 1.6vh;
  }

  .navbar-icon-right {
    width: 2.8vh;
    height: 2.8vh;
  }

  .right-nav {
    grid-column-gap: 2vh;
    grid-row-gap: 2vh;
  }

  .button-text {
    letter-spacing: .5vh;
    font-size: 1.8vh;
  }

  .underline-container {
    grid-column-gap: .7vh;
    grid-row-gap: .7vh;
  }

  .underline-container.smaller {
    font-size: 1.8vh;
  }

  .underline-container.smaller.shop-all {
    font-size: 1.6vh;
  }

  .review-section {
    min-height: 45svh;
    max-height: 45vh;
  }

  .product-colour-outline {
    border-width: .25vh;
    width: 4vh;
    height: 4vh;
  }

  .product-colours {
    grid-column-gap: 1vh;
    grid-row-gap: 1vh;
  }

  .standard-button {
    border-width: .2vh;
    padding: 3vh 10vh;
  }

  .standard-button.french-puce.shorter {
    padding-left: 7vh;
    padding-right: 7vh;
  }

  .link-container {
    grid-column-gap: 1vh;
    grid-row-gap: 1vh;
  }

  .small-arrow {
    align-self: center;
    width: 2vh;
  }

  .footer {
    grid-column-gap: 4.5vh;
    grid-row-gap: 4.5vh;
    padding-top: 6vh;
  }

  .footer-link {
    grid-column-gap: .5vh;
    grid-row-gap: .5vh;
    font-size: 2vh;
  }

  .social-link {
    width: 2.5vh;
    height: 2.5vh;
  }

  .social-links {
    grid-column-gap: 1.5vh;
    grid-row-gap: 1.5vh;
  }

  .logo-footer {
    width: 30vh;
  }

  .copyright, .small-print {
    letter-spacing: .25vh;
    font-size: 1.2vh;
  }

  .bottom-right {
    padding-top: 1.8vh;
    padding-bottom: 1vh;
  }

  .right-side {
    grid-column-gap: 2.2vh;
    grid-row-gap: 2.2vh;
  }

  .instagram-image {
    width: 32vh;
  }

  .instagram-images {
    grid-column-gap: 2vh;
    grid-row-gap: 2vh;
  }

  .instagram-embed {
    grid-column-gap: 4vh;
    grid-row-gap: 4vh;
  }

  .wrapper-instagram-embed {
    grid-column-gap: 2vh;
    grid-row-gap: 2vh;
  }

  .instagram-follow {
    letter-spacing: .35vh;
    font-size: 2.5vh;
  }

  .print-text-subcribe {
    font-size: 2vh;
  }

  .print-text-subcribe.pop-up {
    width: 100%;
  }

  .text-field {
    margin-bottom: 2vh;
    padding: 4vh 5vh 3.2vh 2vh;
    font-size: 2.2vh;
  }

  .submit-button {
    letter-spacing: .5vh;
    padding: 3vh 7vh;
    font-size: 1.8vh;
  }

  .article-date {
    font-size: 1.7vh;
  }

  .instagram-embed-title {
    grid-column-gap: 3vh;
    grid-row-gap: 3vh;
  }

  .xoxo {
    letter-spacing: -.4vh;
    font-size: 12vh;
  }

  .plus-wrapper {
    margin-bottom: 2vh;
  }

  .wrapper-footer-link {
    grid-column-gap: 2.5vh;
    grid-row-gap: 2.5vh;
  }

  .hero-content {
    grid-column-gap: 4vh;
    grid-row-gap: 4vh;
  }

  .outlined-button-hero {
    border-width: .2vh;
    padding: 3vh 7vh;
  }

  .selector {
    border-width: .25vh;
  }

  .selector-wrapper {
    grid-column-gap: 2.5vh;
    grid-row-gap: 2.5vh;
  }

  .slider-instance.v2 {
    min-height: 45svh;
    max-height: 45vh;
  }

  .slide-nav {
    margin-right: 2.1vw;
    font-size: 1.7vh;
  }

  .progress-ring {
    border-width: .25vh;
    width: 2.5vh;
    height: 2.5vh;
  }

  .selector-dot-wrapper {
    width: 3.2vh;
    height: 3.2vh;
  }

  .divider {
    width: .2vh;
  }

  .review-text {
    width: 47%;
    font-size: 3.3vh;
  }

  .review {
    height: 45vh;
  }

  .review-title {
    font-size: 6vh;
  }

  .star {
    width: 1.6vh;
    height: 1.6vh;
  }

  .stars-container {
    grid-column-gap: .9vh;
    grid-row-gap: .9vh;
  }

  .toast-content {
    width: 130vh;
    height: 80vh;
  }

  .close-toast {
    z-index: 3;
    margin-top: 2vh;
    margin-right: 2vh;
  }

  .pop-up-text {
    letter-spacing: .5vh;
    cursor: pointer;
    margin-top: 1vh;
    font-size: 1.2vh;
  }

  .dropdown-shop-all {
    border-bottom-width: .13vh;
    padding-top: 7vh;
    padding-bottom: 7vh;
    display: none;
  }

  .drop-down-row {
    grid-column-gap: 3vh;
    grid-row-gap: 3vh;
  }

  .drop-down-link {
    grid-column-gap: .5vh;
    grid-row-gap: .5vh;
    font-size: 2.2vh;
  }

  .drop-down-title {
    letter-spacing: .5vh;
    margin-bottom: 2vh;
    font-size: 1.6vh;
  }

  .dropdown-side {
    grid-column-gap: 4.3vh;
    grid-row-gap: 4.3vh;
  }

  .dropdown-feature-link {
    grid-column-gap: 3vh;
    grid-row-gap: 3vh;
  }

  .feature-dropdown-text {
    font-size: 1.9vh;
  }

  .dropdown-link-feature-container {
    grid-column-gap: 2vh;
    grid-row-gap: 2vh;
  }

  .dropdown-inner {
    grid-column-gap: 10vh;
    grid-row-gap: 10vh;
  }

  .nav-bg-overlay {
    z-index: 1;
  }

  .hero-slider-container._1 {
    background-position: 50%;
  }

  .small-logo {
    width: 2vh;
    height: 2vh;
  }

  .small-logo.smaller {
    width: 1.7vh;
    height: 1.7vh;
  }
}

@media screen and (max-width: 991px) {
  body {
    font-size: 2.2vh;
  }

  .nav-bar {
    border-bottom-width: .15vh;
    padding: 3.5vh 7vw;
  }

  .nav-bar.collapsible {
    border-bottom-color: var(--sooty);
  }

  .nav-bar.main {
    border-bottom-width: .13vh;
  }

  .hero-section.second .hero-section-background-image {
    object-position: 90% 100%;
  }

  .hero-section.third .hero-section-background-image {
    object-position: 70% 100%;
  }

  .hero-section.first .hero-section-background-image {
    object-position: 60% 100%;
  }

  .section {
    grid-column-gap: 6vh;
    grid-row-gap: 6vh;
    padding-top: 10vh;
    padding-bottom: 10vh;
  }

  .section.horizontal-tablet {
    padding-left: 0;
    padding-right: 0;
  }

  .main-headline {
    margin-bottom: 2.5vh;
    font-size: 11vh;
  }

  .main-headline.banner {
    letter-spacing: .1vh;
    white-space: nowrap;
    justify-content: flex-end;
    padding-top: 2vh;
    padding-bottom: 2vh;
    font-size: 4.5vh;
  }

  .main-headline.even-tighter {
    width: 10ch;
  }

  .main-headline.tighter-mobile-newsletter {
    font-size: 8.5vh;
  }

  .main-headline.tighter-mobile-newsletter.instagram-link {
    font-size: 11vh;
  }

  .main-headline.hero-version {
    font-size: 15vh;
  }

  .sub-title {
    font-size: 2.5vh;
  }

  .sub-title.smaller {
    width: 100%;
    font-size: 2.5vh;
  }

  .sub-title.smaller.space-before {
    margin-top: 2vh;
  }

  .sub-title.even-tighter.bundle {
    font-size: 2.2vh;
  }

  .sub-title.hero-version {
    width: 25ch;
    font-size: 2.2vh;
  }

  .sub-title.tighter-desktop {
    width: 90%;
  }

  .main-headline-container {
    grid-column-gap: 4vh;
    grid-row-gap: 4vh;
  }

  .main-headline-container.french-puce.centre.horizontal-tablet {
    padding-left: 7vw;
    padding-right: 7vw;
  }

  .main-headline-container.french-puce.relative.margin-left.modified {
    text-align: center;
    align-self: center;
    align-items: center;
  }

  .main-headline-container.simple-white.relative.pop-up {
    margin-bottom: 3vh;
  }

  .feature-container.event, .feature-container.event.less-space {
    grid-column-gap: 8vh;
    grid-row-gap: 8vh;
  }

  .underline-button {
    letter-spacing: .5vh;
    font-size: 2.3vh;
  }

  .main-headline-title.left.modified {
    flex-flow: column;
    justify-content: center;
    display: flex;
  }

  .underline {
    height: .19vh;
  }

  .underline.simple-white.footer-separator {
    height: .13vh;
    display: block;
  }

  .item-image {
    aspect-ratio: 3 / 3.2;
  }

  .item-link {
    width: 100%;
  }

  .item-link.french-puce.left {
    grid-column-gap: 4vh;
    grid-row-gap: 4vh;
    padding: 0;
  }

  .item-link.french-puce.left.blog, .item-link.french-puce.left.event {
    width: 50vh;
    background-color: transparent;
  }

  .item-link.french-puce.left.main-product {
    grid-column-gap: 3.5vh;
    grid-row-gap: 3.5vh;
    width: 50vh;
    background-color: transparent;
  }

  .item-link.french-puce.left.main-product.centre {
    justify-content: space-between;
  }

  .item-info {
    grid-column-gap: 3.5vh;
    grid-row-gap: 3.5vh;
  }

  .item-info.left {
    grid-column-gap: 2vh;
    grid-row-gap: 2vh;
    width: 100%;
  }

  .item-info.right {
    grid-column-gap: 2.5vh;
    grid-row-gap: 2.5vh;
    align-self: flex-end;
    margin-top: 10vh;
    padding-left: 7vw;
    padding-right: 7vw;
  }

  .item-info.footer-option {
    grid-column-gap: 3vh;
    grid-row-gap: 3vh;
    width: 100%;
    padding-left: 7vw;
    padding-right: 7vw;
  }

  .small-cap-title {
    letter-spacing: .2vh;
    font-size: 1.4vh;
  }

  .small-cap-title.bigger {
    font-size: 1.8vh;
  }

  .item-name {
    font-size: 7vh;
  }

  .item-name.footer-version {
    font-size: 5.7vh;
  }

  .item-name.smaller {
    font-size: 6.5vh;
  }

  .item-name.smaller.left {
    width: 90%;
    font-size: 7vh;
  }

  .item-image-container.blog {
    width: 50vh;
  }

  .item-image-container.blog.space-after {
    margin-bottom: 2vh;
  }

  .item-tag {
    border-width: .15vh;
    border-radius: .5vh;
    padding: 1.5vh 1.2vh 1.2vh;
  }

  .outlined-button {
    border-width: .2vh;
    padding: 3vh 6vh;
  }

  .plus-icon-container {
    border-width: .2vh;
    border-radius: .5vh;
    width: 4vh;
    height: 4vh;
  }

  .plus-icon.banner {
    width: 4vh;
    height: 4vh;
    display: none;
  }

  .product-modal .plus-icon.banner {
  display: flex;
  }

  .plus-icon.popup {
    width: 4vh;
    height: 4vh;
  }

  .plus-icon.menu-version {
    width: 4vh;
    height: 4vh;
    display: flex;
    transform: rotate(45deg);
  }

  .price-tag {
    font-size: 2.7vh;
  }

  .items-container {
    grid-column-gap: 15vh;
    grid-row-gap: 15vh;
    flex-flow: column;
  }

  .items-container.grid {
    grid-column-gap: 4vh;
    grid-row-gap: 4vh;
    flex-flow: column;
    display: flex;
  }

  .items-container.blog {
    grid-column-gap: 3.2vh;
    grid-row-gap: 3.2vh;
    flex-flow: row;
    overflow: auto;
  }

  .items-container.blog.horizontal-scroll {
    width: auto;
    display: flex;
    flex-direction: row;
  }

  .items-container.blog.horizontal-scroll.next {
    display: flex;
  }

  .category-name {
    font-size: 13vh;
  }

  .category-text {
    font-size: 10vh;
  }

  .slider {
    width: 30vh;
    height: 1vh;
  }

  .arrows {
    grid-column-gap: 1.8vh;
    grid-row-gap: 1.8vh;
    align-self: center;
  }

  .round-button {
    border-width: .3vh;
    width: 12vh;
    height: 12vh;
  }

  .round-button.french-puce {
    border-width: .25vh;
  }

  .arrow-icon {
    width: 3.5vh;
    height: 3.5vh;
  }

  .navigation.no-show-tablet {
    display: none;
  }

  .feature-banner {
    height: 70svh;
  }

  .feature-banner-background-image.newsletter-image {
    object-position: 70% 50%;
  }

  .feature-banner.newsletter {
    background-position: 75%;
    padding-top: 6vh;
    padding-bottom: 6vh;
  }

  .copy-container {
    grid-column-gap: 4vh;
    grid-row-gap: 4vh;
  }

  .copy-container.chocolate-hazelnut {
    grid-column-gap: 5vh;
    grid-row-gap: 5vh;
    width: 55vh;
    margin-top: 7vh;
    margin-bottom: 7vh;
    margin-right: 5vw;
    padding: 5vh;
  }

  .copy-container.relative {
    grid-column-gap: 4vh;
    grid-row-gap: 4vh;
  }

  .copy-container.relative.instagram {
    grid-column-gap: 2vh;
    grid-row-gap: 2vh;
  }

  .button-container.centre {
    align-self: stretch;
    margin-top: 10vh;
  }

  .button-container.centre.horizontal-tablet {
    margin-top: 1vh;
    padding-left: 7vw;
    padding-right: 7vw;
  }

  .button-container.no-show-desktop {
    display: flex;
  }

  .button-container.no-show-mobile {
    display: none;
  }

  .ad-banner {
    align-items: flex-end;
    padding-top: 1.4vh;
    padding-bottom: 1vh;
  }

  .logo-back {
    z-index: 50;
    width: 20vh;
  }

  .nav-links {
    display: none;
  }

  .nav-link {
    letter-spacing: .5vh;
    font-size: 1.5vh;
  }

  .navbar-icon-right {
    vertical-align: baseline;
    width: 4vh;
    height: 4vh;
  }

  .right-nav {
    z-index: 50;
    grid-column-gap: 2vh;
    grid-row-gap: 2vh;
    flex: none;
    align-self: center;
    align-items: baseline;
  }

  .button-text {
    letter-spacing: .5vh;
    font-size: 1.8vh;
  }

  .underline-container {
    grid-column-gap: .6vh;
    grid-row-gap: .6vh;
  }

  .underline-container.smaller {
    font-size: 1.8vh;
  }

  .navbar-icon {
    align-self: flex-end;
    margin-bottom: 3.5%;
  }

  .review-section {
    height: 45svh;
  }

  .body-copy {
    font-size: 2.5vh;
  }

  .product-colour-outline {
    border-width: .25vh;
    width: 4vh;
    height: 4vh;
  }

  .product-colours {
    grid-column-gap: 1vh;
    grid-row-gap: 1vh;
  }

  .standard-button {
    border-width: .2vh;
    padding: 3vh;
  }

  .standard-button.french-puce.shorter {
    padding-left: 6vh;
    padding-right: 6vh;
  }

  .link-container {
    grid-column-gap: 1vh;
    grid-row-gap: 1vh;
  }

  .small-arrow {
    width: 2vh;
  }

  .footer {
    grid-column-gap: 4.5vh;
    grid-row-gap: 4.5vh;
    padding-top: 1vh;
  }

  .footer-link {
    grid-column-gap: .5vh;
    grid-row-gap: .5vh;
    font-size: 2.3vh;
  }

  .top-part {
    grid-column-gap: 0vh;
    grid-row-gap: 0vh;
    flex-flow: column;
    padding-left: 0;
    padding-right: 0;
  }

  .social-link {
    width: 3vh;
    height: 3vh;
  }

  .social-links {
    grid-column-gap: 2.5vh;
    grid-row-gap: 2.5vh;
    justify-content: flex-end;
    align-self: flex-end;
    width: 100%;
  }

  .bottom-part {
    background-position: 0 0;
    align-self: flex-start;
    align-items: flex-start;
  }

  .logo-footer {
    width: 32vh;
  }

  .copyright {
    text-align: left;
    letter-spacing: .25vh;
    order: 1;
    align-self: flex-start;
    font-size: 1.3vh;
  }

  .small-print {
    letter-spacing: .25vh;
    font-size: 1.3vh;
  }

  .bottom-right {
    grid-column-gap: 1vh;
    grid-row-gap: 1vh;
    flex-flow: column;
    align-self: flex-start;
    align-items: flex-start;
    padding-top: 2vh;
    padding-bottom: 1.4vh;
  }

  .last-line {
    grid-column-gap: 2vh;
    grid-row-gap: 2vh;
    flex-flow: column;
    align-self: flex-start;
    align-items: flex-start;
  }

  .right-side {
    grid-column-gap: 2vh;
    grid-row-gap: 2vh;
    flex-flow: row;
    justify-content: space-between;
    align-items: flex-start;
  }

  .instagram-image {
    width: 100%;
    height: 45vh;
  }

  .instagram-images {
    grid-column-gap: 2vh;
    grid-row-gap: 2vh;
  }

  .instagram-embed {
    grid-column-gap: 4vh;
    grid-row-gap: 4vh;
    padding-top: 8vh;
    padding-bottom: 8vh;
  }

  .wrapper-instagram-embed {
    grid-column-gap: 2vh;
    grid-row-gap: 2vh;
  }

  .instagram-follow {
    letter-spacing: .35vh;
    font-size: 1.8vh;
  }

  .print-text-subcribe {
    width: 75%;
    font-size: 2vh;
  }

  .print-text-subcribe.pop-up {
    width: 100%;
  }

  .text-field {
    margin-bottom: 2vh;
    padding: 4vh 2vh 3.5vh;
    font-size: 2.5vh;
  }

  .text-field.newsletter-version {
    width: 100%;
  }

  .suscribe {
    flex-flow: column;
  }

  .submit-button {
    letter-spacing: .5vh;
    padding: 3vh 6vh;
    font-size: 1.8vh;
  }

  .subcribe-container {
    width: 100%;
  }

  .desktop {
    display: none;
  }

  .lower-breakpoint {
    grid-column-gap: 5vh;
    grid-row-gap: 5vh;
    justify-content: flex-end;
    display: flex;
  }

  .banner-smaller-breakpoint {
    grid-column-gap: 5vh;
    grid-row-gap: 5vh;
    align-items: center;
    display: flex;
  }

  .article-date {
    font-size: 2vh;
  }

  .menu-bars {
    vertical-align: bottom;
    cursor: pointer;
    width: 5vh;
    height: 5vh;
    position: relative;
  }

  .menu {
    align-self: center;
    margin-left: 3vh;
    display: block;
    position: relative;
    overflow: hidden;
  }

  .slider-blog {
    margin-top: 2vh;
    display: block;
  }

  .instagram-embed-title {
    grid-column-gap: 3vh;
    grid-row-gap: 3vh;
  }

  .xoxo {
    letter-spacing: -.4vh;
    font-size: 13vh;
  }

  .plus-wrapper {
    justify-content: space-between;
    width: 100%;
    margin-top: 2.7vh;
    margin-bottom: 2.7vh;
    display: flex;
  }

  .plus-wrapper.no-space {
    margin-top: 0;
  }

  .wrapper-footer-link {
    grid-column-gap: 3.5vh;
    grid-row-gap: 3.5vh;
    margin-bottom: 6vh;
    display: none;
  }

  .arrow-down {
    width: 2vh;
    height: 2vh;
  }

  .arrow-down-container {
    cursor: pointer;
    justify-content: center;
    align-items: center;
    display: flex;
  }

  .logomark-banner {
    width: 1vh;
    height: 1vh;
    margin-bottom: .2%;
  }

  .hero-wrapper {
    margin-top: -20vh;
    padding-left: 7vw;
    padding-right: 7vw;
  }

  .hero-content {
    grid-column-gap: 4vh;
    grid-row-gap: 4vh;
  }

  .outlined-button-hero {
    border-width: .2vh;
    padding: 3vh 6vh;
  }

  .selector {
    border-width: .25vh;
  }

  .selector-wrapper {
    grid-column-gap: 2.5vh;
    grid-row-gap: 2.5vh;
  }

  .selector-container {
    margin-right: 7vw;
  }

  .navbar-container {
    z-index: 50;
  }

  .slider-instance {
    flex-flow: column;
    display: flex;
  }

  .slider-instance.v2 {
    height: 45svh;
  }

  .slide-nav {
    margin-right: 4.5vw;
    font-size: 1.7vh;
  }

  .progress-ring {
    border-width: .25vh;
    width: 2.3vh;
    height: 2.3vh;
  }

  .selector-dot-wrapper {
    width: 3.2vh;
    height: 3.2vh;
  }

  .divider {
    align-self: center;
    width: .19vh;
    height: 1.3vh;
    display: flex;
  }

  .review-text {
    width: 65%;
    font-size: 3vh;
  }

  .review {
    grid-column-gap: 4.5vh;
    grid-row-gap: 4.5vh;
    height: 45svh;
  }

  .review-title {
    font-size: 6vh;
  }

  .star {
    width: 1.8vh;
    height: 1.8vh;
  }

  .stars-container {
    grid-column-gap: .9vh;
    grid-row-gap: .9vh;
  }

  .review-background {
    width: 300vh;
  }

  .popup-left {
    align-self: stretch;
    width: 50%;
  }

  .toast-content {
    flex-flow: row;
    width: 85%;
    height: 85%;
  }

  .popup-right {
    width: auto;
    padding: 4vh;
  }

  .close-toast {
    margin-top: 2vh;
    margin-right: 2vh;
  }

  .pop-up-text {
    letter-spacing: .5vh;
    margin-top: 1vh;
    font-size: 1.2vh;
  }

  .signature-background {
    width: 145%;
  }

  .horizontal-scroll-container {
    grid-column-gap: 1.6vh;
    grid-row-gap: 1.6vh;
    justify-content: flex-start;
    padding-left: 7vw;
    padding-right: 7vw;
    overflow: auto;
    overflow-y: clip;
  }

  .dropdown-shop-all {
    display: none;
  }

  .drop-down-link {
    grid-column-gap: .5vh;
    grid-row-gap: .5vh;
    font-size: 2.3vh;
  }

  .drop-down-title {
    letter-spacing: .5vh;
    font-size: 1.5vh;
  }

  .feature-dropdown-text {
    width: 75%;
    font-size: 2vh;
  }

  .dropdown-inner {
    display: none;
  }

  .main-navbar-container {
    z-index: 100;
  }

  .hero-slider-container._2 {
    background-position: 45% 100%;
  }

  .hero-slider-container._3 {
    background-position: 70% 100%;
  }

  .hero-slider-container._1 {
    background-position: 60% 100%;
  }

  .dropdown-menu {
    flex-flow: column;
    display: flex;
    position: fixed;
    transform: translate(100%);
  }

  .accordion-title {
    letter-spacing: .5vh;
    text-transform: uppercase;
    flex: none;
    justify-content: space-between;
    align-self: flex-start;
    width: 100%;
    font-size: 2vh;
    font-weight: 700;
    display: flex;
  }

  .dropdown-menu-part.bottom {
    margin-left: 7vw;
    margin-right: 7vw;
  }

  .dropdown-menu-wrapper {
    grid-column-gap: 6vh;
    grid-row-gap: 6vh;
    background-color: var(--sooty);
    flex-flow: column;
    justify-content: flex-start;
    align-self: stretch;
    width: 100%;
    display: flex;
    position: relative;
    top: -1vh;
  }

  .menu-link-wrapper {
    cursor: pointer;
    flex-flow: column;
    justify-content: space-between;
    align-items: stretch;
    padding: 3.5vh 7vw;
    display: flex;
  }

  .close-menu-icon {
    cursor: pointer;
    background-color: #2e2e2e;
    justify-content: center;
    align-items: center;
    width: 5vh;
    height: 5vh;
    display: flex;
    position: absolute;
    inset: 0% 0% 0% auto;
    margin-top: 1%;
  }

  .accordion-icon {
    width: 2vh;
    height: 2vh;
    overflow: hidden;
  }

  .accordion-link {
    color: var(--simple-white);
    text-decoration: none;
  }

  .accordion-content-wrapper {
    grid-column-gap: 3vh;
    grid-row-gap: 3vh;
    font-size: 3vmin;
    flex-flow: column wrap;
    grid-template-rows: auto auto;
    grid-template-columns: 1fr 1fr;
    grid-auto-columns: 1fr;
    place-content: space-between start;
    align-self: flex-start;
    justify-items: start;
    width: 100%;
    padding-top: 7vh;
    padding-bottom: 7vh;
    display: grid;
  }

  .accordion-content {
    cursor: auto;
    width: 100%;
    display: block;
  }

  .accordion-item {
    flex-flow: column;
    justify-content: space-between;
    align-items: stretch;
    padding: 3.5vh 7vw;
    display: flex;
  }

  .dropdown-menu-lower {
    top: auto;
  }

  .menu-overlay {
    z-index: 4;
    background-color: var(--overlay-menu);
    flex-flow: row;
    width: 100%;
    height: 100vh;
    display: none;
    position: fixed;
    inset: 0%;
  }

  .small-logo {
    flex: none;
    align-self: center;
    width: 2vh;
    height: 2vh;
  }

  .small-logo.smaller {
    width: 1.6vh;
    height: 1.6vh;
  }
}

@media screen and (max-width: 767px) {
  .nav-bar {
    padding-top: 3vh;
    padding-bottom: 3vh;
  }

  .dropdown-menu.hero-menu-version {
    top: -1.2vh;
  }

  .hero-section {
    background-position: 60% 100%;
  }

  .hero-section.second .hero-section-background-image {
    object-position: 80% 100%;
  }

  .hero-section.third .hero-section-background-image {
    object-position: 65% 100%;
  }

  .hero-section.first .hero-section-background-image {
    object-position: 65% 100%;
  }

  .section {
    padding-top: 12vh;
    padding-bottom: 12vh;
  }

  .section.category {
    padding-top: 10vh;
    padding-bottom: 10vh;
  }

  .main-headline {
    font-size: 11vh;
  }

  .main-headline.tighter-mobile-newsletter {
    font-size: 8vh;
  }

  .main-headline.tighter-mobile-newsletter.pop-up {
    width: 85%;
  }

  .main-headline.hero-version {
    font-size: 15vh;
  }

  .sub-title.tighter {
    width: 70%;
  }

  .sub-title.even-tighter {
    width: 65%;
  }

  .sub-title.hero-version {
    width: 30ch;
  }

  .sub-title.tighter-desktop {
    width: 80%;
  }

  .feature-container.event, .feature-container.event.less-space {
    grid-column-gap: 6vh;
    grid-row-gap: 6vh;
  }

  .main-headline-title {
    flex-flow: column;
    align-items: center;
    display: flex;
  }

  .main-headline-title.left {
    align-self: flex-start;
    align-items: flex-start;
  }

  .main-headline-title.left.modified {
    align-self: center;
    align-items: center;
  }

  .main-headline-title.hero {
    align-items: flex-start;
  }

  .item-link.french-puce.left.blog, .item-link.french-puce.left.event {
    width: 37.2vh;
  }

  .item-info {
    grid-column-gap: 3vh;
    grid-row-gap: 3vh;
  }

  .small-cap-title.bigger {
    font-size: 1.7vh;
  }

  .item-name.smaller {
    font-size: 6vh;
  }

  .item-name.smaller.left {
    width: 100%;
  }

  .item-image-container.blog {
    width: 37.2vh;
  }

  .item-image-container.blog.space-after {
    width: 50vh;
    margin-bottom: 1vh;
  }

  .price-tag.smaller {
    font-size: 2.2vh;
  }

  .items-container {
    grid-column-gap: 12vh;
    grid-row-gap: 12vh;
  }

  .category-name {
    font-size: 10vh;
  }

  .round-button {
    width: 10vh;
    height: 10vh;
  }

  .arrow-icon {
    width: 2.8vh;
    height: 2.8vh;
  }

  .feature-banner.story {
    justify-content: center;
    align-items: center;
    height: auto;
    display: flex;
  }

  .feature-banner.newsletter {
    background-position: 80%;
  }

  .copy-container.chocolate-hazelnut {
    width: auto;
    margin-left: 7vh;
    margin-right: 7vh;
    padding-top: 8vh;
    padding-bottom: 8vh;
    position: static;
  }

  .button-container.no-show-desktop {
    display: block;
  }

  .button-container.no-show-mobile {
    display: none;
  }

  .footer {
    grid-column-gap: 4vh;
    grid-row-gap: 4vh;
  }

  .footer-link {
    font-size: 2.2vh;
  }

  .logo-footer {
    width: 27vh;
  }

  .bottom-right {
    padding-top: 1.5vh;
    padding-bottom: 0;
  }

  .instagram-embed {
    padding-top: 10vh;
    padding-bottom: 10vh;
  }

  .suscribe {
    grid-column-gap: 0vh;
    grid-row-gap: 0vh;
    flex-flow: column;
  }

  .subcribe-container {
    width: 100%;
  }

  .submit-button-container {
    width: 100%;
    margin-top: 3vh;
  }

  .submit-button-container.pop-up {
    margin-bottom: 3vh;
  }

  .lower-breakpoint, .banner-smaller-breakpoint {
    grid-column-gap: 3vh;
    grid-row-gap: 3vh;
  }

  .menu-bars {
    width: 6vh;
    height: 6vh;
  }

  .navbar-icon {
    align-self: flex-end;
    margin-bottom: 5%;
  }

  .arrow-down {
    width: 1.8vh;
    height: 1.8vh;
  }

  .hero-content {
    align-self: flex-start;
  }

  .hero-section-container {
    margin-top: 0;
  }

  .slide-nav {
    margin-right: 3.5vw;
  }

  .review-text {
    width: 75%;
  }

  .review-background {
    top: -10%;
  }

  .popup-left {
    width: 100%;
    display: none;
  }

  .toast-content {
    flex-flow: column;
    height: 70%;
  }

  .signature-background {
    width: 120%;
  }

  .horizontal-scroll-container {
    grid-column-gap: 3.2vh;
    grid-row-gap: 3.2vh;
  }

  .drop-down-link {
    font-size: 2.2vh;
  }

  .hero-slider-container._3 {
    background-image: url('../images/Hero_Banner_StudioGrade_Tablet.webp');
    background-position: 65% 100%;
  }

  .hero-slider-container._1 {
    background-position: 65% 100%;
  }

  .accordion-title {
    font-size: 1.8vh;
  }

  .close-menu-icon {
    width: 6vh;
    height: 6vh;
  }

  .accordion-icon {
    width: 1.8vh;
    height: 1.8vh;
  }

  .small-logo {
    width: 2.3vh;
    height: 2.3vh;
  }
}

@media screen and (max-width: 479px) {
  body {
    font-size: 2vh;
  }

  .nav-bar {
    padding-top: 2vh;
    padding-bottom: 2vh;
  }

  .hero-section {
    min-height: 95svh;
    max-height: 95vh;
  }

  .hero-section.second .hero-section-background-image {
    object-position: 87% 100%;
  }

  .hero-section.third .hero-section-background-image {
    object-position: 80% 100%;
  }

  .hero-section.first .hero-section-background-image {
    object-position: 70% 100%;
  }

  .section {
    grid-column-gap: 5vh;
    grid-row-gap: 5vh;
    padding-top: 6vh;
    padding-bottom: 6vh;
  }

  .section.category {
    padding-top: 6vh;
    padding-bottom: 6vh;
  }

  .main-headline {
    font-size: 9vh;
  }

  .main-headline.no-space.tighter-mobile, .main-headline.tighter-mobile {
    width: 12ch;
  }

  .main-headline.banner {
    letter-spacing: .02vh;
    font-size: 4vh;
    line-height: 20%;
  }

  .main-headline.tighter-mobile-newsletter {
    margin-bottom: 0;
    font-size: 7vh;
  }

  .main-headline.tighter-mobile-newsletter.instagram-link {
    font-size: 7vh;
  }

  .main-headline.tighter-mobile-newsletter.pop-up {
    width: 100%;
  }

  .main-headline.hero-version {
    font-size: 12vh;
  }

  .sub-title {
    font-size: 2.1vh;
  }

  .sub-title.smaller {
    font-size: 2vh;
  }

  .sub-title.tighter {
    width: 100%;
  }

  .sub-title.even-tighter {
    width: 65%;
  }

  .sub-title.hero-version {
    width: 75%;
    font-size: 2vh;
  }

  .sub-title.tighter-desktop {
    width: 100%;
  }

  .main-headline-container.french-puce.relative {
    align-self: flex-start;
  }

  .main-headline-container.french-puce.relative.margin-left.modified {
    grid-column-gap: 1vh;
    grid-row-gap: 1vh;
  }

  .feature-container.event, .feature-container.event.less-space {
    grid-column-gap: 4vh;
    grid-row-gap: 4vh;
  }

  .underline-button {
    font-size: 1.9vh;
  }

  .underline-button.french-puce.smaller {
    font-size: 1.5vh;
  }

  .main-headline-title {
    flex-flow: column;
    align-items: center;
    display: flex;
  }

  .main-headline-title.left-mobile {
    text-align: left;
    justify-content: flex-start;
    align-items: flex-start;
  }

  .item-link.french-puce.left.blog, .item-link.french-puce.left.event {
    width: 25vh;
  }

  .item-link.french-puce.left.main-product {
    grid-column-gap: 2.5vh;
    grid-row-gap: 2.5vh;
    width: 25vh;
  }

  .item-info {
    grid-column-gap: 2.5vh;
    grid-row-gap: 2.5vh;
  }

  .item-info.left {
    grid-column-gap: .5vh;
    grid-row-gap: .5vh;
  }

  .item-info.right {
    margin-top: 7vh;
  }

  .item-info.product {
    justify-content: center;
    height: 17%;
  }

  .small-cap-title {
    font-size: 1.1vh;
  }

  .small-cap-title.bigger {
    font-size: 1.3vh;
  }

  .item-name {
    font-size: 6vh;
  }

  .item-name.footer-version {
    font-size: 5vh;
  }

  .item-name.smaller {
    font-size: 5vh;
    line-height: 50%;
  }

  .item-name.smaller.left {
    width: 95%;
    font-size: 5.5vh;
    line-height: 57%;
  }

  .item-image-container.blog {
    width: 25vh;
  }

  .item-image-container.blog.space-after {
    width: 25vh;
    margin-bottom: .5vh;
  }

  .outlined-button {
    padding: 3vh 5vh;
  }

  .plus-icon-container {
    width: 3.5vh;
    height: 3.5vh;
  }

  .price-tag {
    font-size: 2.2vh;
  }

  .price-tag.smaller {
    font-size: 1.6vh;
  }

  .items-container {
    grid-column-gap: 8vh;
    grid-row-gap: 8vh;
  }

  .items-container.grid {
    grid-column-gap: 2vh;
    grid-row-gap: 2vh;
  }

  .items-container.blog {
    grid-column-gap: 1.5vh;
    grid-row-gap: 1.5vh;
  }

  .category-name, .category-text {
    font-size: 8vh;
  }

  .arrows {
    grid-column-gap: 1.2vh;
    grid-row-gap: 1.2vh;
  }

  .round-button {
    width: 8vh;
    height: 8vh;
  }

  .arrow-icon {
    width: 2.3vh;
    height: 2.3vh;
  }

  .feature-banner {
    height: 55svh;
  }

  .feature-banner-background-image.newsletter-image {
    object-position: 80% 50%;
  }

  .copy-container.chocolate-hazelnut {
    margin-left: 7vw;
    margin-right: 7vw;
    padding: 6vh 4vh;
  }

  .button-container.centre {
    margin-top: 3vh;
  }

  .ad-banner {
    padding-top: .4vh;
    padding-bottom: 0;
  }

  .logo-back {
    width: 17vh;
  }

  .navbar-icon-right {
    width: 3.2vh;
    height: 3.2vh;
  }

  .right-nav {
    grid-column-gap: 2vh;
    grid-row-gap: 2vh;
  }

  .button-text {
    font-size: 1.5vh;
  }

  .underline-container.smaller {
    font-size: 1.4vh;
  }

  .navbar-icon {
    align-self: center;
    margin-bottom: .1%;
  }

  .review-section {
    height: 50svh;
  }

  .body-copy {
    font-size: 2.1vh;
  }

  .product-colour-outline {
    width: 3.5vh;
    height: 3.5vh;
  }

  .product-colour {
    width: 2.5vh;
    height: 2.5vh;
  }

  .standard-button {
    padding: 3vh 2vh;
  }

  .standard-button.french-puce.shorter {
    padding-left: 7vh;
    padding-right: 7vh;
  }

  .small-arrow {
    width: 1.7vh;
  }

  .footer {
    grid-column-gap: 2vh;
    grid-row-gap: 2vh;
  }

  .footer-link {
    font-size: 2.1vh;
  }

  .social-link {
    width: 2.5vh;
    height: 2.5vh;
  }

  .logo-footer {
    width: 22vh;
  }

  .home-link-footer {
    justify-content: flex-start;
    align-self: flex-start;
  }

  .copyright, .small-print {
    font-size: 1.2vh;
  }

  .bottom-right {
    grid-column-gap: .5vh;
    grid-row-gap: .5vh;
    flex-flow: column;
    align-self: center;
    padding-top: 1.5vh;
    padding-bottom: .4vh;
  }

  .last-line {
    grid-column-gap: 4vh;
    grid-row-gap: 4vh;
  }

  .right-side {
    grid-column-gap: 2vh;
    grid-row-gap: 2vh;
    align-self: center;
    align-items: stretch;
  }

  .instagram-image {
    width: 100%;
    height: 30vh;
  }

  .instagram-images {
    grid-column-gap: 1.5vh;
    grid-row-gap: 1.5vh;
  }

  .instagram-embed {
    padding-top: 6vh;
    padding-bottom: 6vh;
    position: relative;
  }

  .wrapper-instagram-embed {
    grid-column-gap: 1.5vh;
    grid-row-gap: 1.5vh;
  }

  .instagram-follow {
    width: 70%;
    font-size: 1.5vh;
  }

  .print-text-subcribe {
    width: 80%;
    font-size: 1.5vh;
  }

  .text-field {
    padding-top: 3.5vh;
    padding-bottom: 3.5vh;
    font-size: 2vh;
  }

  .submit-button {
    padding-top: 3vh;
    padding-bottom: 3vh;
    font-size: 1.5vh;
  }

  .subcribe-container {
    width: 100%;
  }

  .submit-button-container {
    align-self: stretch;
  }

  .lower-breakpoint, .banner-smaller-breakpoint {
    grid-column-gap: 3vh;
    grid-row-gap: 3vh;
  }

  .article-date {
    margin-bottom: 1.2vh;
    font-size: 1.5vh;
  }

  .menu-bars {
    width: 5vh;
    height: 5vh;
  }

  .menu {
    margin-left: 1vh;
  }

  .slider-head-blog {
    width: 45%;
  }

  .instagram-embed-title {
    grid-column-gap: 2vh;
    grid-row-gap: 2vh;
  }

  .xoxo {
    font-size: 8vh;
  }

  .plus-wrapper {
    margin-top: 2.5vh;
    margin-bottom: 2.5vh;
  }

  .arrow-down {
    width: 1.6vh;
    height: 1.6vh;
  }

  .logomark-banner {
    width: .8vh;
    height: .8vh;
    margin-bottom: .25%;
  }

  .hero-content {
    justify-content: space-between;
    align-self: flex-start;
  }

  .outlined-button-hero {
    padding: 3vh 5vh;
  }

  .selector-wrapper {
    flex-flow: row;
  }

  .selector-container {
    flex-flow: row;
    height: auto;
    margin-bottom: 5vh;
    margin-right: 0;
    inset: auto 0% 0%;
  }

  .slider-instance {
    min-height: 95svh;
    max-height: 95vh;
  }

  .slider-instance.v2 {
    height: 50svh;
  }

  .hero-section-container {
    min-height: 95svh;
    max-height: 95vh;
  }

  .slide-nav {
    margin-right: 0;
    padding-top: 0;
    inset: auto 0% 0%;
    transform: rotate(0);
  }

  .divider {
    align-self: center;
    height: 1.2vh;
    display: block;
  }

  .review-text {
    font-size: 2.4vh;
  }

  .review {
    grid-column-gap: 2.5vh;
    grid-row-gap: 2.5vh;
    height: 50svh;
  }

  .review-title {
    font-size: 5.5vh;
  }

  .review-background {
    top: -4%;
    left: -17%;
  }

  .toast-content {
    height: 60%;
  }

  .pop-up-text {
    font-size: 1vh;
  }

  .signature-background {
    width: 160%;
  }

  .horizontal-scroll-container {
    grid-column-gap: 1.5vh;
    grid-row-gap: 1.5vh;
  }

  .drop-down-link {
    font-size: 2.1vh;
  }

  .feature-dropdown-text {
    width: 80%;
    font-size: 1.5vh;
  }

  .hero-slider-container {
    min-height: 95svh;
    max-height: 95vh;
  }

  .accordion-title {
    font-size: 1.6vh;
  }

  .menu-link-wrapper {
    padding-top: 3vh;
    padding-bottom: 3vh;
  }

  .close-menu-icon {
    width: 5vh;
    height: 5vh;
    margin-top: 1.2%;
  }

  .accordion-icon {
    width: 1.6vh;
    height: 1.6vh;
  }

  .accordion-link {
    font-size: 2.3vh;
  }

  .accordion-item {
    padding-top: 3vh;
    padding-bottom: 3vh;
  }

  .dropdown-menu-lower {
    top: auto;
  }

  .small-logo {
    order: -1;
    align-self: center;
    width: 1.2vh;
    height: 1.2vh;
  }
}


@font-face {
  font-family: '01 Aeternus Nano Variable Vf';
  src: url('../fonts/01-aeternus-nano-variable-weightitalic-VF.woff2') format('woff2');
  font-weight: 100 856;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: '03 Aeternus Variable Vf';
  src: url('../fonts/03-aeternus-thin-variable-eightitalic-VF.woff2') format('woff2');
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: '02 Aeternus Tall Variable Vf';
  src: url('../fonts/02-aeternus-tall-variable-weightitalic-VF.woff2') format('woff2');
  font-weight: 100 856;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: '04 Aeternus Variable Vf';
  src: url('../fonts/04-aeternus-heavy-variable-eightitalic-VF.woff2') format('woff2');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Triple Shots';
  src: url('../fonts/TRIPLE-SHOTS.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Josefin Sans';
  src: url('../fonts/JosefinSans-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Josefin Sans';
  src: url('../fonts/JosefinSans-SemiBold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Josefin Sans';
  src: url('../fonts/JosefinSans-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}