main {
  display: block; }

section {
  margin-top: -10rem;
  padding-top: 10rem;
  position: relative;
  grid-template-columns: repeat(15, 1fr);
  grid-auto-rows: auto;
  display: grid;
  column-gap: var(--ph);
  row-gap: 3.75rem;
  margin-bottom: 13.5rem; }
  @media (max-width : 900px) {
    section {
      grid-template-columns: repeat(5, 1fr);
      row-gap: var(--pm); } }
  @media (max-width : 900px) {
    section {
      margin-bottom: 5rem;
      margin-top: 0;
      padding-top: 0; } }
h2 {
  font-family: 'SoehneBreit';
  letter-spacing: 0.2em;
  font-weight: normal;
  font-size: var(--fl);
  text-transform: uppercase;
  position: absolute;
  transform: rotate(180deg);
  writing-mode: vertical-rl; }
  @media (max-width : 900px) {
    h2 {
      font-size: 1.75rem; } }
  @media (max-width: 1050px) {
    h2 {
      height: min-content; } }
.introduction h2 {
  grid-column: 1;
  grid-row: 1/3; }

.introduction article {
  grid-column: 4/10; }
  .introduction article p:not(:last-child) {
    margin-bottom: 1em; }

.introduction .carousel-container {
  grid-column: 3/16;
  position: relative; }
  .introduction .carousel-container .swiper-slide {
    display: grid;
    row-gap: 3.75rem;
    background-color: var(--white);
    height: 100%; }
    .introduction .carousel-container .swiper-slide .aspectholder {
      grid-column: auto; }
  .introduction .carousel-container .swiper-buttons {
    position: absolute;
    right: 0;
    bottom: -2rem;
    width: 6.25rem; }
    .introduction .carousel-container .swiper-buttons .swiper-button-next,
    .introduction .carousel-container .swiper-buttons .swiper-container-rtl .swiper-button-prev {
      right: 0; }
    .introduction .carousel-container .swiper-buttons .swiper-button-prev,
    .introduction .carousel-container .swiper-buttons .swiper-container-rtl .swiper-button-next {
      left: 0; }

@media (max-width : 900px) {
  .introduction h2 {
    grid-column: 1;
    height: max-content; }
  .introduction article {
    grid-column: 2/6; }
  .introduction .carousel-container {
    grid-column: 2/6; } }

.current h2 {
  grid-column: 2;
  grid-row: 1; }

.current article {
  grid-column: 4/9; }
  .current article p:not(:last-child) {
    margin-bottom: 1em; }
  .current article nav {
    margin-top: 2em;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap; }
    .current article nav a {
      font-weight: normal;
      margin-bottom: 2em; }
      .current article nav a span {
        border-bottom: 1px solid currentColor;
        padding-bottom: 0.8em; }

.current .aspectholder {
  grid-column: 11/16;
  height: 0;
  padding-bottom: 166%;
  position: relative; }

@media (max-width : 900px) {
  .current h2 {
    grid-column: 1;
    height: max-content; }
  .current article {
    grid-column: 2/6; }
  .current .aspectholder {
    grid-column: 3/6; } }

.menu .filters {
  grid-column: 1/4; }

.menu details {
  outline: 0;
  display: flex;
  flex-direction: row;
  user-select: none;
  position: sticky;
  top: 10rem; }
  .menu details summary {
    margin-bottom: 1em;
    outline: 0;
    cursor: pointer; }
    .menu details summary::after {
      content: '  +';
      white-space: pre; }
  .menu details[open] summary::after {
    content: '  -'; }
  .menu details summary::-webkit-details-marker {
    display: none; }
  .menu details button {
    background-color: transparent;
    appearance: none;
    font: inherit;
    padding: 0;
    border: 0;
    border-radius: 0;
    display: block;
    line-height: inherit;
    text-transform: capitalize; }

.menu > div {
  grid-column: 4/16; }
  .menu > div > div {
    margin-top: -10rem;
    padding-top: 10rem;
    margin-bottom: 12.5rem; }
    .menu > div > div:last-of-type {
      margin-bottom: 0; }
    .menu > div > div h3 {
      grid-column: 1/3;
      font-weight: normal;
      margin-left: 2.25rem; }
    .menu > div > div li:not(:last-child) {
      margin-bottom: 1em; }

