:root {
  --block-bg-color: hsla(0, 0%, 100%, 0.75);
  --block-bg-color-hover: rgb(from var(--block-bg-color) r g b / calc(alpha + .1));
  --block-padding: 1em;

  --header-bg-color: hsl(345, 4%, 22%);
  --header-bg-color-hover: hsl(from var(--header-bg-color) h s calc(l - 10));
  --header-text-color: white;

  --page-width-max: 1400px;
  --content-padding-width: 1em;
  --menu-width: 0px;
}

@media (min-width: 1400px) {
  :root {
    --content-padding-width: 0;
  }
}

.btn {
  background: var(--header-bg-color);
  cursor: pointer;
  color: white;
  padding: .5em;
  border: none;
}

  .btn:hover {
    background: var(--header-bg-color-hover);
  }
/*}*/

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  display: grid;
  background: url("../images/background-6780cb8816834de19ad53f90f8c83f3e.png") repeat;
  grid-template-rows: auto auto 1fr auto;
  grid-template-columns: 1fr;
  grid-template-areas: "header"
    "content-header"
    "main"
    "footer";
}

h1, h2, h3, h4, h5, h6 {
  font-family: Courgette;
  color: var(--header-text-color);
  background: var(--header-bg-color);
  text-align: center;
  padding: .25em .5em;
}

a {
  color: inherit;
}

#page-header {
  --logo-width: 100px;

  font-family: Courgette;
  grid-area: header;
  padding: .5em .5em .5em calc(var(--logo-width) + 2em);
}

  #page-header .logo {
    position: absolute;
    margin-left: calc(-1 * var(--logo-width) - 1em);
    width: var(--logo-width);
    height: auto;
    z-index: 100;
  }

  #page-header h1 {
    margin: 0;
    background: none;
    color: inherit;
    text-align: initial;
    padding: 0;
  }

  #page-header p {
    margin: 0;
  }
/*}*/

#content-header {
  --content-header-height: 200px;
  position: relative;
  min-height: var(--content-header-height);
  grid-area: content-header;
  padding: 0 0;
}

  #content-header h1 {
    min-height: 55px;
    margin: calc(var(--content-header-height) - 55px) 0 0;
    background: rgb(from var(--header-bg-color) r g b / calc(alpha - .1));
    text-align: center;
    font-size: 1.5em;
    padding: .75em 1em .25em;
  }

  #content-header .header-image {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: -1;
    object-fit: cover;
    height: var(--content-header-height);
    width: 100%;
  }
/*}*/

#main-menu {
  display: none;
  grid-area: content-header;
}

main {
  display: contents;
}

  main > * {
    display: contents;
  }

    main > * > * {
      grid-area: main;
      padding: 1em var(--content-padding-width);
    }
/*  }
}*/

#page-footer {
  grid-area: footer;
  font-family: Courgette;
}

#main-menu {
  padding: 1em;
}
  #main-menu ul {
    list-style: none;
    padding: 0;
    margin: 0;
  }

  #main-menu li {
    margin: .5em 0;
  }

  #main-menu a {
    display: block;
  }
/*}*/

#content > article, #content > .blocks {
  background: var(--block-bg-color);
  padding: 1em;
}

#content .blocks__item img {
  max-width: 100%;
}

.blocks__item {
  overflow: auto;
  margin: 1em 0;
}

p {
  margin: 1em 0;
}

@media (min-width: 768px) {
  body {
    grid-template-columns: 1fr var(--menu-width) minmax(auto, calc(var(--page-width-max) - var(--menu-width))) 1fr;
    grid-template-areas:
            "spacing-left header header spacing-right"
            "spacing-left content-header content-header spacing-right"
            "spacing-left menu main spacing-right"
            "spacing-left footer footer spacing-right";
  }

  #main-menu {
    grid-area: sidebar;
  }
}

@supports not (background-color: rgb(from hsl(0, 0%, 100%, 0.75) r g b / calc(alpha + 0.1))) {
  :root {
    --block-bg-color-hover: hsl(0 0% 100% / .85);
    --header-bg-color-hover: hsl(345, 4%, 12%);
  }

  #content-header h1 {
    background-color: hsl(345 4% 22% / .9);
  }
}

/* region form */
.YJmMYtrQPooVxKjh {
  display: none;
}

