@import url("https://fonts.googleapis.com/css2?family=Charm:wght@400&display=swap");

body {
  max-width: 100vw;
  padding: 1rem;
  background: #111;
  color: #eee;
  font-family: Charm;
  font-size: 18px;

  @media only screen and (min-width: 800px) {
    padding: 2rem;
    font-size: 24px;
  }
}

.container {
  max-width: 800px;
  margin: auto;
}

h1 {
  font-size: 32px;
  max-width: 800px;
  margin: auto;

  @media only screen and (min-width: 800px) {
    font-size: 60px;
  }
}

p {
  max-width: 800px;
  margin: 2rem auto;

  @media only screen and (min-width: 800px) {
    margin: 4rem auto;
  }
}

.images {
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: 100%;
  gap: 1rem;
  justify-items: center;
  align-items: center;

  @media only screen and (min-width: 800px) {
    gap: 2rem;
  }
}

.image {
  max-width: 100%;
  border-radius: 0.5rem;
}