@media (max-width : 900px) {
  .menu .filters {
    grid-column: 1/6; }
  .menu details {
    position: relative;
    top: auto; }
  .menu > div {
    grid-column: 1/6; }
    .menu > div > div {
      margin-bottom: 5rem; } }

[twocolumn] {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: auto;
  row-gap: 3.75rem;
  column-gap: var(--ph); }
  [twocolumn] li {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-auto-rows: auto;
    column-gap: var(--ph);
    row-gap: 0; }
    [twocolumn] li p.title {
      grid-column: 1/6; }
    [twocolumn] li p.description {
      grid-column: 1/5;
      margin-left: 2.25rem; }
    [twocolumn] li p.price {
      grid-column: 5; }
  @media (max-width : 900px) {
    [twocolumn] {
      grid-template-columns: repeat(1, 1fr);
      row-gap: 1em;
      column-gap: 0; }
      [twocolumn] > * {
        grid-column: 1; }
      [twocolumn] li p.title {
        grid-column: 1/6; }
      [twocolumn] li p.description {
        grid-column: 1/6; }
      [twocolumn] li p.price {
        grid-column: 6; } }
[imagewithcolumn] {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: auto;
  row-gap: 3.75rem;
  column-gap: var(--ph); }
  [imagewithcolumn] li {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-auto-rows: auto;
    column-gap: var(--ph);
    row-gap: 0; }
    [imagewithcolumn] li p.title {
      grid-column: 1/6; }
    [imagewithcolumn] li p.description {
      grid-column: 1/5;
      margin-left: 2.25rem; }
    [imagewithcolumn] li p.price {
      grid-column: 5; }
  @media (max-width : 900px) {
    [imagewithcolumn] {
      grid-template-columns: repeat(1, 1fr);
      row-gap: 1em;
      column-gap: 0; }
      [imagewithcolumn] > * {
        grid-column: 1; }
      [imagewithcolumn] li p.title {
        grid-column: 1/6; }
      [imagewithcolumn] li p.description {
        grid-column: 1/6; }
      [imagewithcolumn] li p.price {
        grid-column: 6; } }
  [imagewithcolumn] .imageholder {
    grid-row: 1/4;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    column-gap: var(--ph); }
    [imagewithcolumn] .imageholder > div {
      grid-column: 1/6; }
  [imagewithcolumn] .aspectholder {
    height: 0;
    padding-bottom: 166%;
    position: relative; }
  @media (min-width : 900px) {
    [imagewithcolumn][left] .imageholder {
      grid-column: 1; }
    [imagewithcolumn][left] h3,
    [imagewithcolumn][left] ul {
      grid-column: 2; }
    [imagewithcolumn][right] .imageholder {
      grid-column: 2; }
    [imagewithcolumn][right] h3,
    [imagewithcolumn][right] ul {
      grid-column: 1; } }
  @media (max-width : 900px) {
    [imagewithcolumn] .imageholder > div {
      grid-column: 1/4; } }
[imagewithcolumn] > div {
  display: flex;
  flex-direction: column;
  justify-content: flex-end; }
  [imagewithcolumn] > div a span {
    border-bottom: 1px solid currentColor;
    padding-bottom: 0.8em; }

.dessert h2 {
  grid-column: 8;
  grid-row: 1/3; }

.dessert article {
  grid-column: 10/15; }
  .dessert article p {
    margin-bottom: 1em; }
  .dessert article a {
    font-weight: normal; }
    .dessert article a span {
      border-bottom: 1px solid currentColor;
      padding-bottom: 0.8em; }

.dessert ul {
  grid-column: 10/15; }
  .dessert ul li {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-auto-rows: auto;
    column-gap: var(--ph);
    row-gap: 0;
    margin-bottom: 1em; }
    .dessert ul li p.title {
      grid-column: 1/6; }
    .dessert ul li p.description {
      grid-column: 1/5;
      margin-left: 2.25rem; }
    .dessert ul li p.price {
      grid-column: 5; }

@media (max-width : 900px) {
  .dessert h2 {
    grid-column: 1; }
  .dessert article {
    grid-column: 2/6; }
  .dessert ul {
    grid-column: 2/6; } }

.notes div {
  grid-column: 10/15; }
  .notes div p:not(:last-child) {
    margin-bottom: 1em; }

@media (max-width : 900px) {
  .notes div {
    grid-column: 2/6; } }