<main>

  <h1>Our Trip to France</h1>

  <ol>
    <li> Day 1
      <ol>
        <li>Morning
          <ol>
            <li>Visit Eiffel Tower</li>
            <li>Explore Champ de Mars</li>
          </ol>
        </li>
        <li>Afternoon
          <ol>
            <li>Visit Louvre Museum</li>
            <li>Enjoy Seine River Cruise</li>
          </ol>
        </li>
      </ol>
    </li>
    <li>Day 2
      <ol>
        <li>Morning
          <ol>
            <li>Visit Notre Dame Cathedral</li>
            <li>Explore Montmartre</li>
          </ol>
        </li>
      </ol>
    </li>
  </ol>
</main>

<img src="https://res.cloudinary.com/ddzynrhrx/image/upload/v1737942872/Eiffel-Tower-Dream_nhtoj6.png" alt="Eiffel Tower">

@import url("https://fonts.googleapis.com/css2?family=Domine:wght@400..700&family=League+Script&display=swap");

ol {
  counter-reset: item;

  li {
    counter-increment: item;
  }

  li::marker {
    content: counters(item, ".") ") ";
  }
}

/* Aesthetic Changes */

:root {
  --rem-value: clamp(14px, 3vw, 18px);

  --outer-spacing: 4rem;
  --inner-spacing: 3rem;
}

* {
  padding: 0px;
  margin: 0px;
  box-sizing: border-box;
}

html {
  font-size: var(--rem-value);
  font-family: "Domine", serif;
  font-weight: 800;

  scrollbar-width: thin;
}

body {
  display: grid;
  grid-template-rows: 1fr 1fr;
  grid-template-columns: 1fr auto;
  min-height: 100vh;

  overflow-x: hidden;

  background: linear-gradient(#7193b3a0, transparent);
}

main {
  grid-column-start: 1;
  grid-column-end: 3;
  grid-row-start: 1;
  grid-row-end: 3;

  display: flex;
  flex-flow: column;
  gap: var(--inner-spacing);

  padding: var(--outer-spacing);
}

main > ol {
  display: flex;
  flex-flow: row wrap;
  gap: var(--inner-spacing);
}

h1 {
  font-family: "League Script", serif;
  font-weight: 600;
  font-size: 3.5rem;
  font-style: normal;
  text-align: center;
}

ol {
  padding-left: 20px;
  line-height: var(--inner-spacing);
  list-style-position: inside;
}

li {
  font-size: 1.2rem;
}

li li {
  font-size: 1rem;
}

li li li {
  font-size: 0.8rem;
}

img {
  grid-column-start: 2;
  grid-column-end: 3;
  grid-row-start: 1;
  grid-row-end: 3;

  padding-top: var(--outer-spacing);

  width: min(400px, 100vw);
  height: 100%;
  object-fit: cover;

  --100vw: 100vw;
  --int-width: calc(10000 * tan(atan2(var(--100vw), 10000px)));
  --wideness: clamp(0.25, var(--int-width) / 800 - 0.3, 1);

  opacity: var(--wideness);
}

@property --100vw {
  syntax: "<length>";
  initial-value: 0px;
  inherits: false;
}