.dynamic-form {
  --max-row-items: 1;
  --label-span: 24;
  --input-min-span: 24;
}

  .dynamic-form > div {
    display: grid;
    grid-template-columns: repeat(12, auto 1fr);
    gap: .5em 5px;
  }

  .dynamic-form .width-full {
    --form-item-factor: 1;
  }

  .dynamic-form .width-half {
    --form-item-factor: 1 / 2;
  }

  .dynamic-form .width-one-third {
    --form-item-factor: 1 / 3;
  }

  .dynamic-form .width-two-thirds {
    --form-item-factor: 2 / 3;
  }

  .dynamic-form .width-three-quarters {
    --form-item-factor: 3 / 4;
  }

  .dynamic-form .width-one-quarter {
    --form-item-factor: 1 / 3;
  }

  .dynamic-form .width-one-sixth {
    --form-item-factor: 1 / 6;
  }

  .dynamic-form .width-five-sixths {
    --form-item-factor: 5 / 6;
  }

  .dynamic-form .form-item {
    display: grid;
    grid-template-columns: subgrid;

    --row-span: max(var(--max-row-items), calc(24 * var(--form-item-factor)));
    grid-column: span var(--row-span);
  }

    .dynamic-form .form-item > label {
      grid-column: span var(--label-span);
      padding: 5px 0;
    }

    .dynamic-form .form-item > :nth-child(2) {
      grid-column: span max(var(--input-min-span), calc(var(--row-span) - var(--label-span)));
    }
/*  }*/

  .dynamic-form :not(.choice) > label.required {
    padding-right: 10px;
  }

    .dynamic-form :not(.choice) > label.required::after {
      content: '*';
      color: red;
      font-size: .75em;
      margin: 0 3px;
      position: absolute;
    }
  /*}*/

  .dynamic-form .errors {
    grid-column: 1 / -1;
    margin: 2px 0 .5em;
    padding-left: 30px;
    color: red;
  }
/*}*/

@media (min-width: 768px) {
  .dynamic-form {
    --label-span: 1;
    --input-min-span: 1;
  }
}

@media (min-width: 1024px) {
  .dynamic-form {
    --max-row-items: 6;
  }

    .dynamic-form [type=submit] {
      grid-column: 10 / -1;
    }
/*  }*/
}
/* endregion */

/* region overview */
.overview {
  display: grid;
  grid-gap: 1em;
  grid-template-columns: repeat(1, 1fr);
  grid-template-rows: min-content min-content;
}

  .overview img {
    width: 100%;
    height: 100%;
    display: block;
  }

  .overview h2 {
    margin: 0;
  }
/*}*/

.overview-item {
  grid-row: span 2;
  display: grid;
  grid-gap: 0;
  grid-template-rows: subgrid;
  color: var(--header-text-color);
}

