/* @import "https://unpkg.com/open-props";
@import "https://unpkg.com/open-props/normalize.min.css"; */

/* * {box-sizing: border-box;border: 1px solid hsla(0, 0%, 7%, 0.111);} */

/* * {
  border: 1px solid rgba(165, 0, 225, 0.797);
} */

:root {
  --flow-space-1000: clamp(3.34rem, 2.45rem + 4.43vw, 5.61rem);
  --flow-space-900: clamp(2.67rem, 2.07rem + 3vw, 4.21rem);
  --flow-space-800: clamp(2.14rem, 1.74rem + 1.99vw, 3.16rem);
  --flow-space-700: clamp(1.71rem, 1.45rem + 1.29vw, 2.37rem);
  --flow-space-600: clamp(1.37rem, 1.21rem + 0.8vw, 1.78rem);
  --flow-space-500: clamp(1.09rem, 1rem + 0.47vw, 1.33rem);
  --flow-space-400: clamp(0.88rem, 0.83rem + 0.24vw, 1rem);
  --flow-space-300: clamp(0.7rem, 0.66rem + 0.2vw, 0.8rem);
  --flow-space-0: 0;
  /* font-family */
  --ff-cursive: "Parisienne", cursive;
  --ff-sans: "Work Sans", Helvetica, Arial, sans-serif;
  /* font-size */
  /* --fs-400: 1.4375rem; */

  /* composition */
  --corner: var(--fs-400);
  /* utility */
  /* block */
  /* // exception */
  /* font-size */
  --body-small: clamp(1rem, 0.9rem + 0.25vw, 1.25rem);
  --body-smaller: clamp(0.75rem, 0.8rem + 0.1vw, 0.8rem);
  /* fluid-type-scale */ /* type-scale-ration: 1.618, min-width: 320px, max-width: 1920px */
  /* https://www.fluid-type-scale.com/  */
  --fs-100: clamp(0.2656rem, 0.0738vw + 0.2508rem, 0.3394rem);
  --fs-200: clamp(0.4297rem, 0.1194vw + 0.4059rem, 0.5491rem);
  --fs-300: clamp(0.6953rem, 0.1931vw + 0.6567rem, 0.8884rem);
  /* exception: max-width set at 1440px  */
  --fs-400: clamp(1.125rem, 0.4464vw + 1.0357rem, 1.4375rem);
  /* --fs-400: clamp(1.125rem, 0.3125vw + 1.0625rem, 1.4375rem); */
  --fs-500: clamp(1.8203rem, 0.5056vw + 1.7191rem, 2.3259rem);
  --fs-600: clamp(2.9452rem, 0.8181vw + 2.7815rem, 3.7633rem);
  --fs-700: clamp(4.7653rem, 1.3237vw + 4.5005rem, 6.089rem);
  --fs-800: clamp(7.7102rem, 2.1417vw + 7.2819rem, 9.8519rem);
  --fs-900: clamp(12.4751rem, 3.4653vw + 11.7821rem, 15.9404rem);
  --fs-1000: clamp(20.1848rem, 5.6069vw + 19.0634rem, 25.7916rem);
  /* color alpha */
  --alpha: 0.8;

  /* color */
  --mdc-theme-neutral-100: #f5f5f5;
  --mdc-theme-neutral-200: #eeeeee;
  --mdc-theme-neutral-300: #e0e0e0;
  --mdc-theme-neutral-400: #bdbdbd;
  --mdc-theme-neutral-500: #9e9e9e;
  --mdc-theme-neutral-600: #757575;
  --mdc-theme-neutral-700: #616161;
  --mdc-theme-neutral-800: #424242;
  --mdc-theme-neutral-900: #212121;
  --mdc-theme-neutral-1000: #000000;

  /* material-theme/sys/light/primary */
  --mdc-theme-primary: #9c413d;
  --mdc-theme-primary-contrast: #803431;
  --mdc-theme-on-primary: #ffffff;
  --mdc-theme-primary-container: #ffdad5;
  --mdc-theme-on-secondary: #ffffff;
  --mdc-theme-secondary-container: #ffdad7;
  --mdc-theme-on-secondary-container: #2c1513;
  --mdc-theme-tertiary: #725b2e;
  --mdc-theme-on-tertiary: #ffffff;
  --mdc-theme-tertiary-container: #ffdea6;
  --mdc-theme-on-tertiary-container: #271900;
  /* --mdc-theme-error: #ba1b1b; */
  --mdc-theme-error: hsl(0, 75%, 42%);
  --mdc-theme-on-error: hsl(0, 0%, 100%);
  /* --mdc-theme-error-container: #ffdad4; */
  --mdc-theme-error-container: hsl(8, 100%, 92%);
  --mdc-theme-on-error-container: hsl(359, 100%, 13%);
  /* --mdc-theme-success: hsl(137, 74%, 42%); */
  --mdc-theme-success: #0b4b1d;
  --mdc-theme-on-success: hsl(0, 0%, 100%);
  --mdc-theme-success-container: #d6ffe7;
  --mdc-theme-on-success-container: hsl(359, 100%, 13%);
  /* color neutrals */
  --mdc-theme-background: #fcfcfc;
  --mdc-theme-on-background: #201a19;
  --mdc-theme-surface: #fcfcfc;
  --mdc-theme-on-surface: #201a19;
  /* color surface */
  --mdc-theme-surface-variant: #f4dddb;
  --mdc-theme-on-surface-variant: #524342;
  --mdc-theme-outline: #857371;
  /* color inverse */
  --mdc-theme-inverse-primary: #ffb3ab;
  --mdc-theme-inverse-surface: #362f2e;
  /* custom */
  --mdc-theme-on-surface--morph-bg: hsla(9, 12%, 11%, 0.03);
  /* color - read-only/surface/light */
  --mdc-theme-surface1: linear-gradient(
      0deg,
      rgba(156, 65, 61, 0.05),
      rgba(156, 65, 61, 0.05)
    ),
    #fcfcfc; /* +5% Primary */
  --mdc-theme-surface2: linear-gradient(
      0deg,
      rgba(156, 65, 61, 0.08),
      rgba(156, 65, 61, 0.08)
    ),
    #fcfcfc; /* +8`% Primary */
  --mdc-theme-surface3: linear-gradient(
      0deg,
      rgba(156, 65, 61, 0.11),
      rgba(156, 65, 61, 0.11)
    ),
    #fcfcfc; /* +11% Primary */
  --mdc-theme-surface4: linear-gradient(
      0deg,
      rgba(156, 65, 61, 0.12),
      rgba(156, 65, 61, 0.12)
    ),
    #fcfcfc; /* +12% Primary */
  --mdc-theme-surface5: linear-gradient(
      0deg,
      rgba(156, 65, 61, 0.14),
      rgba(156, 65, 61, 0.14)
    ),
    #fcfcfc; /* +14% Primary */

  /* shadow */
  --mdc-theme-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2),
    0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
  /* shadow */
  --mdc-theme-shadow-on-text: 0 2px 4px rgb(0 0 0 / 12%);

  /* section-spacing */
  --section-spacer: 10.375rem;
  /* padding-inline */

  --padding-inline-0: 0;
  --padding-inline-100: 0.23606491em;
  --padding-inline-200: 0.38195303em;
  --padding-inline-300: 0.618em;
  --padding-inline-400: 1em;
  --padding-inline-500: 1.618em;
  --padding-inline-600: 2em;
  --padding-inline-700: 2.61794em;
  --padding-inline-800: 3em;
  --padding-inline-900: 4.23582692em;
  --padding-inline-1000: 5em;

  /* animate char on hover */ /* title, display */
  --char-index: 0;
}
.mdc-theme--inverse-primary {
  color: var(--mdc-theme-inverse-primary);
}
.mdc-theme--inverse-on-primary {
  background-color: var(--mdc-theme-inverse-primary);
}
.mdc-theme--inverse-surface {
  color: var(--mdc-theme-inverse-surface);
}

