.hero-image > .background {
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;

  width: 100%;
  height: 80vh;
}

.hero-image > .background img {
  flex-shrink: 0;
  min-width: 100%;
  min-height: 100%;
}

#hero-small {
  display: none;
}

.hero-content {
  width: 1000px;
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  text-shadow: -4px 4px 6px rgba(0, 0, 0, 1);

  display: flex;
  flex-direction: column;
  align-items: center;
}

.hero-content h1 {
  font-size: 3em;
}

.hero-content h2 {
  font-size: 1.25em;
}

.hero-content a {
  background-color: #025e73;
  padding: 10px 30px 10px 30px;
  border-radius: 4px;
  text-decoration: none;
  color: white;
  font-weight: 500;
  font-size: 1.25em;
  text-shadow: none;

  -webkit-transition: all 300ms cubic-bezier(0.42, 0, 0.58, 1);
  -moz-transition: all 300ms cubic-bezier(0.42, 0, 0.58, 1);
  -o-transition: all 300ms cubic-bezier(0.42, 0, 0.58, 1);
  transition: all 300ms cubic-bezier(0.42, 0, 0.58, 1); /* ease-in-out */
}

.hero-content a:hover {
  background-color: white;
  color: #025e73;
}

.front-page-content {
  width: 100%;
  height: auto;
  background-image: url("../assets/images/background/wood-content-background-dark.jpg");
  background-repeat: repeat-y;
  background-position: center center;
  background-size: cover;
  text-align: center;
}

.text-wrapper {
  padding: 120px 0;
  margin: 0 auto;
  color: white;
  font-size: 1.25em;
}

.text-wrapper > .bottom-text {
  margin-top: 100px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 50px;
}

.package-display {
  display: flex;
  align-items: center;
  justify-content: center;
}

.package-button {
  background-color: rgb(218, 218, 218);
  width: 50px;
  height: 50px;
  border-radius: 25px;
  text-align: center;

  font-size: 2.5em;
  color: #fff;

  -webkit-transition: all 100ms cubic-bezier(0.25, 0.1, 0.25, 1);
  -moz-transition: all 100ms cubic-bezier(0.25, 0.1, 0.25, 1);
  -o-transition: all 100ms cubic-bezier(0.25, 0.1, 0.25, 1);
  transition: all 100ms cubic-bezier(0.25, 0.1, 0.25, 1);
}

.package-button:hover {
  background-color: rgb(180, 180, 180);
  cursor: pointer;
}

#package-container {
  overflow: auto;
  white-space: nowrap;
  overflow-x: auto;
  height: 500px;
  margin: 1rem 5px;
  text-align: center;
}

#package-container::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.2);
  box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.2);
  border-radius: 10px;
  background-color: #f5f5f5;
}

#package-container::-webkit-scrollbar {
  width: 12px;
  background-color: #f5f5f5;
  height: 6px;
}

#package-container::-webkit-scrollbar-thumb {
  border-radius: 12px;
  background-color: rgb(184, 184, 184);
}

.package-display .package-item {
  display: inline-block;
  vertical-align: middle;

  width: 450px;
  height: 300px;
  margin: auto;
  text-decoration: none;
  color: #fff;
}

.see-more-on-airbnb {
  display: inline-block;
  vertical-align: middle;

  width: 250px;
  height: 430px;
}

.airbnb-container {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.see-more-on-airbnb a {
  text-decoration: none;
  color: black;
  font-family: var(
    --font-font_family,
    Circular,
    -apple-system,
    BlinkMacSystemFont,
    Roboto,
    Helvetica Neue,
    sans-serif
  );
  -webkit-transition: all 200ms cubic-bezier(0.25, 0.1, 0.25, 1);
  -moz-transition: all 200ms cubic-bezier(0.25, 0.1, 0.25, 1);
  -o-transition: all 200ms cubic-bezier(0.25, 0.1, 0.25, 1);
  transition: all 200ms cubic-bezier(0.25, 0.1, 0.25, 1);
}

.see-more-on-airbnb a:hover {
  color: #006c70;
}

.see-more-on-airbnb a:hover #airbnb-circle {
  fill: #ff5a5f;
}

#airbnb-circle {
  fill: #035f74;
  -webkit-transition: all 200ms cubic-bezier(0.25, 0.1, 0.25, 1);
  -moz-transition: all 200ms cubic-bezier(0.25, 0.1, 0.25, 1);
  -o-transition: all 200ms cubic-bezier(0.25, 0.1, 0.25, 1);
  transition: all 200ms cubic-bezier(0.25, 0.1, 0.25, 1);
}

/*Desktop */
@media screen and (min-width: 1224px) {
  .hero-image > .background img {
    transform: translateY(300px);
  }

  .content-wrapper {
    margin-top: 0;
  }

  .text-wrapper {
    width: 1000px;
  }

  #package-container {
    max-width: 75%;
  }
}
/*Tablet */
@media screen and (min-width: 600px) and (max-width: 1224px) {
  .hero-image > .background {
    height: 60vh;
    transform: translateY(100px);
  }

  .hero-image > .background img {
    transform: translateY(200px);
  }

  .hero-content {
    top: 40%;
    left: 50%;
    width: 90%;
  }

  .front-page-content {
    background-size: 175%;
    background-position-x: center;
  }

  .text-wrapper {
    width: 90%;
  }

  #package-container {
    max-width: 75%;
  }
}

/* Smartphones */
@media screen and (max-width: 600px) {
  #hero-big {
    display: none;
  }
  #hero-small {
    display: block;
  }

  .hero-image > .background {
    height: 50vh;
    transform: translateY(75px);
  }

  .hero-content {
    top: 35%;
    width: 90%;
  }

  .front-page-content {
    background-size: 300%;
    background-position-x: center;
  }

  .text-wrapper {
    width: 90%;
  }

  .text-wrapper > .bottom-text {
    margin-top: 50px;
    display: flex;
    flex-direction: column;
  }

  .text-wrapper > .bottom-text > .right-text {
    margin-top: 50px;
  }

  .airbnb-embed-frame {
    transform: scale(0.9);
    margin: auto 5px;
  }

  #package-container {
    min-width: 90%;
    max-width: 90%;
  }

  .package-button {
    display: none;
  }
}