@font-face {
  font-family: "Panton Narrow Regular";
  src: url("panton-narrow-regular.otf") format("opentype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

html { background: #00335c; }
body { margin: 0; font: 400 16px/1.5 "Panton Narrow Regular", sans-serif; color: #fff; }
.landing {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  min-height: 100vh;
  padding: 40px 0;
  background: #00335c url("background.webp") center center / cover no-repeat;
}
.content { width: 100%; }
.brand, .destination { display: flow-root; text-align: center; }
.logo { margin-bottom: 20px; }
.logo img { width: 360px; max-width: calc(100% - 48px); height: auto; vertical-align: middle; }
.vertical-divider { display: none; width: 0; height: 48px; padding: 0; margin: 0 auto; border: 0; border-left: 1px solid rgba(255,255,255,.1); }
.container { display: flow-root; box-sizing: content-box; max-width: 1400px; margin: 28px auto 0; padding: 0 24px; }
.languages { display: flex; flex-wrap: wrap; margin-left: -60px; }
.languages section { position: relative; box-sizing: border-box; width: 100%; padding-left: 60px; text-align: center; }
h1 { margin: 0; font-size: 34px; line-height: 1.2; font-weight: 400; }
.languages p { box-sizing: border-box; width: 600px; max-width: 100%; margin: 24px auto 0; font-size: 18px; line-height: 1.5; }
.languages section + section { margin-top: 48px; }
.languages section + section::before { content: ""; position: absolute; top: -24px; left: 60px; right: 0; border-top: 1px solid rgba(255,255,255,.1); }
.destination { margin-top: 28px; }
.destination-label { margin: 28px 0 16px; font-size: 16px; line-height: 1.4; }
.button-row { margin-top: 16px; }
.button-row a { display: inline-block; box-sizing: border-box; padding: 0 30px; border: 2px solid #fff; border-radius: 12px; color: #fff; background: transparent; font-size: 15px; line-height: 44px; letter-spacing: 2px; text-decoration: none; vertical-align: middle; transition: background-color .1s ease-in-out, color .1s ease-in-out, border-color .1s ease-in-out; }
.button-row a:hover { background: #fff; color: #00335c; border-color: transparent; }
.button-row a:active { background: rgba(255,255,255,.8); color: #00335c; border-color: transparent; }
.button-row a:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }

@media (min-width: 640px) {
  .container { padding-right: 30px; padding-left: 30px; }
  .languages section { width: 50%; }
  .languages section + section { margin-top: 0; }
  .languages section + section::before { top: 0; bottom: 0; left: 30px; right: auto; border-top: 0; border-left: 1px solid rgba(255,255,255,.1); }
}
@media (min-width: 960px) {
  .landing { padding-top: 56px; padding-bottom: 56px; }
  .container { padding-right: 40px; padding-left: 40px; }
  h1 { font-size: 44px; }
  .languages p { margin-top: 28px; font-size: 20px; line-height: 1.4; }
  .vertical-divider { display: block; }
}
@media (min-width: 1200px) {
  .container, .destination { margin-top: 32px; }
  .languages { margin-left: -80px; }
  .languages section { padding-left: 80px; }
  .languages section + section::before { left: 40px; }
}
@media (min-width: 960px) and (max-height: 850px) {
  .landing { padding-top: 20px; padding-bottom: 20px; }
  .logo img { width: 300px; }
  .vertical-divider { height: 24px; }
  h1 { font-size: 38px; line-height: 1.15; }
  .languages p { margin-top: 24px; }
  .container, .destination { margin-top: 28px; }
  .destination-label { margin-top: 24px; }
}