/* * */
/* * custom css reset */
/* * */
/* // credit: https://www.joshwcomeau.com/css/custom-css-reset/ */

/*
  1. Use a more-intuitive box-sizing model.
*/
*,
*::before,
*::after {
  box-sizing: border-box;
}
/*
  2. Remove default margin
*/
* {
  margin: 0;
}
/*
  3. Allow percentage-based heights in the application
*/
/* html,
body {
  height: 100%;
} */
/*
  Typographic tweaks!
  4. Add accessible line-height
  5. Improve text rendering
*/
/* body {
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
} */
/*
  6. Improve media defaults
*/
img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}
/*
  7. Remove built-in form typography styles
*/
input,
button,
textarea,
select {
  font: inherit;
}
/*
  8. Avoid text overflows
*/
p,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
}
/*
9. Create a root stacking context
*/
#root,
#__next {
  isolation: isolate;
}
/* end of custom css reset */

/* * cube css reset */

blockquote,
body,
dd,
dl,
figure,
h1,
h2,
h3,
h4,
p {
  margin: 0;
}
ol[role="list"],
ul[role="list"] {
  list-style: none;
  padding-left: 0;
}
html {
  text-size-adjust: none;
  -webkit-text-size-adjust: none;
}
html:focus-within {
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html:focus-within {
    scroll-behavior: auto;
  }
  *,
  ::after,
  ::before {
    animation-duration: 0s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0s !important;
    scroll-behavior: auto !important;
  }
}
/* end of cube css resets */

