@import url("https://fonts.googleapis.com/css?family=Spartan:100,200,300,400,500,600,700,800,900&display=swap");
:root {
  --color-beaver: #9e7f66;
  --color-cod-gray: #111111;
  --color-mirage: #17192b;
  --color-ebony-clay: #242b37;
  --color-shuttle-gray: #5c6779;
  --color-dark-gray: #4c4c4c;
  --color-white: #fff;
  --color-border: rgba(151, 151, 151, 0.15);
  --color-dark-blue-shaodw: rgba(56, 66, 85, 0.5);
  --color-error: #B54949;
  --weight-light: 300;
  --weight-regular: 400;
  --weight-semi-bold: 600;
  --weight-bold: 700;
  --transition: 300ms ease-in-out;
  --card-shadow: 0 7.5rem 10rem -5rem var(--color-dark-blue-shaodw);
}

* {
  margin: 0;
  padding: 0;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

html {
  box-sizing: border-box;
  font-size: 62.5%;
}

body {
  background-color: var(--color-cod-gray);
  font-family: "Spartan", sans-serif;
  min-height: 100vh;
  overflow-x: hidden;
}

/* Type Specs */
.t-heading-1 {
  font-weight: var(--weight-light);
  color: var(--color-white);
}
@media (max-width: 767px) {
  .t-heading-1 {
    font-size: 3.2rem;
    line-height: 1.25;
    letter-spacing: -0.4px;
  }
}
@media (min-width: 768px) and (max-width: 1199px) {
  .t-heading-1 {
    font-size: 4.8rem;
    line-height: 1.333;
    letter-spacing: -0.6px;
  }
}
@media (min-width: 1200px) {
  .t-heading-1 {
    font-size: 6.4rem;
    line-height: 1.125;
    letter-spacing: -0.8px;
  }
}

.t-heading-2 {
  font-weight: var(--weight-bold);
}
.t-heading-2--black {
  color: var(--color-ebony-clay);
}
.t-heading-2--white {
  color: var(--color-white);
}
@media (max-width: 767px) {
  .t-heading-2 {
    font-size: 3.2rem;
    line-height: 1.25;
    letter-spacing: -0.4px;
  }
}
@media (min-width: 768px) {
  .t-heading-2 {
    font-size: 4rem;
    line-height: 1.4;
    letter-spacing: -0.5px;
  }
}

.t-heading-3-l {
  font-size: 1.8rem;
  line-height: 1.556;
  letter-spacing: -0.22px;
  color: var(--color-white);
  font-weight: var(--weight-bold);
}

.t-heading-3-s {
  font-size: 1.4rem;
  line-height: 2;
  letter-spacing: 2px;
  color: var(--color-dark-gray);
  font-weight: var(--weight-semi-bold);
}

.t-body-1 {
  line-height: 1.667;
  font-weight: var(--weight-regular);
}
@media (max-width: 767px) {
  .t-body-1 {
    font-size: 1.5rem;
    letter-spacing: -0.19px;
  }
}
@media (min-width: 768px) {
  .t-body-1 {
    font-size: 1.8rem;
    letter-spacing: -0.22px;
  }
}
.t-body-1--white {
  color: var(--color-white);
}
.t-body-1--black {
  color: var(--color-ebony-clay);
}

.t-body-2 {
  font-weight: var(--weight-regular);
  font-size: 1.5rem;
  line-height: 1.867;
  letter-spacing: -0.19px;
  color: var(--color-white);
}

.t-footer {
  font-weight: var(--weight-regular);
  font-size: 1.4rem;
  line-height: 2;
  letter-spacing: 2px;
  color: var(--color-white);
  text-transform: uppercase;
}

.screen-reader-only {
  padding: 0;
  width: 1px;
  height: 1px;
  position: absolute;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(0px 0px 99.9% 99.9%);
  overflow: hidden;
  border: 0;
}

.l-center {
  margin: 0 auto;
  text-align: center;
}

.font-large {
  font-size: 2rem;
}

.menu {
  display: flex;
  justify-content: center;
  padding: 5rem 1rem 0;
}
.menu > div {
  max-width: 100%;
}

.menu__section {
  margin-bottom: 4.8rem;
  max-width: 22cm;
}
.menu__section.col2 {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.menu__section.col2 h1, .menu__section.col2 h2, .menu__section.col2 h3 {
  flex-basis: 100%;
}
.menu__section.col2 .menu__dish {
  width: 45%;
}
@media (max-width: 768px) {
  .menu__section.col2 .menu__dish {
    width: 100%;
  }
}

.menu__dish {
  min-width: 45%;
  margin-top: 1.8rem;
  text-align: left;
  word-break: break-word;
}
.menu__dish .menu__dish__text {
  display: flex;
  justify-content: space-between;
}
.menu__dish .menu__dish__text h3 {
  flex-grow: 1;
  margin-right: 3rem;
}
.menu__dish .price {
  width: 8rem;
  text-align: right;
  word-break: keep-all;
}

.speisekarte {
  position: relative;
}
.speisekarte__bg-1 {
  background-size: cover;
  background-repeat: no-repeat;
}
.speisekarte__bg-2 {
  background-color: var(--color-white);
}
@media (max-width: 767px) {
  .speisekarte__bg-1 {
    height: 40rem;
    background-image: url(../images/booking/hero-bg-mobile@2x.jpg);
  }
  .speisekarte__bg-2 {
    height: 53.4rem;
  }
}
@media (min-width: 768px) and (max-width: 1199px) {
  .speisekarte__bg-1 {
    height: 50rem;
    background-image: url(../images/booking/hero-bg-tablet@2x.jpg);
  }
  .speisekarte__bg-2 {
    height: 43.5rem;
  }
}
@media (min-width: 1200px) {
  .speisekarte__bg-1 {
    height: 60rem;
    background-image: url(../images/booking/hero-bg-desktop@2x.jpg);
  }
  .speisekarte__bg-2 {
    height: 32rem;
    background-repeat: no-repeat;
    background-image: url(../images/patterns/pattern-curve-bottom-right.svg);
  }
}
.speisekarte__container {
  position: absolute;
  top: 0;
  width: 100%;
}
@media (max-width: 767px) {
  .speisekarte__container {
    text-align: center;
    padding-top: 5.6rem;
    padding-right: 2.4rem;
    padding-left: 2.4rem;
  }
}
@media (min-width: 768px) and (max-width: 1199px) {
  .speisekarte__container {
    padding: 5.6rem 4rem 0;
  }
}
@media (min-width: 1200px) {
  .speisekarte__container {
    padding-top: 6.5rem;
    width: 111rem;
    left: 50%;
    transform: translateX(-50%);
  }
}
.speisekarte__content__form {
  background-color: var(--color-white);
  box-shadow: var(--card-shadow);
  position: relative;
}
@media (min-width: 1200px) {
  .speisekarte__content__form::after {
    content: " ";
    left: 0;
    bottom: 0;
    z-index: -1;
    width: 16rem;
    height: 7.6rem;
    position: absolute;
    transform: translate(-8rem, 3.8rem);
    background-image: url(../images/patterns/pattern-lines.svg);
  }
}
@media (max-width: 767px) {
  .speisekarte__content {
    margin-top: 4rem;
  }
  .speisekarte__content__text {
    margin-bottom: 9.1rem;
  }
}
@media (max-width: 767px) {
  .speisekarte__content__form {
    max-width: 40rem;
    margin: 0 auto;
  }
}
@media (min-width: 768px) {
  .speisekarte__content__form {
    width: 54rem;
  }
}
@media (min-width: 768px) and (max-width: 1199px) {
  .speisekarte__content {
    text-align: center;
    margin-top: 6.4rem;
    display: flex;
    flex-direction: column;
  }
  .speisekarte__content__text {
    margin-bottom: 4rem;
  }
  .speisekarte__content__form {
    margin: 0 auto;
  }
}
@media (min-width: 1200px) {
  .speisekarte__content {
    display: flex;
    justify-content: space-between;
    margin-top: 15.3rem;
  }
  .speisekarte__content__text {
    max-width: 44.5rem;
  }
}
@media (max-width: 767px) {
  .speisekarte__body {
    margin-top: 1.6rem;
    margin-right: auto;
    margin-bottom: 2.4rem;
    margin-left: auto;
    max-width: 50rem;
  }
}
@media (min-width: 768px) and (max-width: 1199px) {
  .speisekarte__body {
    max-width: 57.3rem;
    margin-top: 1.6rem;
    margin-right: auto;
    margin-left: auto;
  }
}
@media (min-width: 1200px) {
  .speisekarte__body {
    margin-top: 2.4rem;
  }
}

.madeby {
  margin-bottom: 1rem;
}
.madeby a {
  color: inherit;
  border-bottom: 1px solid var(--color-white);
  padding-bottom: 2px;
  text-decoration: none;
}

.btn {
  background: none;
  text-transform: uppercase;
  font-size: 1.4rem;
  line-height: 1.143;
  letter-spacing: 2px;
  padding: 2.3rem 5.3rem;
  cursor: pointer;
  display: inline-block;
  text-decoration: none;
}
.btn:visited {
  text-decoration: none;
}
.btn--dark {
  color: var(--color-white);
  background-color: transparent;
  border: 1px solid var(--color-white);
  transition: var(--transition) background-color, var(--transition) color;
}
.btn--dark:hover {
  background-color: var(--color-white);
  color: var(--color-cod-gray);
}
.btn--light {
  background-color: var(--color-cod-gray);
  color: var(--color-white);
  border: 1px solid transparent;
  transition: var(--transition) background-color, var(--transition) color, var(--transition) border-color;
}
.btn--light:hover {
  background-color: transparent;
  color: var(--color-cod-gray);
  border-color: var(--color-cod-gray);
}
.btn--hero {
  margin-right: 2rem;
}
@media (max-width: 767px) {
  .btn--hero {
    margin-top: 3.2rem;
  }
}
@media (min-width: 768px) and (max-width: 1199px) {
  .btn--hero {
    margin-top: 2.4rem;
  }
}
@media (min-width: 1200px) {
  .btn--hero {
    margin-top: 4.2rem;
  }
}
@media (min-width: 768px) {
  .btn--reserve {
    display: none;
  }
}
.btn--make-reservation {
  width: 100%;
}
@media (max-width: 767px) {
  .btn--make-reservation {
    padding: 1.7rem 3.5rem;
    line-height: 2;
    margin-top: 3.2rem;
  }
}

.number-picker__button {
  background: none;
  border: none;
  cursor: pointer;
  width: 2.8rem;
  height: 2.8rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition) transform;
}
.number-picker__button:hover {
  transform: scale(1.5);
}
.number-picker__button:focus {
  outline: none;
}

.t-form {
  font-size: 1.8rem;
  line-height: 1.556;
  letter-spacing: -0.22px;
  color: var(--color-cod-gray);
}
.t-form--regular {
  font-weight: var(--weight-light);
}
.t-form--bold {
  font-weight: var(--weight-bold);
}

.errormsg {
  line-height: 1.2;
  margin-top: 1rem;
  padding-left: 1.6rem;
  letter-spacing: -0.12px;
  color: var(--color-error);
  display: none;
}
.errormsg--corner {
  padding-left: 0;
  margin-top: 0.1rem;
}

.errormsg.show {
  display: block;
}

.form {
  pointer-events: none;
  text-align: left;
  opacity: 1;
  filter: blur(3px);
}
@media (max-width: 767px) {
  .form {
    padding: 3.2rem;
  }
}
@media (min-width: 768px) {
  .form {
    padding: 4.8rem;
  }
}
.form__input-field--text {
  margin-bottom: 3.2rem;
}
.form__datetime-field {
  margin-bottom: 3.2rem;
  display: flex;
}
@media (max-width: 767px) {
  .form__datetime-field {
    flex-direction: column;
  }
}
@media (min-width: 768px) {
  .form__datetime-field {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
}
.form__number-picker {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 1.6rem;
  border-bottom: 1px solid var(--color-cod-gray);
  margin-bottom: 3.2rem;
}
@media (max-width: 767px) {
  .form__number-picker {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}
@media (min-width: 768px) {
  .form__number-picker {
    padding-left: 2.2rem;
    padding-right: 2.2rem;
  }
}

@media (max-width: 767px) {
  .datetime-field-name {
    margin-bottom: 0.8rem;
  }
}

.datetime-field-name.error {
  color: var(--color-error);
}

.input-containers {
  display: flex;
  justify-content: space-between;
}
@media (min-width: 768px) {
  .input-containers {
    width: 28.9rem;
  }
}

.input-box {
  width: 100%;
  caret-color: var(--color-beaver);
  font-weight: var(--weight-light);
  font-family: "Spartan", sans-serif;
  opacity: 0.5;
  border: none;
  font-size: 1.8rem;
  line-height: 1.556;
  letter-spacing: -0.22px;
  color: var(--color-cod-gray);
  padding-left: 1.6rem;
  padding-bottom: 1.6rem;
  border-bottom: 1px solid #8E8E8E;
  transition: var(--transition) border-color, var(--transition) opacity;
  cursor: pointer;
}
.input-box:focus {
  opacity: 1;
  border-bottom: 1px solid var(--color-cod-gray);
  outline: none;
}
.input-box:focus::placeholder {
  opacity: 1;
}
.input-box::placeholder {
  font-family: "Spartan", sans-serif;
  color: var(--color-cod-gray);
  opacity: 0.5;
  font-size: 1.8rem;
  line-height: 1.556;
  letter-spacing: -0.22px;
  transition: var(--transition) opacity;
}
@media (max-width: 767px) {
  .input-box--small {
    width: 7.3rem;
  }
}
@media (min-width: 768px) {
  .input-box--small {
    width: 8rem;
  }
}
@media (max-width: 767px) {
  .input-box--large {
    width: 8.8rem;
  }
}
@media (min-width: 768px) {
  .input-box--large {
    width: 9.7rem;
  }
}
.input-box.error {
  opacity: 1;
  border-bottom: 1px solid var(--color-error);
}
.input-box.error::placeholder {
  color: var(--color-error);
}

@media (max-width: 767px) {
  .dropdown-container {
    width: 8.8rem;
  }
}
@media (min-width: 768px) {
  .dropdown-container {
    width: 9.7rem;
  }
}

.dropdown {
  opacity: 0.5;
  padding-left: 1.6rem;
  padding-bottom: 1.6rem;
  border-bottom: 1px solid var(--color-cod-gray);
  position: relative;
  cursor: pointer;
  display: flex;
  flex-direction: row;
  align-items: center;
  transition: var(--transition) opacity;
}
.dropdown:hover {
  opacity: 1;
}
.dropdown__selected {
  font-weight: var(--weight-light);
  font-size: 1.8rem;
  line-height: 1.556;
  letter-spacing: -0.22px;
  color: var(--color-cod-gray);
}
.dropdown__arrow {
  transition: var(--transition) transform;
}
@media (max-width: 767px) {
  .dropdown__arrow {
    margin-left: 0.6rem;
  }
}
@media (min-width: 768px) {
  .dropdown__arrow {
    margin-left: 1.5rem;
  }
}
.dropdown__arrow.open {
  transform: scaleY(-1) translateY(0.4rem);
}
.dropdown__items {
  display: none;
  position: absolute;
  background-color: var(--color-white);
  padding: 1.6rem;
  box-shadow: 0 1.5rem 2.5rem rgba(56, 66, 85, 0.25);
  transform: translate(-1.6rem, 9rem);
}
.dropdown__items.open {
  display: block;
}
.dropdown__item {
  display: flex;
  align-items: center;
}
.dropdown__item:not(:last-child) {
  margin-bottom: 1.6rem;
}
.dropdown__item__checkmark {
  margin-right: 1.557rem;
  opacity: 0;
}
.dropdown__item__checkmark.checked {
  opacity: 1;
}

.hero {
  background-repeat: no-repeat;
  background-size: cover;
  min-height: 74.8rem;
  text-align: center;
  padding: 23.2rem 2.4rem 12rem;
  background-image: url(../images/homepage/hero-bg-mobile@2x.jpg);
}
@media (min-width: 1200px) {
  .hero__container {
    max-width: 144rem;
    margin: 0 auto;
  }
}
@media (max-width: 1199px) {
  .hero__heading {
    margin-top: 3.2rem;
  }
}
@media (min-width: 1200px) {
  .hero__heading {
    margin-top: 15.3rem;
  }
}
.hero__body {
  margin-top: 2.4rem;
}
@media (max-width: 1199px) {
  .hero__body {
    margin-right: auto;
    margin-left: auto;
  }
}
@media (max-width: 767px) {
  .hero__body {
    max-width: 40rem;
  }
}
@media (min-width: 768px) and (max-width: 1199px) {
  .hero__body {
    max-width: 57.3rem;
  }
}
@media (min-width: 1200px) {
  .hero__body {
    max-width: 44.5rem;
  }
}
@media (min-width: 435px) {
  .hero {
    padding-top: 28.2rem;
    min-height: 80rem;
  }
}
@media (min-width: 555px) {
  .hero {
    padding-top: 33.2rem;
    min-height: 85rem;
  }
}
@media (min-width: 655px) {
  .hero {
    padding-top: 38.2rem;
    min-height: 90rem;
  }
}
@media (min-width: 755px) {
  .hero {
    padding-top: 43.2rem;
    min-height: 95rem;
  }
}
@media (min-width: 768px) {
  .hero {
    min-height: 99.2rem;
    padding-top: 37.4rem;
    background-image: url(../images/homepage/hero-bg-tablet@2x.jpg);
  }
}
@media (min-width: 890px) {
  .hero {
    min-height: 106.2rem;
    padding-top: 44.4rem;
  }
}
@media (min-width: 1060px) {
  .hero {
    min-height: 113.2rem;
    padding-top: 51.4rem;
  }
}
@media (min-width: 1200px) {
  .hero {
    min-height: 82rem;
    padding-top: 6.5rem;
    padding-left: 16.5rem;
    text-align: left;
    background-image: url(../images/homepage/hero-bg-desktop@2x.jpg);
  }
}

.logo img {
  width: 25rem;
}

.header {
  display: flex;
  justify-content: space-between;
  padding: 0.5rem 2.4rem;
  font-weight: var(--weight-regular);
  font-size: 1.2rem;
  line-height: 2;
  letter-spacing: 1px;
  color: var(--color-white);
  text-transform: uppercase;
  position: absolute;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(3px);
}
.header p {
  margin: 0 auto;
}

.middle {
  background-color: var(--color-white);
  background-repeat: no-repeat;
}
@media (max-width: 1199px) {
  .middle {
    text-align: center;
  }
}
@media (min-width: 768px) and (max-width: 1199px) {
  .middle {
    background-position-y: 10rem, bottom;
    background-position-x: -67vw, 52vw;
    background-image: url(../images/patterns/pattern-curve-top-right.svg), url(../images/patterns/pattern-curve-top-left.svg);
  }
}
@media (min-width: 1200px) {
  .middle {
    background-image: url(../images/patterns/pattern-curve-top-right.svg), url(../images/patterns/pattern-curve-top-left.svg);
    background-position-y: 24.2rem, bottom;
    background-position-x: left, right;
  }
}
@media (max-width: 767px) {
  .middle__family {
    margin-bottom: 0.8rem;
  }
}
@media (min-width: 768px) and (max-width: 1199px) {
  .middle__family {
    margin-bottom: 2.4rem;
  }
}
@media (min-width: 1200px) {
  .middle__family {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    margin-bottom: -2.9rem;
  }
}
.middle__locally {
  position: relative;
}
@media (min-width: 1200px) {
  .middle__locally {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    justify-content: space-between;
  }
}
.middle__locally__floating-pattern {
  display: none;
  z-index: 1;
  position: absolute;
}
@media (min-width: 768px) and (max-width: 1199px) {
  .middle__locally__floating-pattern {
    display: block;
    right: 0;
    top: 22.8rem;
    transform: translateX(5.8rem);
  }
}
@media (min-width: 1200px) {
  .middle__locally__floating-pattern {
    display: block;
    right: 0;
    top: 36rem;
    transform: translateX(11.4rem);
  }
}
@media (max-width: 767px) {
  .middle__content--first {
    transform: translateY(-7.2rem);
  }
}
@media (min-width: 768px) and (max-width: 1199px) {
  .middle__content--first {
    transform: translateY(-9.6rem);
  }
}
@media (min-width: 1200px) {
  .middle__content--first {
    transform: translateY(-4rem);
  }
}
@media (min-width: 1200px) {
  .middle__content--second {
    margin-top: 11.5rem;
  }
}
@media (max-width: 767px) {
  .middle__content {
    margin-top: 4.8rem;
  }
}
@media (min-width: 768px) and (max-width: 1199px) {
  .middle__content {
    margin-top: 5.6rem;
  }
}
@media (min-width: 1200px) {
  .middle__content {
    max-width: 44.5rem;
  }
}
@media (min-width: 768px) and (max-width: 1199px) {
  .middle__content__body {
    max-width: 45.7rem;
    margin: 0 auto;
  }
}
@media (max-width: 767px) {
  .middle__container {
    padding: 0 2.4rem 8rem;
  }
}
@media (min-width: 768px) and (max-width: 1199px) {
  .middle__container {
    padding: 0 9.7rem 12rem;
  }
}
@media (min-width: 1200px) {
  .middle__container {
    max-width: 111rem;
    margin: 0 auto;
  }
}
.middle__section-card {
  box-shadow: var(--card-shadow);
}
@media (min-width: 1200px) {
  .middle__section-card {
    min-width: 54rem;
    height: 72rem;
  }
}
@media (max-width: 767px) {
  .middle__section-card--first {
    transform: translateY(-7.2rem);
  }
}
@media (min-width: 768px) and (max-width: 1199px) {
  .middle__section-card--first {
    transform: translateY(-9.6rem);
  }
}
@media (min-width: 1200px) {
  .middle__section-card--first {
    transform: translateY(-7rem);
  }
}
@media (min-width: 1200px) {
  .middle__section-card--second {
    transform: translateY(8rem);
  }
}
.middle__section-card__image {
  width: 100%;
  background-repeat: no-repeat;
  background-size: cover;
}
.middle__section-card__image--first {
  background-image: url(../images/homepage/terasse.jpg);
}
@media (max-width: 767px) {
  .middle__section-card__image--second {
    background-image: url(../images/homepage/locally-sourced-mobile@2x.jpg);
  }
}
@media (min-width: 768px) and (max-width: 1199px) {
  .middle__section-card__image--second {
    background-image: url(../images/homepage/locally-sourced-tablet@2x.jpg);
  }
}
@media (min-width: 1200px) {
  .middle__section-card__image--second {
    background-image: url(../images/homepage/locally-sourced-desktop@2x.jpg);
  }
}
@media (max-width: 767px) {
  .middle__section-card__image {
    min-height: 40rem;
    background-position: center center;
  }
}
@media (min-width: 768px) and (max-width: 1199px) {
  .middle__section-card__image {
    min-height: 36rem;
  }
}
@media (min-width: 1200px) {
  .middle__section-card__image {
    min-height: 72rem;
  }
}
.middle__heading {
  margin-bottom: 1.6rem;
}
@media (max-width: 1199px) {
  .middle__heading {
    margin-top: 3.2rem;
  }
}
@media (min-width: 1200px) {
  .middle__heading {
    margin-top: 4.8rem;
  }
}

.highlights {
  background-color: var(--color-cod-gray);
}
@media (max-width: 767px) {
  .highlights {
    padding: 7.2rem 2.4rem;
  }
}
@media (min-width: 768px) and (max-width: 1199px) {
  .highlights {
    padding: 9.6rem 0;
  }
}
@media (min-width: 1200px) {
  .highlights {
    padding-top: 20rem;
    padding-bottom: 12rem;
  }
  .highlights__container {
    max-width: 111rem;
    margin: 0 auto;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
  }
}
@media (max-width: 767px) {
  .highlights__copy {
    text-align: center;
    margin-bottom: 6.4rem;
  }
}
@media (min-width: 768px) and (max-width: 1199px) {
  .highlights__copy {
    text-align: center;
    max-width: 44.5rem;
    margin-right: auto;
    margin-bottom: 5.6rem;
    margin-left: auto;
  }
}
@media (min-width: 1200px) {
  .highlights__copy {
    max-width: 44.5rem;
    transform: translateY(-5.5rem);
  }
}
.highlights__heading {
  margin-top: 3.2rem;
  margin-bottom: 1.6rem;
}
@media (min-width: 768px) {
  .highlights__items {
    display: flex;
    flex-direction: column;
    max-width: 57.3rem;
    margin: 0 auto;
  }
}
@media (min-width: 1200px) {
  .highlights__items {
    margin: 0;
    max-width: 54rem;
  }
}
@media (max-width: 767px) {
  .highlights__item {
    text-align: center;
  }
}
@media (min-width: 768px) {
  .highlights__item {
    display: flex;
    align-items: center;
  }
}
.highlights__item:not(:last-child) {
  margin-bottom: 2.4rem;
  border-bottom: 1px solid var(--color-border);
  padding-bottom: 2.4rem;
}
.highlights__item__image {
  background-repeat: no-repeat;
  background-size: contain;
  position: relative;
}
.highlights__item__image__container {
  max-width: 32.7rem;
}
@media (max-width: 767px) {
  .highlights__item__image {
    width: 100%;
    height: 24.5rem;
  }
  .highlights__item__image__container {
    margin: 0 auto;
  }
}
@media (min-width: 768px) {
  .highlights__item__image {
    width: 12.8rem;
    height: 9.6rem;
  }
  .highlights__item__image::after {
    content: " ";
    width: 3.2rem;
    height: 1px;
    background-color: var(--color-beaver);
    position: absolute;
    right: 0;
    top: 1.6rem;
    transform: translateX(3.2rem);
  }
}
@media (max-width: 767px) {
  .highlights__item__image--salmon {
    background-image: url(../images/homepage/salmon-mobile@2x.jpg);
  }
}
@media (min-width: 768px) {
  .highlights__item__image--salmon {
    background-image: url(../images/homepage/salmon-desktop-tablet@2x.jpg);
  }
}
.highlights__item__image--tortellini {
  background-image: url(../images/homepage/tortellini.webp);
}
.highlights__item__image--antipasti {
  background-image: url(../images/homepage/antipasti.jpeg);
}
.highlights__item__image--parma {
  background-image: url(../images/homepage/pizzaparma.jpg);
}
@media (max-width: 767px) {
  .highlights__item__image--mignon {
    background-image: url(../images/homepage/beef-mobile@2x.jpg);
  }
}
@media (min-width: 768px) {
  .highlights__item__image--mignon {
    background-image: url(../images/homepage/beef-desktop-tablet@2x.jpg);
  }
}
@media (max-width: 767px) {
  .highlights__item__image--mousse {
    background-image: url(../images/homepage/chocolate-mobile@2x.jpg);
  }
}
@media (min-width: 768px) {
  .highlights__item__image--mousse {
    background-image: url(../images/homepage/chocolate-desktop-tablet@2x.jpg);
  }
}
.highlights__item__text__heading {
  margin-bottom: 0.4rem;
}
@media (max-width: 767px) {
  .highlights__item__text {
    max-width: 40rem;
    margin-top: 3.2rem;
    margin-right: auto;
    margin-left: auto;
  }
}
@media (min-width: 768px) {
  .highlights__item__text {
    margin-left: 6.2rem;
  }
}

.gathering {
  background-color: var(--color-white);
}
@media (max-width: 1199px) {
  .gathering {
    text-align: center;
  }
}
@media (max-width: 767px) {
  .gathering {
    padding: 8rem 2.4rem 12.4rem;
  }
}
@media (min-width: 768px) and (max-width: 1199px) {
  .gathering {
    padding: 12rem 0;
    background-image: url(../images/patterns/pattern-curve-top-right.svg);
    background-repeat: no-repeat;
    background-position-x: -69vw;
  }
}
@media (min-width: 1200px) {
  .gathering {
    padding: 16rem 0;
    background-repeat: no-repeat;
    background-image: url(../images/patterns/pattern-curve-top-right.svg);
    background-position-x: -35rem;
  }
}
@media (min-width: 1200px) {
  .gathering__container {
    max-width: 111rem;
    margin: 0 auto;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}
@media (max-width: 767px) {
  .gathering__slider {
    max-width: 32.6rem;
    margin: 0 auto;
  }
}
.gathering__slide__floating-pattern {
  display: none;
  z-index: 1;
}
@media (min-width: 768px) and (max-width: 1199px) {
  .gathering__slide {
    width: 74.609%;
    margin: 0 auto;
    position: relative;
  }
  .gathering__slide__floating-pattern {
    display: block;
    position: absolute;
    transform: translate(-5.8rem, -3.8rem);
  }
}
@media (min-width: 1200px) {
  .gathering__slide {
    position: relative;
  }
  .gathering__slide__floating-pattern {
    display: block;
    position: absolute;
    transform: translate(-4rem, -3.8rem);
  }
}
.gathering__slide__image-container {
  background-repeat: no-repeat;
  background-size: cover;
  box-shadow: var(--card-shadow);
}
.gathering__slide__image-container__image {
  width: 100%;
  animation: FadeIn ease-in-out 0.5s;
}
@media (max-width: 767px) {
  .gathering__slide__image-container {
    height: 40rem;
  }
}
@media (min-width: 768px) and (max-width: 1199px) {
  .gathering__slide__image-container {
    height: 36rem;
    width: 57.3rem;
    margin: 0 auto;
  }
}
@media (min-width: 1200px) {
  .gathering__slide__image-container {
    height: 60rem;
    width: 54rem;
  }
}
.gathering__events {
  list-style-type: none;
}
@media (min-width: 768px) and (max-width: 1199px) {
  .gathering__events {
    display: flex;
    max-width: 68.9rem;
    justify-content: space-around;
    margin: 0 auto;
  }
}
@media (min-width: 1200px) {
  .gathering__events {
    margin-top: 7.8rem;
  }
}
.gathering__event {
  cursor: pointer;
  text-transform: uppercase;
  opacity: 0.5;
  transition: var(--transition) opacity;
}
.gathering__event.active {
  opacity: 1;
}
.gathering__event:hover {
  opacity: 1;
}
@media (max-width: 1199px) {
  .gathering__event__underline {
    width: 4.8rem;
    margin: 0 auto;
    border: 1px solid transparent;
    transition: var(--transition) border-color;
  }
  .gathering__event__underline.active {
    border-color: var(--color-beaver);
  }
  .gathering__event:hover .gathering__event__underline {
    border-color: var(--color-beaver);
  }
}
@media (min-width: 1200px) {
  .gathering__event {
    position: relative;
  }
  .gathering__event__underline {
    top: 50%;
    height: 1px;
    width: 9.5rem;
    position: absolute;
    transform: translate(-12.5rem, -0.2rem);
    background-color: transparent;
    transition: var(--transition) background-color;
  }
  .gathering__event__underline.active {
    background-color: var(--color-beaver);
  }
  .gathering__event:hover .gathering__event__underline {
    background-color: var(--color-beaver);
  }
}
.gathering__event:not(:last-child) {
  margin-bottom: 1.5rem;
}
@media (max-width: 767px) {
  .gathering__content {
    margin-top: 4.8rem;
  }
}
@media (min-width: 768px) and (max-width: 1199px) {
  .gathering__content {
    margin-top: 5.6rem;
  }
}
@media (min-width: 1200px) {
  .gathering__content {
    display: flex;
    flex-direction: column-reverse;
    max-width: 44.5rem;
  }
}
@media (max-width: 767px) {
  .gathering__text {
    margin-top: 2.4rem;
  }
}
@media (min-width: 768px) and (max-width: 1199px) {
  .gathering__text {
    margin-top: 4rem;
  }
}
.gathering__text__body {
  margin-top: 1.6rem;
  margin-bottom: 3.2rem;
}
@media (min-width: 768px) and (max-width: 1199px) {
  .gathering__text__body {
    max-width: 47.5rem;
    margin-left: auto;
    margin-right: auto;
  }
}

@keyframes FadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.calltoaction {
  text-align: center;
  background-repeat: no-repeat;
  background-size: cover;
}
@media (max-width: 767px) {
  .calltoaction {
    padding: 8rem 2.4rem;
    background-image: url(../images/homepage/ready-bg-mobile@2x.jpg);
  }
}
@media (min-width: 768px) and (max-width: 1199px) {
  .calltoaction {
    padding: 6.5rem 0;
    background-image: url(../images/homepage/ready-bg-tablet@2x.jpg);
  }
}
@media (min-width: 1200px) {
  .calltoaction {
    background-image: url(../images/homepage/ready-bg-desktop@2x.jpg);
    padding: 8.8rem 0;
  }
  .calltoaction__container {
    max-width: 111rem;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}
@media (max-width: 1199px) {
  .calltoaction__heading {
    margin-bottom: 2.4rem;
  }
}

.reservations {
  position: relative;
}
.reservations__bg-1 {
  background-size: cover;
  background-repeat: no-repeat;
}
.reservations__bg-2 {
  background-color: var(--color-white);
}
@media (max-width: 767px) {
  .reservations__bg-1 {
    height: 80rem;
    background-image: url(../images/booking/hero-bg-mobile@2x.jpg);
  }
  .reservations__bg-2 {
    height: 53.4rem;
  }
}
@media (min-width: 768px) and (max-width: 1199px) {
  .reservations__bg-1 {
    height: 80rem;
    background-image: url(../images/booking/hero-bg-tablet@2x.jpg);
  }
  .reservations__bg-2 {
    height: 43.5rem;
  }
}
@media (min-width: 1200px) {
  .reservations__bg-1 {
    height: 80rem;
    background-image: url(../images/booking/hero-bg-desktop@2x.jpg);
  }
  .reservations__bg-2 {
    height: 32rem;
    background-repeat: no-repeat;
    background-image: url(../images/patterns/pattern-curve-bottom-right.svg);
  }
}
.reservations__container {
  position: absolute;
  top: 0;
  width: 100%;
}
@media (max-width: 767px) {
  .reservations__container {
    text-align: center;
    padding-top: 5.6rem;
    padding-right: 2.4rem;
    padding-left: 2.4rem;
  }
}
@media (min-width: 768px) and (max-width: 1199px) {
  .reservations__container {
    padding: 5.6rem 4rem 0;
  }
}
@media (min-width: 1200px) {
  .reservations__container {
    padding-top: 6.5rem;
    width: 111rem;
    left: 50%;
    transform: translateX(-50%);
  }
}
.reservations__content__form {
  background-color: var(--color-white);
  box-shadow: var(--card-shadow);
  position: relative;
}
@media (min-width: 1200px) {
  .reservations__content__form::after {
    content: " ";
    left: 0;
    bottom: 0;
    z-index: -1;
    width: 16rem;
    height: 7.6rem;
    position: absolute;
    transform: translate(-8rem, 3.8rem);
    background-image: url(../images/patterns/pattern-lines.svg);
  }
}
@media (max-width: 767px) {
  .reservations__content {
    margin-top: 4rem;
  }
  .reservations__content__text {
    margin-bottom: 9.1rem;
  }
}
@media (max-width: 767px) {
  .reservations__content__form {
    max-width: 40rem;
    margin: 0 auto;
  }
}
@media (min-width: 768px) {
  .reservations__content__form {
    width: 54rem;
  }
}
@media (min-width: 768px) and (max-width: 1199px) {
  .reservations__content {
    text-align: center;
    margin-top: 6.4rem;
    display: flex;
    flex-direction: column;
  }
  .reservations__content__text {
    margin-bottom: 4rem;
  }
  .reservations__content__form {
    margin: 0 auto;
  }
}
@media (min-width: 1200px) {
  .reservations__content {
    display: flex;
    justify-content: space-between;
    margin-top: 15.3rem;
  }
  .reservations__content__text {
    max-width: 44.5rem;
  }
}
@media (max-width: 767px) {
  .reservations__body {
    margin-top: 1.6rem;
    margin-right: auto;
    margin-bottom: 2.4rem;
    margin-left: auto;
    max-width: 50rem;
  }
}
@media (min-width: 768px) and (max-width: 1199px) {
  .reservations__body {
    max-width: 57.3rem;
    margin-top: 1.6rem;
    margin-right: auto;
    margin-left: auto;
  }
}
@media (min-width: 1200px) {
  .reservations__body {
    margin-top: 2.4rem;
  }
}

.footer {
  background-color: var(--color-cod-gray);
}
@media (max-width: 767px) {
  .footer {
    padding: 5rem 2.4rem;
    text-align: center;
  }
}
@media (min-width: 768px) and (max-width: 1199px) {
  .footer {
    padding: 5rem 4rem;
  }
}
@media (min-width: 1200px) {
  .footer {
    padding: 5rem 0;
  }
}
@media (min-width: 768px) {
  .footer__information {
    margin-left: 13rem;
    display: flex;
    flex-flow: row wrap;
  }
}
@media (min-width: 1200px) {
  .footer__information {
    margin-left: 19.258rem;
  }
}
@media (min-width: 768px) and (max-width: 1199px) {
  .footer__container {
    max-width: 94rem;
    margin: 0 auto;
    display: flex;
  }
}
@media (min-width: 1200px) {
  .footer__container {
    max-width: 111rem;
    margin: 0 auto;
    display: flex;
  }
}

.contact {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
@media (max-width: 767px) {
  .contact {
    margin-top: 4rem;
    margin-bottom: 3.2rem;
  }
}
@media (min-width: 768px) and (max-width: 1199px) {
  .contact {
    margin-bottom: 3.2rem;
    margin-right: 6.2rem;
  }
}
@media (min-width: 1200px) {
  .contact {
    margin-right: 12.4rem;
  }
}

.time {
  max-width: fit-content;
  margin: 0 auto;
}
.time p {
  display: flex;
  justify-content: space-between;
  margin-bottom: 1rem;
}
.time span {
  flex-shrink: 1;
  flex-grow: 1;
  text-align: left;
}
.time span:last-of-type {
  text-align: right;
  margin-left: 2rem;
}

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