/* MAIN SECTION */

#intro {
  background-color: #ebe7e2;
  padding: 0;
  margin-bottom: 2rem;
}

#intro .columns {
  align-items: stretch;
  grid-template-columns: 1.5fr 1fr;
  gap: 0;
}

#intro .columns div {
  padding: 4rem;
  display: flex;
  flex-direction: column;
}

#intro h2,
#intro p {
  margin-bottom: 2rem;
  text-align: start;
}

#intro .button {
  margin: 0;
}

#intro .columns img {
  width: 100%;
  display: block;
  object-fit: cover;
}

#intro-bottom-bar {
  background-color: var(--dark-green);
  color: white;
  padding: 1rem;
  font-weight: bold;
}

#intro-bottom-bar ul {
  display: flex;
  justify-content: space-around;
  margin: 0;
}

#intro-bottom-bar ul li {
  display: flex;
  align-items: center;
  gap: 1rem;
}

#intro-bottom-bar img {
  width: 2rem;
  height: auto;
}

#intro-bottom-bar p {
  margin: 0;
}

/* MEDIA SECTION */

#media {
  padding-inline: 0;
}

#media q {
  margin: 0;
  width: 100%;
}

#media a {
  display: grid;
  place-items: center;
  gap: 2rem;
}

#media a img {
  max-width: 300px;
  width: 80%;
}

#media figure {
  margin: 0;
  display: flex;
  flex-direction: column;
}

/* NORMAL SECTIONS */

#collage {
  position: relative;
  height: 400px;
}

#collage img:first-child {
  position: absolute;
  left: 20%;
  width: 80%;
  height: 80%;
}

#collage img:nth-child(2) {
  position: absolute;
  top: 50%;
  width: 70%;
  height: 50%;
}

@media (max-width: 1500px) {
  main > section:not(#intro) {
    padding: 4rem calc(var(--horizontal-padding) + 4rem);
  }

  #intro .columns div {
    padding: 15vh var(--horizontal-padding);
  }

  #intro-bottom-bar {
    padding: 1rem var(--horizontal-padding);
  }

  #intro-bottom-bar ul {
    justify-content: space-between;
  }
}

@media (max-width: 1000px) {
  main > section img#takin {
    aspect-ratio: 4 / 3;
    margin: auto;
    object-position: 0 90%;
  }

  #collage {
    aspect-ratio: 4 / 3;
    width: 100%;
    height: auto;
    order: -1;
  }
}

@media (max-width: 768px) {
  #intro .columns {
    grid-template-columns: 1fr;
  }

  #intro h2,
  #intro p {
    text-align: center;
  }

  #intro .columns div {
    padding: 10vh var(--horizontal-padding);
  }

  #intro .columns img {
    display: none;
  }

  #intro .button {
    margin: 0 auto;
  }

  #intro-bottom-bar ul {
    flex-direction: column;
    width: max-content;
    margin: 0 auto;
    gap: 2rem;
  }

  main > section:not(#intro) {
    padding: 2rem calc(var(--horizontal-padding) + 2rem);
  }
}