<h1>Space Facts CQ + :has() Demo</h1>

<div class="facts-grid">
  <div class="container">
    <div class="card">
      <div class="visual">🌕</div>
      <div class="meta">
        <h2>The Moon</h2>
        <p class="desc">The moon is very hot (224 degrees Fahrenheit, average) during the day but very cold (-243 degrees average) at night.</p>
      </div>
    </div>
  </div>
  <div class="container">
    <div class="card">
      <div class="visual">🚀</div>
      <div class="meta">
        <h2>Sally Ride</h2>
        <p class="desc">Sally Ride was the first American woman to fly in space, on June 18, 1983.</p>
      </div>
    </div>
  </div>
  <div class="container">
    <div class="card">
      <div class="meta">
        <h2>Planets spin in different directions</h2>
        <p class="desc">Venus spins clockwise. It’s the only planet that does!</p>
      </div>
    </div>
  </div>
  <div class="container">
    <div class="card">
      <div class="visual">⏳</div>
      <div class="meta">
        <h2>Time is different on different planets</h2>
        <p class="desc">Neptune’s days are only 16 hours long.</p>
      </div>
    </div>
  </div>
  <div class="container">
    <div class="card">
      <div class="meta">
        <h2>How big is the sun compared to earth?</h2>
        <p class="desc">One million Earths could fit inside the sun!</p>
      </div>
    </div>
  </div>
  <div class="container">
    <div class="card">
      <div class="visual">🏔</div>
      <div class="meta">
        <h2>Geysers in space</h2>
        <p class="desc">Europa, one of Jupiter's moons, has saltwater geysers that are 20x taller than Mt. Everest. </p>
      </div>
    </div>
  </div>
  <div class="container">
    <div class="card">
      <div class="visual">🌚</div>
      <div class="meta">
        <h2>Moonless planets</h2>
        <p class="desc">Mercury and Venus do not have moons. (They are the only two planets in our solar system that don't!)</p>
      </div>
    </div>
  </div>
  <div class="container">
    <div class="card">
      <div class="meta">
        <h2>There are more stars in the universe than there are grains of sands on Earth.</h2>
      </div>
    </div>
  </div>
  <div class="container">
    <div class="card">
      <div class="visual">🪐</div>
      <div class="meta">
        <h2>Icy Rings around Saturn</h2>
        <p class="desc">Saturn's rings are made from trillions of chunks of orbiting ice. </p>
      </div>
    </div>
  </div>
  <div class="container">
    <div class="card">
      <div class="visual">🌋</div>
      <div class="meta">
        <h2>Mars volcano</h2>
        <p class="desc">Mars has the biggest volcano (so far) ever discovered in the solar system. </p>
      </div>
    </div>
  </div>
</div>

.facts-grid {
  display: grid;
  grid-gap: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.container {
  container-type: inline-size; // needs to be size for height too
  display: grid;
}

.card {
  display: grid;
}

.card:has(.visual) {
  grid-template-columns: 1fr 1fr;
}

.card:has(.visual) h2 {
  font-size: 2rem;
}

.card:not(:has(.visual)) h2 {
  font-size: clamp(2rem, 15cqi, 4rem);
  font-weight: 300;
}

@container (max-width: 400px) {
  .card:has(.visual) {
    grid-template-columns: 1fr;
  }
}

// since the card stretches in the row, when it gets too tall
// we want it to also go to a 1-column layout
@container (min-height: 300px) {
  .card:has(.visual) {
    grid-template-columns: 1fr;
  }
}

// addtl. styles

body {
  font-family: system-ui;
  background-image: url(https://images.unsplash.com/photo-1464802686167-b939a6910659);
  background-size: cover;
  background-position: center;
  padding: 0 1rem;
}

h1 {
  text-align: center;
  color: white;
  padding: 1rem;
  font-size: 3rem;
  font-weight: 300;
}

.card {
  background: hsl(240deg 50% 20% / 80%);
  padding: 1rem;
  color: thistle;
  border: 1px solid mediumpurple;
  gap: 1rem;
}

.visual { 
  background: hsl(300deg 25% 70% / 25%);
  display: grid;
  place-items: center;
  font-size: 96px;
  min-height: 10rem;
}