:root {
  --distance-side: 10vw;
}

body {
  height: 100%;
}

header.hero {
  display: grid;
  grid-template-rows: 1fr;
  grid-template-columns: auto auto;
  align-items: center;
  justify-items: space-between;
  gap: var(--space-2xl);
  background-color: var(--black);
  padding: 1rem;
  padding-inline: var(--distance-side);
  width: 100%;

  min-height: 90vh;
  font-size: 1rem;
}

header.hero > div.left > h1 {
  margin: 0;
  color: var(--white);
  font-size: var(--step-6);
}

header.hero > div.left > h2 {
  max-width: unset;
  color: var(--white);
  font-size: var(--step-1);
}

header.hero > div.left > h4 {
  max-width: unset;
  color: var(--white);
  font-size: var(--step--1);
}

header.hero > div.left > p {
  max-width: unset;
  color: var(--white);
  font-size: var(--step--1);
}

aqua {
  color: var(--c-aqua);
}

header.hero > div.left > div {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1rem;
}

header.hero > div.left > a.btn {
  margin-block: var(--space-xs);
}

/* text */

#text {
  padding-inline: var(--distance-side);
  padding-block: var(--space-l);
}

/* form */

div#form {
  --link-color: var(--c-aqua);
  display: grid;
  grid-template-columns: 1fr;
  border-radius: 15px;
  background-color: var(--white);
  padding: 1rem;
  width: fit-content;
  height: fit-content;
}

form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

form > * {
  grid-column: 1 / -1;
}

form > div.name-field-container {
  display: flex;
  flex-flow: row wrap;
  gap: 1rem;
  gap: var(--space-m);
}

/* Media queries */

@media screen and (max-width: 1510px) {
  header.hero {
    grid-template-rows: auto auto;
    grid-template-columns: 1fr;
    align-items: start;
  }
}

@media screen and (max-width: 500px) {
  :root {
    --distance-side: 5vw;
  }
}

/* cduplus-assistent */

body.cduplus-assistent {
  background-color: var(--black);
  padding: var(--space-m);
}

body.cduplus-assistent p {
  color: var(--white);
}

/* scroller */

div.scroller {
  display: flex;
  position: sticky;
  top: var(--space-3xs);
  justify-content: start;
  /* flex-flow: row wrap; */
  align-items: center;
  gap: 1rem;

  box-sizing: border-box;
  margin: var(--space-3xs);
  box-shadow: rgba(0, 0, 0, 0.1) 2px 4px 5px 0px;
  border-radius: 15px;
  background-color: var(--white);
  padding-inline: var(--space-s);
  padding-block: var(--space-xs);
  height: fit-content;
}

div.scroller > h4 {
  margin: 0;
}

/* img gallery */

.image-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--space-m);
  padding-inline: var(--distance-side);
  padding-block: var(--space-l);
}

.image-gallery a {
  display: block;
  transition: transform 0.2s ease;
}

.image-gallery a:hover {
  transform: scale(1.02);
}

.image-gallery img {
  box-shadow: rgba(0, 0, 0, 0.1) 2px 4px 5px 0px;
  border: 1px solid var(--c-aqua);
  border-radius: 8px;
  width: 100%;
  height: auto;
}

@media screen and (max-width: 500px) {
  .image-gallery {
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: var(--space-s);
  }
}