body {
  font-family: var(--ff-sans);
  font-size: var(--fs-400); /* 23px? */
  font-weight: 400;
  color: var(--mdc-theme-on-background);
  margin: 0;
  min-height: 100vh;
  background-color: var(--mdc-theme-background, #fcfcfc);
  text-rendering: optimizeSpeed;
  padding-top: unset;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  display: grid;
  grid-template-rows: auto 1fr auto;
  /* overflow-x: hidden; */
}

/* @media screen and (min-width: 160em) {
  body {
    grid-template-columns: 0.382fr 1fr;
  }
} */

h1,
h2,
h3 {
  line-height: 1;
}

p {
  min-width: 12ch;
}

@media screen and (min-width: 40em) {
  p :not([class]) {
    max-width: clamp(45ch, 50%, 75ch);
  }
}

a {
  color: var(--mdc-theme-primary);
  text-decoration: none;
}
/* custom resets */

img {
  max-width: 100%;
  height: auto;
}

blockquote {
  font-style: italic;
}
/* **** */
/* * cube css */
/* **** */

/* * */
/* * 1. composition */

main {
  display: grid;
  gap: var(--flow-space-800);
  /* grid-template-rows: repeat(auto-fit, minmax(900px, 25vw)); */
  /* grid-template-areas: "header header" "title article" "nav article" "footer footer"; */
}

figcaption,
cite[data-state="image-attribution"] {
  /* data-state is an exception CUBE CSS */
  font-size: var(--fs-300, clamp(0.6953rem, 0.1931vw + 0.6567rem, 0.8884rem));
  color: var(--mdc-theme-neutral-700, #616161);
  line-height: 1.4;
  /* white-space: pre-wrap; */
  text-align: center;
}
cite[data-state="image-attribution"] {
  text-align: center;
  display: -webkit-inline-box;
}

/* * */
/* * 2. utility */

.font-family--cursive {
  font-family: var(--ff-cursive, Parisienne, cursive);
}

/* make font strong (bold) without using the strong HTML element */
:is(p, label, span, div).strong {
  font-weight: 600;
}

/* from mdn — https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/search#a_note_on_styling */

input:invalid ~ span:after {
  content: "✖";
  padding-left: 5px;
  position: absolute;
}

input:valid ~ span:after {
  content: "✓";
  padding-left: 5px;
  position: absolute;
}

.section-spacer {
  margin-top: var(--section-spacer);
}

/* flex */
.flex {
  display: flex;
}

.flex--row {
  flex-direction: row;
}
.flex--column {
  flex-direction: column;
}
.flex--wrap {
  flex-wrap: wrap;
}

/* grid */
.grid {
  display: grid;
}

.grid--row {
  grid-template-rows: auto;
  grid-auto-flow: row;
}
.grid--column {
  grid-template-columns: auto;
  grid-auto-flow: column;
}
.place-center {
  display: grid;
  place-items: center;
}

/* alignment main & cross axis */

.align-items--center {
  align-items: center;
}

.justify-content--center {
  justify-content: center;
}

/* * flow */
.flow > * + *,
.post blockquote > * + * {
  margin-top: var(--flow-space, clamp(1.09rem, 1rem + 0.47vw, 1.33rem));
}

.flow-space-0 {
  --flow-space: 0;
}
.flow-space-300 {
  --flow-space: clamp(0.7rem, 0.66rem + 0.2vw, 0.8rem);
}
.flow-space-400 {
  --flow-space: clamp(0.88rem, 0.83rem + 0.24vw, 1rem);
}
.flow-space-500 {
  --flow-space: clamp(1.09rem, 1rem + 0.47vw, 1.33rem);
}
.flow-space-600 {
  --flow-space: clamp(1.37rem, 1.21rem + 0.8vw, 1.78rem);
}
.flow-space-700 {
  --flow-space: clamp(1.71rem, 1.45rem + 1.29vw, 2.37rem);
}
.flow-space-800 {
  --flow-space: clamp(2.14rem, 1.74rem + 1.99vw, 3.16rem);
}
.flow-space-900 {
  --flow-space: clamp(2.67rem, 2.07rem + 3vw, 4.21rem);
}
.flow-space-1000 {
  --flow-space: clamp(3.34rem, 2.45rem + 4.43vw, 5.61rem);
}
/* end of flow */

/* * gap */
.gap-top-0 {
  margin-top: 0;
}
.gap-top-300 {
  margin-top: clamp(0.7rem, 0.66rem + 0.2vw, 0.8rem);
}
.gap-top-400 {
  margin-top: clamp(0.88rem, 0.83rem + 0.24vw, 1rem);
}
.gap-top-500 {
  margin-top: clamp(1.09rem, 1rem + 0.47vw, 1.33rem);
}
.gap-top-600 {
  margin-top: clamp(1.37rem, 1.21rem + 0.8vw, 1.78rem);
}
.gap-top-700 {
  margin-top: clamp(1.71rem, 1.45rem + 1.29vw, 2.37rem);
}
.gap-top-800 {
  margin-top: clamp(2.14rem, 1.74rem + 1.99vw, 3.16rem);
}
.gap-top-900 {
  margin-top: clamp(2.67rem, 2.07rem + 3vw, 4.21rem);
}
.gap-top-1000 {
  margin-top: clamp(3.34rem, 2.45rem + 4.43vw, 5.61rem);
}
.gap-bottom-0 {
  margin-bottom: 0;
}
.gap-bottom-300 {
  margin-bottom: clamp(0.7rem, 0.66rem + 0.2vw, 0.8rem);
}
.gap-bottom-400 {
  margin-bottom: clamp(0.88rem, 0.83rem + 0.24vw, 1rem);
}
.gap-bottom-500 {
  margin-bottom: clamp(1.09rem, 1rem + 0.47vw, 1.33rem);
}
.gap-bottom-600 {
  margin-bottom: clamp(1.37rem, 1.21rem + 0.8vw, 1.78rem);
}
.gap-bottom-700 {
  margin-bottom: clamp(1.71rem, 1.45rem + 1.29vw, 2.37rem);
}
.gap-bottom-800 {
  margin-bottom: clamp(2.14rem, 1.74rem + 1.99vw, 3.16rem);
}
.gap-bottom-900 {
  margin-bottom: clamp(2.67rem, 2.07rem + 3vw, 4.21rem);
}
.gap-bottom-1000 {
  margin-bottom: clamp(3.34rem, 2.45rem + 4.43vw, 5.61rem);
}
.gap-left-0 {
  margin-left: 0;
}
.gap-left-300 {
  margin-left: clamp(0.7rem, 0.66rem + 0.2vw, 0.8rem);
}
.gap-left-400 {
  margin-left: clamp(0.88rem, 0.83rem + 0.24vw, 1rem);
}
.gap-left-500 {
  margin-left: clamp(1.09rem, 1rem + 0.47vw, 1.33rem);
}
.gap-left-600 {
  margin-left: clamp(1.37rem, 1.21rem + 0.8vw, 1.78rem);
}
.gap-left-700 {
  margin-left: clamp(1.71rem, 1.45rem + 1.29vw, 2.37rem);
}
.gap-left-800 {
  margin-left: clamp(2.14rem, 1.74rem + 1.99vw, 3.16rem);
}
.gap-left-900 {
  margin-left: clamp(2.67rem, 2.07rem + 3vw, 4.21rem);
}
.gap-left-1000 {
  margin-left: clamp(3.34rem, 2.45rem + 4.43vw, 5.61rem);
}
.gap-right-0 {
  margin-right: 0;
}
.gap-right-300 {
  margin-right: clamp(0.7rem, 0.66rem + 0.2vw, 0.8rem);
}
.gap-right-400 {
  margin-right: clamp(0.88rem, 0.83rem + 0.24vw, 1rem);
}
.gap-right-500 {
  margin-right: clamp(1.09rem, 1rem + 0.47vw, 1.33rem);
}
.gap-right-600 {
  margin-right: clamp(1.37rem, 1.21rem + 0.8vw, 1.78rem);
}
.gap-right-700 {
  margin-right: clamp(1.71rem, 1.45rem + 1.29vw, 2.37rem);
}
.gap-right-800 {
  margin-right: clamp(2.14rem, 1.74rem + 1.99vw, 3.16rem);
}
.gap-right-900 {
  margin-right: clamp(2.67rem, 2.07rem + 3vw, 4.21rem);
}
.gap-right-1000 {
  margin-right: clamp(3.34rem, 2.45rem + 4.43vw, 5.61rem);
}
/* end of gap */

/* * widths */

.leading-tight {
  line-height: 1;
}
.measure-long {
  max-width: 65ch;
}
.measure-medium {
  max-width: 58ch;
}
.measure-short {
  max-width: 50ch;
}

/* end of widths */

/* * text font sizes */
.text-0 {
  font-size: 0;
}
.text-300 {
  font-size: clamp(0.7rem, 0.66rem + 0.2vw, 0.8rem);
}
.text-400 {
  font-size: clamp(0.88rem, 0.83rem + 0.24vw, 1rem);
}
.text-500 {
  font-size: clamp(1.09rem, 1rem + 0.47vw, 1.33rem);
}
.text-600 {
  font-size: clamp(1.37rem, 1.21rem + 0.8vw, 1.78rem);
}
.text-700 {
  font-size: clamp(1.71rem, 1.45rem + 1.29vw, 2.37rem);
}
.text-800 {
  font-size: clamp(2.14rem, 1.74rem + 1.99vw, 3.16rem);
}
.text-900 {
  font-size: clamp(2.67rem, 2.07rem + 3vw, 4.21rem);
}
.text-1000 {
  font-size: clamp(3.34rem, 2.45rem + 4.43vw, 5.61rem);
}

/* end of text font sizes */

/* * font-weight */
.weight-regular {
  font-weight: 400;
}
.weight-medium {
  font-weight: 500;
}
.weight-bold {
  font-weight: 700;
}
/* end of font-weight */

/* * typography */
.display-large {
  /* font-size: clamp(1em, 0.9rem + 14.3472vw, 14.7125rem); 221px */
  font-size: clamp(1em, 0.9rem + 11.3472vw, 14.7125rem); /* 221px */
  line-height: 0.8;
  /* letter-spacing: 1.33px; */
  /* chrome */
  /* letter-spacing: .01ch; */
  /* mozilla */
  /* letter-spacing: -0.05ch; */
  letter-spacing: 0.0618ch;
}
/* 1.38125x less than large */
.display-medium {
  font-size: clamp(2.65rem, 1rem + 8.6vw, 10rem); /* 160px */
  line-height: 1;
}
.display-small {
  /* font-size: 98.8875px; */
  /* font-size: clamp(2.65rem, 1rem + 8.6vw, 8rem); 98.8875px */
  /* font-size: clamp(2.65rem, 1rem + 8.6vw, 6.17969rem); */
  /* changing o fit the recipe heading without wrapping */
  font-size: clamp(2.65rem, 1rem + 4.6vw, 6.17969rem);
  line-height: 1;
}
.display-smaller {
  /* font-size: 61.1171199px; */
  /* font-size: clamp(2.65rem, 1rem + 8.6vw, 3.77969rem); */
  /* changing o fit the method and ingredients heading without wrapping */
  font-size: clamp(2.65rem, 1rem + 2.7vw, 6.17969rem);
  line-height: 1;
  font-weight: 800;
  text-transform: uppercase;
}

.display-large,
.display-medium,
.display-small {
  text-align: center;
}

.display-medium,
.display-small,
.display-smaller {
  color: var(--mdc-theme-primary, #9c413d);
}
/* uppercase and set font weight to 900 */
.display-large,
.display-medium,
.display-small,
.title-large,
.title-medium,
.title-small {
  text-transform: uppercase;
  font-weight: 900;
  font-variation-settings: "wght" var(--display-heading-weight, 900);
}

.headline-large {
  font-size: clamp(1.68056rem, 1rem + 4.16667vw, 4.752875rem); /* 76.046px */
  line-height: 1.2;
  color: #201a19;
}
.headline-medium {
  font-family: "Work Sans";
  font-size: 47px;
  line-height: 1.04;
}
.headline-small {
  font-family: "Work Sans";
  font-size: clamp(1.68106rem, 1.68106rem + 0.688978vw, 2.3rem); /* 30px */
  line-height: 1.2;
}
.headline-large,
.headline-medium,
.headline-small,
.sub-headline-medium {
  font-weight: 700;
}

.sub-headline-medium {
  font-size: clamp(1rem, 0.6rem + 1.025vw, 1.4375rem); /* 23px */
  line-height: 30px;
  letter-spacing: 0.25px;
  text-transform: uppercase;
}

.title-large {
  font-size: 120px;
  line-height: 120px;
  letter-spacing: -0.25px;
}
.title-medium {
  font-size: 90px;
  line-height: 72px;
}
.title-small {
  font-size: clamp(1.68056rem, 1rem + 2.75167vw, 3.4765rem); /* 55.6242 */
  line-height: 1.2;
}

.body-large {
  font-weight: 600;
  font-size: 30px;
  line-height: 30px;
  letter-spacing: 0.5px;
}
.body-medium {
  font-weight: 400;
  font-size: clamp(1.4375rem, 0.775rem + 0.618vw, 1.4375rem); /* 23px */
  line-height: 30px;
  letter-spacing: 0.25px;
}
.body-small {
  font-weight: 400;
  font-size: var(--body-small, clamp(1rem, 0.9rem + 0.25vw, 1.25rem));
  line-height: 1.5;
  letter-spacing: 0.4px;
}

/* * colors material ui */
.mdc-theme--primary {
  color: var(--mdc-theme-primary);
}
.mdc-theme--primary-bg {
  background-color: var(--mdc-theme-on-primary);
}

.mdc-theme--primary-contrast {
  color: var(--mdc-theme-primary-contrast, #803431);
}

.mdc-theme--on-primary {
  color: var(--mdc-theme-primary-container);
}
.mdc-theme--on-primary-bg {
  background-color: var(--mdc-theme-on-primary-container);
}
.mdc-theme--on-primary-bg-inverse {
  background-color: var(--mdc-theme-primary-container);
}

.mdc-theme--secondary {
  color: var(--mdc-theme-secondary);
}
.mdc-theme--secondary-bg {
  background-color: var(--mdc-theme-on-secondary);
}
.mdc-theme--on-secondary {
  color: var(--mdc-theme-secondary-container);
}
.mdc-theme--on-secondary-bg {
  background-color: var(--mdc-theme-on-secondary-container);
}

.mdc-theme--tertiary {
  color: var(--mdc-theme-tertiary);
}
.mdc-theme--tertiary-bg {
  background-color: var(--mdc-theme-on-tertiary);
}
.mdc-theme--on-tertiary {
  color: var(--mdc-theme-tertiary-container);
}
.mdc-theme--on-tertiary-bg {
  background-color: var(--mdc-theme-on-tertiary-container);
}

.mdc-theme--error {
  color: var(--mdc-theme-error);
}
.mdc-theme--error-bg {
  background-color: var(--mdc-theme-on-error);
}
.mdc-theme--on-error {
  color: var(--mdc-theme-error-container);
}
.mdc-theme--on-error-bg {
  background-color: var(--mdc-theme-on-error-container);
}

.mdc-theme--surface {
  color: var(--mdc-theme-surface);
}
.mdc-theme--on-surface {
  background-color: var(--mdc-theme-on-surface);
}

.mdc-theme--background {
  color: var(--mdc-theme-background);
}
.mdc-theme--on-background {
  background-color: var(--mdc-theme-on-background);
}

/* * */
/* * 3. block */

.container {
  margin-inline: auto;
  padding: 0 1em;
  max-width: 77.875rem;
}

@media screen and (min-width: 60rem) {
  .container {
    /* max-width: 42.875rem; */
    /* max-width: clamp(35.875rem, 90.5vw ,61.188rem); */
    /* max-width: clamp(35.875rem, 88.101vw, 61.188rem); */
    inline-size: clamp(35.875rem, 88.101vw, 61.188rem);
  }
}
@media screen and (min-width: 60rem) {
  .container {
    /* max-width: clamp(42.875rem, 87.5vw, 61.188rem); */
    inline-size: clamp(42.875rem, 87.5vw, 61.188rem);
  }
}
@media screen and (min-width: 70rem) {
  .container {
    /* max-width: 77.875rem; */
    /* max-width: clamp(56.188rem, 87vw, 77.875rem); */
    /* ! for demo 4k */
    /* max-width: clamp(56.188rem, 87vw, 101.75rem); */
    inline-size: clamp(56.188rem, 87vw, 101.75rem);
  }
}

/* * */
/* primary navigation */
ul.nav__menu {
  display: flex;
  flex-wrap: wrap;
  column-gap: 1em;
  align-items: center;
  justify-content: center;
}
.navigation__navbar {
  gap: 1em;
}
/* * */
/* components */
/* * */

/* button */
button {
  border: 0;
  border-radius: var(--corner-button--1, 1.25rem);
  background: var(--_btn-bg-clr, var(--mdc-theme-primary, #9c413d));
  color: var(--_btn-clr, var(--mdc-theme-on-primary, #ffffff));
  font-family: var(--ff-sans);
  font-size: var(--fs-400);
  line-height: 1.2;
  /* white-space: nowrap; */
  text-decoration: none;
  /* padding: 0.25rem 0.5rem; */
  padding: var(--flow-space);
  margin: 0;
  cursor: pointer;
  /* margin-inline-start: 0; */
}
/* from mdn */
/* input:invalid ~ span:after {
  content: "✖";
  padding-left: 5px;
  position: absolute;
}

input:valid ~ span:after {
  content: "✓";
  padding-left: 5px;
  position: absolute;
} */

.btn-secondary {
  /* background: var(--mdc-theme-backgrund); */
  /* color: var(--mdc-theme-primary); */
  --_btn-clr: var(--mdc-theme-primary, #9c413d);
  --_btn-bg-clr: var(--mdc-theme-background, #ffffff);
  border: 2px solid var(--_btn-clr, var(--mdc-theme-primary, #9c413d));
}
/* * add to exception - cube css */

button[data-state="scroll"] {
  border-radius: 50%;
  padding: 0;
  font-size: 2em;
  max-inline-size: 0.9786em;
}
button[data-state="btn-link--arrow"] {
  border-radius: 0;
  padding: 0;
  margin: 0;
}

button.btn-search[data-state="search-icon"] {
  border-radius: 50%;
  background: none;
  max-width: fit-content;
}

button[data-state="btn-link--arrow"] > svg {
  fill: var(--mdc-theme-primary);
  background: var(--mdc-theme-background);
}
/* styles input text search bar*/
.nav__menu__search > input[type="text"][data-state="small"] {
  border-radius: var(--corner);
  --_color: var(--mdc-theme-outline);
  border: 2px solid var(--_color);
  padding-inline-start: var(--corner);
}
.nav__menu__search > input[type="text"][data-state="small"]::placeholder {
  font-size: calc(var(--fs-400) * 1.618);
  --_color: var(var(--mdc-theme-primary, #9c413d));
  --_spacing: 2px;
  color: var(--_color);
  padding-inline-start: var(--_spacing);
  font-weight: 400;
  position: relative;
  bottom: var(--_spacing);
}
/* .nav__menu__search > input[type="text"][data-state="small"]::placeholder:focus-visible {
color: white;} */

.chevron--right::after {
  content: "\203A";
  /* color: var(--mdc-theme-primary); */
  font-weight: 700;
}
.chevron--left::after {
  content: "<";
}

/* media scroll arrows */
.media-scroll-arrows {
  display: flex;
  gap: var(--padding-inline-400);
  /* padding-inline: 1em; */
}

.hero__images.media-scroll-arrows {
  /* display: flex; */
  align-items: center;
  margin-inline-end: var(--padding-inline-100);
  justify-content: center;
}
@media screen and (min-width: 40em) {
  .hero__images.media-scroll-arrows {
    /* display: flex; */
    /* align-items: center; */
    /* margin-inline-end: var(--padding-inline-100); */
    justify-content: end;
  }
}

.hero__images.media-scroll-arrows > :first-child svg {
  color: var(--mdc-theme-primary);
  background: var(--mdc-theme-background);
}
/* card */

.recipe-card {
  display: grid;
  gap: 1rem;
  place-items: center;
  height: min-content;
}
.recipe-card img {
  width: 100%;
  height: auto;
}

.recipe-card__title {
  display: flex;
  /* align-items: center; */
  /* max-width: fit-content; */
  /* column-gap: 1ch; */
}
/* * */
/* recipe__navigation */
ul.recipes__navigation {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5em;
  align-items: center;
  row-gap: 0.1em;
  line-height: 1;
}

.active--link {
  color: var(--mdc-theme-primary);
}
/* penultimate section */

/* .banner {
  padding-block: var(--padding-inline-200);
}

@media screen and (min-width: 40em) {
  .banner {
    padding-block: var(--padding-inline-600);
  }
} */

.banner__wrapper {
  grid-row-gap: 1em;
}
.banner__wrapper > :first-child {
  margin-block-start: var(--padding-inline-800);
}

.banner__wrapper > * {
  padding-inline: var(--padding-inline-600, 2rem);
  padding-block-end: var(--padding-inline-600);
  padding-block-start: var(--padding-inline-600);
  border-radius: var(--corner);
}

.banner__wrapper__end {
  padding-inline: 0;
}

@media screen and (min-width: 40em) {
  .banner__wrapper__end {
    padding-inline: var(--padding-inline-600, 2rem);
  }
}
.banner__wrapper > :nth-child(2) {
  border-radius: 0;
}

/* banner__wrapper add grid column */
@media screen and (min-width: 40em) {
  /* .banner__wrapper {
    grid-column: 1 / span 2;
  } */
  .banner__wrapper {
    display: grid;
    grid-template-columns: 0.618fr 1fr;
    gap: 0;
    place-items: center;
  }
}

/* .banner__wrapper__end  {
  gap: 1rem;
} */

@media screen and (min-width: 60em) {
  .banner__wrapper > :first-child {
    margin-block-start: unset;
  }

  .banner__wrapper__start {
    position: relative;
    top: -3em;
    /* --_bg-color: pink; */
    background: var(--mdc-theme-surface);
    /* background: var(--mdc-theme-background); */
    left: -2em;
    box-shadow: -1px 7px 14px 1px rgb(0 0 0 / 14%);
    transform: scale(1);
    transition: all 0.618s ease-out;
    /* fill-opacity: 0.5; */
  }

  .banner__wrapper__start:hover {
    transform: scale(1.0618);
    transition: all 0.382s ease-in-out;
  }
}

.get-involved-cta {
  display: block;
  margin-top: var(--flow-space-400);
}
.get-involved-cta:hover {
  text-decoration: underline;
}

cite.font-family--cursive {
  margin-top: var(--corner);
  align-self: flex-end;
  --scale: 1.618;
  margin-block-start: calc(var(--padding-inline-400) / var(--scale));
  font-weight: 400;
}
cite.font-family--cursive a {
  color: var(--mdc-theme-primary-contrast, #803431);
}

a.get-involved-cta {
  color: var(--mdc-theme-primary-contrast, #803431);
}

/* * */
/* footer__navigation */
ul.footer__navigation {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.footer__navigation {
  display: flex;
  flex-direction: column;
  align-items: center;
}

ul.footer__social {
  display: flex;
  flex-direction: column;
  align-items: center;
}

@media screen and (min-width: 40rem) {
  ul.footer__navigation {
    display: flex;
    flex-direction: row;
    /* align-items: center; */
    gap: 1em;
  }

  .footer__navigation {
    display: flex;
    flex-direction: row;
    gap: 1em;
    /* align-items: center; */
  }

  ul.footer__social {
    display: flex;
    gap: 1em;
    flex-direction: row;
    /* align-items: center; */
  }
}
/* * media/image scrolling — netflix style */

.media-scroller {
  --_spacer: 2em; /* _ is for private property which isn't mentioned in the root - naming convention */
  display: grid;
  /* auto flow helps when there is no defined quantity of cards */
  gap: var(--_spacer);
  grid-auto-flow: column;
  /* for even display of child elements use 50% */
  /* grid-auto-columns: 50%; */
  /* to show the sides of next child */
  grid-auto-columns: 45%;
  /* padding: 0 var(--_spacer) var(--_spacer); */
  padding: var(--_spacer);
  border-radius: var(--_spacer);
  overflow-x: auto;
  /* helpful for touch device - doesn't pull the whole container down or side */
  overscroll-behavior-inline: contain;
  /* background-color: var(--mdc-theme-surface-variant); */
}

/* media scrolling groups */
.media-scroller--with-groups {
  border: 2px solid hotpink;
}
.media-group {
  border: 2px solid limegreen;
}

/* media individual elements */
.media-element {
  /* for title correction placement */
  display: grid;
  grid-template-rows: min-content;
  gap: var(--_spacer);
  /* padding: var(--_spacer); */
  padding: 0;
  background: var(--mdc-theme-surface2);
  border-radius: 1rem;
  box-shadow: 0 2px 4px #52434250;
}
/* use logical propert inline-size instead of width  */
.media-element > img {
  inline-size: 100%; /* logical property for width */
  /* aspect-ratio: 16 / 9; */
  /* aspect-ratio: .618 / 1; */
  object-fit: cover;
}

/* snapping media scroller element */
.snaps-inline {
  /* make sure `inline / x` comes first -- before mandatory */
  scroll-snap-type: inline mandatory;
  /* fix getting to the space before and after first and last child */
  scroll-padding-inline: var(--_spacer, 2rem);
}
/* what does it need to snap to */ /* select all direct children */
.snaps-inline > * {
  scroll-snap-align: start;
}

/* * */
/* * 4. exceptions */
@media screen and (max-width: 40em) {
  .hero__images.media-scroller.snaps-inline[data-state="no-scroll-bg"] {
    scroll-padding-inline: 0;
  }
}

a.disabled {
  pointer-events: none;
}

/* end of cube css */

/* * */
/* * custom styling */
/* * */

/* * header */

.logo__wrapper {
  overflow: hidden;
}
span.logo {
  font-family: var(--ff-cursive);
  font-weight: 400;
  font-size: clamp(3.375rem, 1rem + 3.888888vw, 4.752875rem);
  transform: rotate(351.65deg);
  /* ! for demo only */
  display: grid;
  place-items: center;
}
span.logo.mdc-theme--primary > * {
  /* text-shadow: var(--mdc-theme-shadow-on-text); */
  text-shadow: 0 2px 4px rgb(0 0 0 / 12%);
}
@media screen and (min-width: 40em) {
  span.logo.footer {
    display: inline-block;
    place-items: flex-start;
  }
}

/* nav title */
div.nav__heading .char,
h1.nav__heading {
  /* font-family:var(--font-display); */
  letter-spacing: -0.19ch;
}
.nav__heading.display-large.char:hover {
  font-weight: 600;
  --display-heading-weight: 600;
  transition-delay: 100ms; /* 0s */
  /* letter-spacing: -0.21ch; */
  letter-spacing: 0.1ch;
}
.nav__heading.display-large.char {
  transition: 0.3s cubic-bezier(0.45, 0.05, 0.22, 1.3);
  transition-delay: 0.2s;
  /* cursor: auto; */
}
/* * */
/* * section hero */

@media screen and (min-width: 60em) {
  .hero {
    display: grid;
    grid-auto-flow: column;
    /* column-gap: 140px; */
  }
  /* .hero__content.\|.flow.flow-space-500 {
    min-inline-size: 40vw;
  } */
}

.hero__bg-image {
  position: relative;
  top: -850px;
  right: -634px;
}

@media screen and (min-width: 60em) {
  .recipe-scroll-component[data-state="overflow-right"] {
    position: relative;
    right: -3.4vw;
    /* right: -7.4vw; */
    /* right: -6vw; */
  }
}

.hero__images.\|.media-scroller.snaps-inline {
  margin-block-start: var(--padding-inline-400);
}
@media screen and (min-width: 40em) {
  .hero__images.\|.media-scroller.snaps-inline {
    margin-block-start: var(--padding-inline-0);
  }
}

.hero__images.media-scroller[data-state="no-scroll-bg"] {
  --_spacer: 2rem; /* _ is for private property which isn't mentioned in the root - naming convention */
  display: grid;

  gap: 1em;
  grid-auto-flow: column;
  /* for even display of child elements use 50% */
  grid-auto-columns: 50%;
  /* grid-auto-columns: auto; */
  padding: var(--_spacer);
  border-radius: calc(var(--_spacer, 2em) * 1.618);
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  /* background-color: var(--mdc-theme-on-surface--morph-bg); */
}

/* @media screen and (min-width: 40em) {
  .hero__images.media-scroller[data-state="no-scroll-bg"] {
    grid-auto-columns: 70%;
  }
} */
@media screen and (min-width: 40em) {
  .hero__images.media-scroller[data-state="no-scroll-bg"] {
    /* grid-auto-columns: 70%; */
    grid-auto-columns: auto;
  }
}
.hero__images__image.\|.media-element
  .hero__images.media-scroller[data-state="no-scroll-bg"]
  > .media-element {
  background: none;
  box-shadow: none;
  padding: 0;
}

.media-scroller[data-state="no-scroll-bg"] .media-element {
  object-fit: cover;
  border-radius: 2em;
  box-shadow: var(--mdc-theme-shadow);
}
.hero__images__image.media-element {
  contain: content;
}

.snaps-inline[data-state="no-scroll-bg"] {
  --_spacer: 0;
  /* make sure `inline / x` comes first -- before mandatory */
  scroll-snap-type: inline mandatory;
  /* fix getting to the space before and after first and last child */
  /* scroll-padding-inline: var(--_spacer, 2rem); */
  /* scroll-padding-inline: 0; */
}

/* !  */
/* [ ] grid area */
/* * */
/* * section - recipes - kitchen */

.recipes__wrapper__heading.label-wrapper--full-bleed {
  /* grid-area: "recipe-heading"; */
  --_scale: 1.618em;
  border-bottom-right-radius: calc(var(--corner) + var(--_scale));
  /* position: relative; */
}

.recipes__wrapper__content__nutrition {
  gap: 1em;
  padding-inline: 1em;
  /* position: absolute; */
  padding-block: 0.5em;
  border-radius: calc(var(--corner) * 1.618);
  border-block-end: 2px solid var(--mdc-theme-primary, #9c413d);
  inline-size: fit-content;
}
span.recipes__wrapper__content__body.body-small {
  max-inline-size: 43ch;
}
.recipes__wrapper__contant__nutrition__item {
  display: grid;
}

h3.recipes__wrapper__heading.label-wrapper--full-bleed::before {
  content: "";
  display: inline-block;
  width: 833.3333%;
  height: 1.2em;
  background: var(--mdc-theme--inverse-primary, #ffb3ab);
  /* position: relative; */
  left: 0;
  position: absolute;
  transform: rotate(180deg);
  transform-origin: left;
}
h3.recipes__wrapper__heading.label-wrapper--full-bleed::after {
  content: " \203A ";
  align-items: center;
  color: var(--mdc-theme-primary, #9c413d);
  vertical-align: text-bottom;
}

@media screen and (min-width: 40em) {
  /* .recipes__wrapper__body {
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    grid-column-gap: 1em;
    grid-auto-flow: column;
  } */

  /* .recipes__wrapper__image {
    grid-column-start: 6;
    grid-column-end: 11;
  } */
  .recipes__wrapper__image img {
    border-radius: calc(var(--corner) * 1.618);
  }

  /* .recipes__wrapper__content.\|.flow.flow-space-400.\| {
    grid-column-start: 1;
    grid-column-end: 4;
  } */
}

.recipes__wrapper__contant__nutrition__item > * {
  font-size: 16px;
}
.recipes__wrapper__contant__nutrition__item > * + * {
  font-weight: bold;
}

/* **** */
/* * section - collections carte blanche */
/* **** */

/* ? copilot did something amazing */
/* .collections__wrapper__heading.label-wrapper--full-bleed {
  --_scale: 1.618em;
  border-bottom-right-radius: calc(var(--corner) + var(--_scale));

  grid-area: "collection-heading";
} */ /* position was relative */

.collections.media-scroller[data-state="no-scroll-bg"] {
  --_spacer: 0.2rem;
  display: grid;
  grid-auto-flow: column;
  /* for even display of child elements use 50% */
  /* grid-auto-columns: 20%; */
  /* grid-auto-columns: 50%; */
  grid-auto-columns: clamp(10%, 100% - 52vw, 32.8%);
  gap: 2em;
  padding: var(--_spacer);
  border-radius: calc(var(--_spacer, 2em) / 1.618);
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  overflow-wrap: anywhere;
  /* background-color: var(--mdc-theme-on-surface--morph-bg); */
}
.collections.media-scroller[data-state="no-scroll-bg"] .media-element {
  object-fit: cover;
  border-radius: 1em;
  box-shadow: var(--mdc-theme-shadow);
}
@media screen and (min-width: 40em) {
  .collections.media-scroller[data-state="no-scroll-bg"] {
    /* grid-auto-columns: 70%; */
    border-radius: calc(var(--_spacer, 2em) * 1.618);
  }
}

/* **** */
/* section - banner cta */
/* **** */

.banner {
  /* background: linear-gradient(90deg, #fad9d5, #f5b2aa); */
  background: linear-gradient(
    to bottom,
    #ffdad5 0%,
    #ffdad5 0%,
    #ffdad5 0%,
    #ffdad5 0%,
    #ffb3ab 32.8%,
    #ffb3ab 32.8%,
    #ffb3ab 100%,
    #ffb3ab 100%
  );
}

@media screen and (min-width: 40em) {
  .banner.gap-top-1000.\| {
    background: linear-gradient(
      to right,
      #ffdad5 0%,
      #fad9d5 32.8%,
      #f5b2aa 61.8%,
      #f5b2aa 100%
    );
  }
}

.banner__quote {
  position: relative;
  display: flex;
  flex-direction: column;
}

.banner__quote blockquote::before {
  /* content: "\275D"; */
  content: "\201C";
  display: inline-block;
  position: absolute;
  /* height: 2rem; */
  /* width: 2rem; */
  font-size: 4rem;
  left: -0.618em;
  top: -0.618em;
  /* font-size: large;
  left: -1em;
  top: -0.5em; */
  min-block-size: -webkit-fill-available;
  /* background: hsl(0, 75%, 42%); */
}

/* .banner__quote blockquote::after {
  content: "\275E";
  display: inline-block;
  position: absolute;
  height: 2rem;
  width: 2rem;
  left: -2em;
  top: -0.5em;
} */

/* **** */
/* footer */
/* **** */

.footer__primary {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}

@media screen and (min-width: 40em) {
  .footer__primary {
    flex-direction: row;
  }
}

/* JS Fun */

.editableContent {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1em;
  border-radius: calc(var(--corner) * 1.618);
  background-color: var(--mdc-theme-on-surface--morph-bg);
  box-shadow: var(--mdc-theme-shadow);
  cursor: pointer;
}

/* [ ] todo */

.navigation {
  display: grid;
  place-items: center;
}

.site-search {
  padding-block: 1em;
}

.site-search input {
  border-radius: 1em;
  border: 0;
  background-color: #eeeeee;
  padding-left: 1rem;
  font-size: 1em;
}

.site-search input::placeholder {
  font-size: 1rem;
  padding-inline-start: 0.5em;
  vertical-align: top;
}

/* todo */

.search-bar {
  /* place-items: center; */
  /* position: relative; */
  display: grid;
  /* align-items: baseline; */
  /* max-inline-size: -moz-available; */
}

.search-bar input {
  border-radius: 1.618em;
  border: 1px solid #ccc;
  font-family: inherit;
  padding-inline-start: 1em;
  padding-block: 0.5em;
  /* width: unset; */
}

@media screen and (max-width: 40em) {
  .search-bar input {
    /* width: fit-content; */
  }
}

.search-bar button::placeholder {
  color: #ccc;
}

.search-bar button {
  border-radius: 50%;
  border: 0;
  padding: 0;
  cursor: pointer;
  background-color: transparent;
  position: relative;
  left: 10em;
  top: -2em;
  align-self: baseline;
  color: #ccc;
}

.search-bar button:hover {
  --mdc-theme-primary: #9c413d;
  color: var(--mdc-theme-primary, #9c413d);
}

/* **** */
/* **** */
/* AutoCOmplete Search courtesy of Chris Barber Riley */
/* **** */
/* **** */
.search-wrapper-placeholder {
  position: relative;
  display: grid;
  place-items: center;
}

.wrapper {
  margin: 0 auto;
  background: #fff;
  border-radius: 25px;
  /* * This is the secret sauce -- box-shadow */
  box-shadow: -1px -1px 2px 2px rgba(0, 0, 0, 0.053);
  /* position: relative; */
  position: absolute;
  top: 0;
  scrollbar-gutter: 10em;
  /* width: 450px; */
  /* max-width: 45vw; */
  width: clamp(40vw, 90vw, 90vw);
  max-width: 450px;
  z-index: 1000;
}

input[data-state="fa-autocomplete"] {
  /* max-width: 100%; */
  width: 100%;
  border: none;
  height: 50px;
  border-radius: 25px;
  padding-inline-start: 10px;
  padding-inline-end: 40px;
  font-size: 18px;
  font-family: var(--ff-sans);
  box-shadow: 0 1px 2px 2px rgba(0, 0, 0, 0.1);
}

input[data-state="fa-autocomplete"]:focus {
  outline: none;
}

button[data-state="fa-search-icon"].btn-fa-search {
  position: absolute;
  border: 0;
  background: none;
  top: 0;
  right: 0;
  height: 50px;
  line-height: 50px;
  padding: 0;
  width: 50px;
}

button[data-state="fa-search-icon"].btn-fa-search i {
  width: 100%;
  color: var(--mdc-theme-primary-contrast);
  line-height: 50px;
  font-size: 22px;
}
button[data-state="fa-search-icon"].btn-fa-search i:hover {
  color: var(--mdc-theme-primary);
}
.results {
  padding: 0;
}

.results ul {
  margin: 0;
  padding: 0;
}

.results ul li {
  list-style: none;
  border-radius: 3px;
  opacity: 0; /* make it to 0 */
  display: none;
  padding: 8px 12px;
  transition: all 0.5s linear;
}

.show .results ul li {
  opacity: 1;
  display: block;
}

.show .results {
  padding: 10px;
}

.results ul li:hover {
  background: #ececec;
}
/* contact-form--netlify */
.contact-form--netlify {
  display: grid;
  gap: var(--flow-space-400);
  grid-auto-columns: min-content;
  justify-content: center;
  /* grid-auto-rows: max-content; */
  /* place-items: center; */
}

/* footer */

footer {
  background-color: var(--mdc-theme-neutral-100);
  padding-bottom: clamp(0.88rem, 0.83rem + 0.24vw, 1rem);
  padding-top: clamp(0.88rem, 0.83rem + 0.24vw, 1rem);
}

.recipes__recipe-wrapper {
  display: grid;
  grid-template-areas:
    "recipe-heading"
    "recipe-image"
    "recipe-content";
  /* grid-template-columns: 6.18fr 3.82fr; */
  grid-template-rows: auto 1fr auto;
  row-gap: 1em;
  position: relative;
}

@media screen and (min-width: 40em) {
  .recipes__recipe-wrapper {
    display: grid;
    grid-template-areas:
      "recipe-heading recipe-image"
      "recipe-content recipe-image"
      "recipe-content recipe-image";
    grid-template-columns: 6.18fr 3.82fr;
    grid-template-rows: auto 1fr 1fr;
    row-gap: 1em;
  }

  .recipes__wrapper__heading.label-wrapper--full-bleed {
    grid-area: recipe-heading;
    padding-inline-end: clamp(10vw, 12vw, 20vw);
    max-inline-size: max-content;
  }

  .recipes__wrapper__image {
    grid-area: recipe-image;
  }

  .recipes__wrapper__content {
    grid-area: recipe-content;
    /* display: grid; */
    /* position: relative; */
    /* grid-auto-flow: row; */
    /* grid-column: 1 / 3; */
  }
}

.hero__images__image.media-element > picture {
  object-fit: cover;
  height: 250px;
  /* height: min-content; */
  width: 100%;
}

.recipe-card img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}