:root {
  --font-family: "Lato", sans-serif;
  --color-bkg: #192B47;
  --color-text: #FFFFFF;
}

/* Reset */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 1vw;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-family);
  min-height: 100vh;
  background-color: var(--color-bkg);
  color: var(--color-text);
  font-size: clamp(18px, 1.5625rem, 26px);
  font-weight: 300;
  line-height: 1.6em;
  -webkit-font-smoothing: antialiased;
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

input,
button,
textarea,
select {
  font: inherit;
}

ul,
ol {
  list-style: none;
}

a {
  color: inherit;
  text-underline-offset: 1px;
}

.text-thin {
  font-family: var(--font-family);
  font-weight: 100;
  font-style: normal;
}

.text-light {
  font-family: var(--font-family);
  font-weight: 300;
  font-style: normal;
}

.text-regular {
  font-family: var(--font-family);
  font-weight: 400;
  font-style: normal;
}

.text-bold {
  font-family: var(--font-family);
  font-weight: 700;
  font-style: normal;
}

.text-black {
  font-family: var(--font-family);
  font-weight: 900;
  font-style: normal;
}

.text-thin-italic {
  font-family: var(--font-family);
  font-weight: 100;
  font-style: italic;
}

.text-light-italic {
  font-family: var(--font-family);
  font-weight: 300;
  font-style: italic;
}

.text-regular-italic {
  font-family: var(--font-family);
  font-weight: 400;
  font-style: italic;
}

.text-bold-italic {
  font-family: var(--font-family);
  font-weight: 700;
  font-style: italic;
}

.text-black-italic {
  font-family: var(--font-family);
  font-weight: 900;
  font-style: italic;
}

.layout-wrapper {
  padding: 6.875rem 8.75rem;
  height: 100vh;
}

h1,
h2 {
  font-size: clamp(21px, 2.1875rem, 42px);
  font-weight: 700;
  line-height: 1.14em;
}

.layout-text {
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  height: 100%;
  row-gap: 1.6em;
  max-width: 40%;
}

.layout-image {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: auto;
  /* height: calc(100vh - 6.875rem - 14.375rem); */
  height: 70vh;
}

.layout-image-text {
  display: block;
  width: auto;
  max-width: 90vw;
  height: clamp(30px, 2.9375rem, 2.9375rem);
  position: absolute;
  left: 50%;
  bottom: 5vh;
  transform: translateX(-50%);
  object-fit: contain;
}

.layout-top-link {
  position: absolute;
  top: 2.5rem;
  right: 2.5rem;
  font-size: clamp(16px, 1.25rem, 24px);
  text-decoration: none;
}

@media screen and (max-width: 1000px) {
  .layout-wrapper {
    padding: 20px;
  }

  .layout-text {
    padding-top: 40px;
    max-width: unset;
    justify-content: flex-start;
  }

  .layout-image {
    opacity: .3;
    top: 20px;
    bottom: 80px;
    transform: translateX(-50%);
    height: calc(100vh - 20px - 80px);
  }

  .layout-image-text {
    bottom: 20px;
  }

  .layout-top-link {
    top: 20px;
    right: 20px;
  }
}