.hero {
  height: 280px;
  background-image: url(media/rooms/room-banner.jpeg);
  background-position: center;
  background-size: cover;
  margin-bottom: 50px;
}

.our-rooms-wrapper {
  padding: 0 15%;
  text-align: center;
  background-image: url("media/blue-bear-background.png");
  background-size: cover;
  background-color: rgba(255, 255, 255, 0.85);
  background-blend-mode: lighten;
}
.our-rooms-wrapper h1 {
  color: var(--logoBlue);
  text-align: center;
  font-size: 3rem;
  margin-bottom: 30px;
}

.our-rooms-wrapper .facilities {
  margin-bottom: 50px;
}

.our-rooms-wrapper p span {
  display: block;
  margin-bottom: 20px;
}

.room-btns-wrapper {
  display: flex;
  margin: 70px auto;
  width: 85%;
  flex-wrap: wrap;
  column-gap: 30px;
}

.room-btn {
  flex: 1 1 calc(50% - 30px);

  display: flex;
  justify-content: center;
}

.room-btn a {
  font-size: 1.2rem;
  width: 100%;
}

.img-wrapper {
  position: relative;
  overflow: hidden;
}
.room-img {
  position: absolute;
}

.room-img-v {
  width: 100%;
}

.room-img-h {
  height: 100%;
}

.text-wrapper {
  flex-basis: 50%;
  box-sizing: border-box;
  padding: 50px 50px 20px 50px;
}

.bunnies-section {
  background-color: rgba(248, 248, 248, 1);
}

.bunnies-wrapper {
  display: flex;
}

.bunnies-text-wrapper {
  flex-basis: 50%;
  box-sizing: border-box;
  padding: 50px 50px 20px 50px;
}
.bunnies-text-wrapper h1 {
  color: var(--logoBlue);
  font-size: 3rem;
  margin-bottom: 20px;
}

.bunnies-text-wrapper h2 {
  color: var(--logoBlue);
  margin-bottom: 20px;
}

.bunnies-text-wrapper p {
  margin-bottom: 20px;
}

.bunnies-img-wrapper {
  flex-basis: 50%;
  background-color: lightgray;
  background-image: url(media/rooms/bunnies.jpeg);
  background-size: cover;
}

.bunnies-gallary {
  height: 250px;
  background-color: lightblue;
}

.teddies-section {
  background-color: var(--canary);
  position: relative;
}

.teddies-wrapper {
  display: flex;
}

.teddies-text-wrapper {
  position: relative;
  flex-basis: 50%;
  box-sizing: border-box;
  padding: 50px 50px 20px 50px;
  z-index: 10;
}
.teddies-text-wrapper h1 {
  color: var(--logoBlue);
  font-size: 3rem;
  margin-bottom: 20px;
  z-index: 10;
}

.teddies-text-wrapper h2 {
  margin-bottom: 20px;
  color: var(--logoBlue);
}

.teddies-text-wrapper p {
  margin-bottom: 20px;
}

.teddies-img-wrapper {
  flex-basis: 50%;

  background-image: url("media/rooms/teddies.jpeg");
  background-size: cover;
}

.teddies-gallary {
  height: 250px;
  background-color: lightblue;
}

.bears-wrapper {
  display: flex;
}

.red-blue-bears {
  margin-top: 70px;
}

.red-blue-bears > h1 {
  color: var(--logoBlue);
  font-size: 3.8rem;
  z-index: 10;
  text-align: center;
}

.red-blue-bears > h2 {
  color: var(--logoBlue);
  font-size: 3rem;
  z-index: 10;
  text-align: center;
  margin-bottom: 50px;
}

.bears-wrapper h1 {
  color: var(--logoBlue);
  font-size: 3rem;
  margin-bottom: 20px;
  z-index: 10;
}
.bears-wrapper h2 {
  color: var(--logoBlue);
  margin-bottom: 20px;
}

.bears-wrapper p {
  margin-bottom: 20px;
}

.bears-img-wrapper {
  flex-basis: 50%;
  min-height: 500px;
}

.red-bears-text-wrapper {
  background-image: url(media/pink-bear-background.png);
}

.blue-bears-text-wrapper h1 {
  margin-top: 0 !important;
}
.blue-bears-text-wrapper {
  background-image: url(media/blue-bear-background.png);
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  justify-content: center;
}

.blue-bears-text-wrapper .btn-wrapper {
  align-self: flex-start;
}

.red-bears-text-wrapper,
.blue-bears-text-wrapper,
.green-bears-text-wrapper,
.yellow-bears-text-wrapper {
  background-size: cover;
  background-position: center;
  background-color: rgba(255, 255, 255, 0.7);
  background-blend-mode: lighten;
}

.red-bears-text-wrapper h1,
.red-bears-text-wrapper h2 {
  color: var(--logoPink);
}

/* bear background images */
.red-bears-img-wrapper {
  background-image: url(media/rooms/red-bears.jpeg);
  background-size: cover;
}

.blue-bears-img-wrapper {
  background-image: url(media/rooms/blue-bears.jpeg);
  background-size: cover;
}

.green-bears-img-wrapper {
  background-image: url(media/rooms/green-bears.jpeg);
  background-size: cover;
}

.yellow-bears-img-wrapper {
  background-image: url(media/rooms/yellow-bears.jpeg);
  background-size: cover;
}

.green-yellow-bears {
  margin-top: 50px;
}

.green-yellow-bears > h1 {
  color: var(--logoBlue);
  font-size: 3.8rem;
  z-index: 10;
  text-align: center;
}

.green-yellow-bears > h2 {
  color: var(--logoBlue);
  font-size: 3rem;
  z-index: 10;
  text-align: center;
  margin-bottom: 50px;
}

.green-bears-text-wrapper h1,
.green-bears-text-wrapper h2 {
  color: var(--logoGreen);
}

.yellow-bears-text-wrapper h1 {
  color: var(--canary);
}

.green-bears-text-wrapper {
  background-image: url(media/green-bear-background.png);
}

.yellow-bears-text-wrapper {
  background-image: url(media/yellow-bear-background.png);
  background-color: transparent;
  background-blend-mode: normal;
}

@media (max-width: 800px) {
  .bunnies-wrapper {
    flex-direction: column;
  }

  .img-wrapper {
    overflow: visible;
    min-height: 400px;
  }

  .room-img {
    width: 100%;
    min-height: 300px;
    position: relative;
  }
  .baby-care-wrapper {
    flex-direction: column-reverse;
  }

  .baby-care-text-wrapper {
    aspect-ratio: inherit;
    padding-right: 50px;
  }
  .baby-care-img-wrapper {
    min-height: 400px;
  }
  .teddies-wrapper {
    flex-direction: column-reverse;
  }

  .bears-wrapper {
    flex-direction: column;
  }

  .blue-bears {
    flex-direction: column-reverse;
  }
  .bears-img-wrapper {
    min-height: 400px;
  }

  .yellow-bears {
    flex-direction: column-reverse;
  }

  .room-btns-wrapper {
    display: block;
  }

  .room-btn a {
    display: block;
    width: 100%;
  }

  .custom-btn {
    display: block;
    text-align: center;
  }

  .blue-bears-text-wrapper {
    display: block;
  }
  .blue-bears-text-wrapper .btn-wrapper a {
    width: 100%;
  }
  .blue-bears-img-wrapper {
    background-image: url(media/rooms/blue-bears.jpeg);
    background-size: cover;
    background-position: center;
  }
}