:root {
  --main-color_1: #cef7fe;
  --main-color_2: #f9cfcf;
  --main-color_3: #ffff;
  --font-color_1: black;
  --sidebar-bg: rgb(66, 66, 66);


}

.font_1 {
  font-weight: bold;
  font-family: "Noto Sans", sans-serif;
  color: var(--font-color-1);
}

.title_font_left {
  font-size: xx-large;
  margin-bottom: 5%;
}



.banner_text {
  color: var(--main-color-3);
  font-size: xxx-large;
  font-weight: normal;
}

.spot_container {
  display: flex;
  flex-direction: row;
  width: 100%;
  padding: 5% 3%;
  box-sizing: border-box;
  gap: 4%;
}

.spot_left_col {
  display: flex;
  flex-direction: column;
  width: 25%;
  gap: 20px;
}

.main_picture_box {
  width: 100%;
  aspect-ratio: 1 / 1;
  background-color: var(--main-color-3);
  border: 1px solid #ccc;
}

.main_picture {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.thumbnail_grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px;
}

.thumb_img {
  width: 100%;
  aspect-ratio: 1 / 1;
  background-color: var(--main-color-3);
  object-fit: cover;
}

.spot_center_col {
  display: flex;
  flex-direction: column;
  width: 40%;
}

.spot_description p {
  font-size: large;
  line-height: 1.6;
  margin-bottom: 8%;
}

.spot_right_col {
  width: 31%;
}

.info_sidebar {
  background-color: var(--sidebar-bg);
  padding: 30px;
  min-height: 500px;
  display: flex;
  flex-direction: column;
}

.info_label {
  color: var(--main-color-3);
  font-size: large;
  margin-bottom: 25px;
}

.sidebar_heading {
  color: var(--main-color-3);
  font-size: xxx-large;
  margin-top: auto;
  font-weight: bold;
}