@media (min-width: 768px) {
  .overview {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .overview {
    grid-template-columns: repeat(3, 1fr);
  }
}
/* endregion */

/* region menu */
.menu__sections {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  grid-auto-rows: min-content;
  grid-gap: 2em;
}

.menu__section {
  background: var(--block-bg-color);
  padding: var(--block-padding);
}

  .menu__section header {
    margin: -1em -1em 1em;
    padding: .5em 1em;
    background: var(--header-bg-color);
  }

    .menu__section header h3 {
      margin: 0;
      color: white;
    }
/*  }*/

  .menu__section table {
    width: 100%;
    border-collapse: collapse;
  }

    .menu__section table td {
      padding: 3px 0;
    }

    .menu__section table .product__price {
      white-space: nowrap;
      text-align: right;
      vertical-align: top;
    }
/*  }
}*/

.menu__sections, .menu__additional_content {
  margin: 2em 0;
}

.menu__table {
}
  .menu__table dl {
    margin: 0;
    padding: 0;
  }

  .menu__table dd {
    font-size: .75em;
    margin-left: 1em;
  }
/*}*/

.menu__additional_content {
  background: var(--block-bg-color);
  padding: 0 1em;
}

.menu__image-wrapper {
  display: flex;
  justify-content: center;
  max-width: 500px;
  margin: auto;
}

.menu__image {
  display: block;
  max-width: 100%;
  object-fit: contain;
}

@media (min-width: 768px) {
  .menu__sections.tablet-supported {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .menu__sections.desktop-supported {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 1401px) {
  .menu__sections {
    margin: 1em 0;
  }
}
/* endregion */

/* region teaser */
.teasers {
  display: grid;
  grid-gap: 1em;
  grid-template-columns: repeat(1, 1fr);
  grid-template-rows: auto;
}

  .teasers a {
    text-decoration: none;
  }
/*}*/

.teaser {
  display: grid;
  grid-template-rows: min-content 1fr auto;
  grid-template-columns: 1fr;
  grid-template-areas: "header"
    "."
    "contents";
  height: 300px;
  position: relative;
  z-index: 2;
  grid-gap: 0;
}

  .teaser h3 {
    margin: 0;
    grid-area: header;
    text-decoration: underline;
  }

  .teaser img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -1
  }

  .teaser .teaser__contents {
    grid-area: contents;
  }
/*}*/

.teaser__contents {
  background: var(--block-bg-color);
  padding: 1em .5em;
}

  .teaser__contents:hover{
    background: var(--block-bg-color-hover);
  }
  .teaser__contents p {
    margin: 0;
  }
/*}*/

.teaser__more {
  float: right;
}

@media (min-width: 768px) {
  .teasers {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .teasers {
    grid-template-columns: repeat(3, 1fr);
  }
}
/* endregion */

/* region box-order */
.box-order--description, .box-order--box, .box-order--delivery, .box-order--form__container {
  background: var(--block-bg-color);
  padding: 0 1em 1em;
}

  :is(.box-order--description, .box-order--box, .box-order--delivery, .box-order--form__container)  header {
    margin: 0 -1em 1em;
  }

  :is(.box-order--description, .box-order--box, .box-order--delivery, .box-order--form__container) h3 {
    margin: 0;
  }
/*}*/

.box-order__container {
  display: flex;
  flex-direction: column;
}

  .box-order__container > * {
    margin: 1em 0;
  }

  .box-order__container .box-order--form__container {
    order: 3;
  }

  .box-order__container .box-order--poster__wrapper {
    order: 4;
  }
/*}*/

.box-order--poster {
  display: block;
  max-width: 100%;
  max-height: 750px;
  height: 100%;
  object-fit: contain;
  margin: auto;
}

.box-order--boxes__container, .box-order--delivery__container {
  display: flex;
  gap: 1em;
  flex-wrap: wrap;
}

.box-order--box, .box-order--delivery {
  flex: 1;
  min-width: 300px;
}

.box-order--form {
}
  .box-order--form [type=submit] {
    grid-column: 1 / -1;
  }
/*}*/

@media (min-width: 1024px) {
  .box-order__container {
    display: initial;
  }

  .box-order--description {
    display: flow-root;
  }

  .box-order--form__container, .box-order--poster__wrapper {
    clear: right;
    float: right;
    width: 40%;
    max-width: 500px;
    margin: 1em;
  }
}
/* endregion */

/* region event */
.event--content, .event--form__container {
  background: var(--block-bg-color);
  padding: 0 1em 1em;
}

  :is(.event--content, .event--form__container)  header {
    margin: 0 -1em 1em;
  }

  :is(.event--content, .event--form__container) h3 {
    margin: 0;
  }
/*}*/

.event__container {
  display: flex;
  flex-direction: column;
}

  .event__container > * {
    margin: 1em 0;
  }

  .event__container .event--form__container {
    order: 3;
  }

  .event__container .event--poster__wrapper {
    order: 4;
  }
/*}*/

.event--poster {
  display: block;
  max-width: 100%;
  max-height: 750px;
  height: 100%;
  object-fit: contain;
  margin: auto;
}

.event--form {
}
  .event--form [type=submit] {
    grid-column: 1 / -1;
  }
/*}*/

.event--impression {
  overflow: hidden;
  --duration: calc(var(--image-count) * 7.5s);
  --item-width: 75%;
  --item-spacing: 30px;
  --total-width: calc(var(--image-count) * (var(--item-width) + var(--item-spacing)));
  }

  .event--impression ul {
    display: flex;
    animation: scrolling var(--duration) linear infinite;
    column-gap: var(--item-spacing);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .event--impression li {
    flex: 0 0 var(--item-width);
    margin: 0;
  }

  .event--impression img {
    display: block;
    width: 100%;
  }
/*}*/

@keyframes scrolling {
  0% { transform: translateX(0); }
  100% {transform: translateX(calc(-1 * var(--total-width))); }
}

@media (min-width: 1024px) {
  .event__container {
    display: initial;
  }

  .event--content {
    display: flow-root;
  }

  .event--form__container, .event--poster__wrapper {
    clear: right;
    float: right;
    width: 40%;
    max-width: 500px;
    margin: 1em;
  }

  .event--impression {
    --item-width: 60%;
  }
}
/* endregion */