@font-face {
  font-family: 'AntiqueOliBol';
  src: url("../fonts/AntiqueOliBol/font.woff") format("woff"), url("../fonts/AntiqueOliBol/font.woff2") format("woff");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'AntiqueOliConBol';
  src: url("../fonts/AntiqueOliConBol/font.woff") format("woff"), url("../fonts/AntiqueOliConBol/font.woff2") format("woff");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'AntiqueOliReg';
  src: url("../fonts/AntiqueOliReg/font.woff") format("woff"), url("../fonts/AntiqueOliReg/font.woff2") format("woff");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'CenturyStdUltraCondensed';
  src: url("../fonts/CenturyStdUltraCondensed/font.woff") format("woff"), url("../fonts/CenturyStdUltraCondensed/font.woff2") format("woff");
  font-weight: normal;
  font-style: normal;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  background: #051b2c;
  color: #fff;
}

.link-page {
  min-height: 100vh;
  background: #051b2c;
  padding: 28px 20px 70px;
}

.link-header {
  margin: 0 auto 60px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.link-logo {
  display: block;
  max-width: 250px;
  height: auto;
}

.reservation-section {
  padding: 20px 0;
  overflow: hidden;
}

.reservation-cards {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 70px;
  flex-wrap: wrap;
}

.reservation-card {
  width: 260px;
  min-height: 390px;
  background: #fff;
  color: #111;
  text-decoration: none;
  padding: 14px;
  display: flex;
  flex-direction: column;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.card-left {
  transform: rotate(-3deg);
}

.card-left:hover {
  transform: rotate(-3deg) translateY(-6px);
}

.card-right {
  transform: rotate(7deg);
}

.card-right:hover {
  transform: rotate(7deg) translateY(-6px);
}

.card-visual {
  height: 180px;
  margin-bottom: 20px;
  background-color: #eee;
  background-size: cover;
  background-position: center;
  position: relative;
  overflow: hidden;
}

.card-visual-right {
  height: 140px;
}

.card-text {
  font-size: 22px;
  line-height: 1.2;
  font-weight: 700;
  color: #111;
}

.card-arrow {
  margin: 0 -14px;
}

@media (max-width: 700px) {
  .link-page {
    padding-top: 20px;
  }

  .link-header {
    margin-bottom: 40px;
  }

  .link-logo {
    max-width: 140px;
  }

  .reservation-cards {
    gap: 40px;
  }

  .reservation-card {
    width: 240px;
    min-height: 360px;
  }

  .card-left,
  .card-right,
  .card-left:hover,
  .card-right:hover {
    transform: none;
  }
}

@media screen and (min-width: 1000px) {

  /* Fonts */
  /* spacing */
  body {
    font-family: "AntiqueOliReg", sans-serif;
    font-size: 1.55vw;
    line-height: 1.13;
  }

  menu {
    font-family: "AntiqueOliBol", sans-serif;
    font-size: 2.1vw;
    line-height: .95;
  }

  footer {
    font-family: "AntiqueOliReg", sans-serif;
    font-size: 1vw;
    line-height: 1.13;
    padding: 0.05vw 2.5vw 1.5vw 2.5vw;
    margin-top: 2.5vw;
  }

  button {
    font-family: "AntiqueOliBol", sans-serif;
    font-size: 2.1vw;
    line-height: .95;
  }
}

@media screen and (max-width: 1000px) {

  /* Fonts */
  /* spacing */
  body {
    font-family: "AntiqueOliReg", sans-serif;
    font-size: 5.35vw;
    line-height: 1.13;
  }

  menu {
    font-family: "AntiqueOliBol", sans-serif;
    font-size: 7vw;
    line-height: .95;
  }

  footer {
    font-family: "AntiqueOliReg", sans-serif;
    font-size: 4vw;
    line-height: 1.13;
    padding: 4vw 3.5vw 8vw 3.5vw;
    margin-top: 8vw;
  }
}