:root {
  --text: #000;
  --background: #f5f9fc;
  --header-light: #f5f9fc;
  --header-dark: #005c99;
  --header-overlay: rgb(from var(--header-dark) r g b / .6);
}

body {
  font-family: system-ui;
  color: var(--text);
  background-color: var(--background);
}

.teaser-image {
  background-image: url("/static/horinai.jpg");
  background-size: cover;
  background-position: 30% center;
}
header {
  color: var(--header-light);
  text-align: center;

  display: grid;
  grid-template-rows: clamp(min(33rem, 54lvw), 74lvh, 180lvw) clamp(min(11rem, 18lvw), 26lvh, 60lvw) auto;
}

.teaser-overlay, .teaser-image {
  grid-area: 1 / 1 / span 2;
  z-index: -1;
}
.teaser-overlay {
  background-color: var(--header-overlay);
}

.teaser-content {
  grid-area: 1 / 1 / span 1;
  margin-top: min(5rem, 15lvh);
  padding-inline: min(2rem, 25% - 22lvw);
}
.teaser-content * {
  text-shadow: +.05rem +.05rem calc(.15rem + .05em) var(--header-overlay),
               +.05rem -.05rem calc(.15rem + .05em) var(--header-overlay),
               -.05rem +.05rem calc(.15rem + .05em) var(--header-overlay),
               -.05rem -.05rem calc(.15rem + .05em) var(--header-overlay),
                .00rem +.05rem calc(.15rem + .05em) var(--header-overlay),
               +.05rem  .00rem calc(.15rem + .05em) var(--header-overlay),
                .00rem -.05rem calc(.15rem + .05em) var(--header-overlay),
               -.05rem  .00rem calc(.15rem + .05em) var(--header-overlay);
}
.teaser-content .btn {
  --bs-btn-hover-color: var(--header-dark);
  --outset-shadow: var(--header-overlay);
  --inset-shadow: var(--header-overlay);
  box-shadow: +.05rem +.05rem calc(.15rem + .05em) var(--outset-shadow),
        inset +.05rem +.05rem calc(.15rem + .05em) var(--inset-shadow),
              +.05rem -.05rem calc(.15rem + .05em) var(--outset-shadow),
        inset +.05rem -.05rem calc(.15rem + .05em) var(--inset-shadow),
              -.05rem +.05rem calc(.15rem + .05em) var(--outset-shadow),
        inset -.05rem +.05rem calc(.15rem + .05em) var(--inset-shadow),
              -.05rem -.05rem calc(.15rem + .05em) var(--outset-shadow),
        inset -.05rem -.05rem calc(.15rem + .05em) var(--inset-shadow),
               .00rem +.05rem calc(.15rem + .05em) var(--outset-shadow),
        inset  .00rem +.05rem calc(.15rem + .05em) var(--inset-shadow),
              +.05rem  .00rem calc(.15rem + .05em) var(--outset-shadow),
        inset +.05rem  .00rem calc(.15rem + .05em) var(--inset-shadow),
               .00rem -.05rem calc(.15rem + .05em) var(--outset-shadow),
        inset  .00rem -.05rem calc(.15rem + .05em) var(--inset-shadow),
              -.05rem  .00rem calc(.15rem + .05em) var(--outset-shadow),
        inset -.05rem  .00rem calc(.15rem + .05em) var(--inset-shadow);
}
.teaser-content .btn:is(:active, :hover, :focus-visible) {
  text-shadow: none;
  --inset-shadow: var(--bs-btn-hover-bg);
}
.teaser-content.teaser-content--locale {
  margin-top: min(2rem, 5lvw);
  justify-self: end;
}

.detail {
  max-width: 60rem;
  margin-inline: auto;
}

.cards-container {
  grid-area: 2 / 1 / span 2;
  padding-inline: min(2rem, 3lvw);
  gap: min(2rem, 3lvw);
  display: flex;
  flex-direction: column;
  align-items: center;
}
@media screen and (min-width: 35rem) {
  .cards-container {
    flex-direction: row;
    justify-content: center;
    align-items: start;
  }
}
.cards-container .card {
  max-width: 20rem;
}

.package {
  display: flex;
  flex-direction: column;
  width: 100%;
}
.package__image {
  height: 50lvw;
}
.package__text {
  align-self: center;
  padding-inline: min(2rem, 3lvw);
}
@media screen and (min-width: 35rem) {
  .package {
    flex-direction: row;
    justify-content: flex-start;
    min-height: 100lvh;
  }
  .package:nth-child(2n + 1) {
    flex-direction: row-reverse;
    text-align: right;
  }
  .package__image {
    flex: 0 1 min(70lvw, 50lvw + 10rem);
    height: auto;
    align-self: stretch;
    position: relative;
  }
  .package__image .carousel {
    position: absolute;
    inset: 0;
  }
  .package__text {
    flex: 0 0 clamp(15rem, 60lvw, 30rem);
  }
}

.future {
  background-color: rgb(from var(--header-dark) r g b / .8);
  color: var(--header-light);
}

a {
  color: inherit;
}
.btn {
  transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out, text-shadow .15s ease-in-out;
}
.btn-outline-primary {
  --bs-btn-color: var(--header-dark);
  --bs-btn-border-color: var(--header-dark);
  --bs-btn-hover-bg: var(--header-dark);
  --bs-btn-hover-border-color: var(--header-dark);
  /* --bs-btn-focus-shadow-rgb: 13, 110, 253; */
  --bs-btn-active-bg: var(--header-dark);
  --bs-btn-active-border-color: var(--header-dark);
  --bs-btn-disabled-color: var(--header-dark);
  --bs-btn-disabled-border-color: var(--header-dark);
}