<style>
  @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap");

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

  /* ===== global======= */
  body {
    font-family: "Poppins", sans-serif;
  }

  .section {
    min-height: 100vh;
    margin: 0 30px;
  }

  .grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }

  .display {
    font-size: 60px;
    text-transform: uppercase;
  }

  .intro {
    width: 420px;
  }

  .card {
    grid-template-columns: repeat(4, 1fr);
    gap: 3.5rem;
  }

  .card-body {
    background-color: rgb(251, 242, 225);
    box-shadow: 0 0 5px 2px rgba(0, 0, 0, 0.16);
    padding: 10px 20px;
    border-radius: 10px;
    cursor: pointer;
    transition: box-shadow 300ms ease-in;
  }

  .card-body:is(:hover, :focus) {
    box-shadow: 0 0 15px 3px rgba(0, 0, 0, 0.16);
  }

  /* navbar */
  .header {
    padding: 10px 0;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: sticky;
    top: 0;
    background-color: white;
    transition: all 300ms ease;
  }

  .header_shadow {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.16);
  }

  .navbar {
    display: flex;
    justify-content: space-around;
    align-items: center;
    width: 100%;
  }

  .menu_list {
    display: flex;
    justify-content: space-around;
    align-items: center;
    width: 35%;
    list-style: none;
  }

  .nav_link,
  a {
    text-decoration: none;
  }

  .toggler {
    display: none;
  }

  /* ========home section========= */
  .home_section .grid .col-2 {
    order: 1;
  }

  /* responsive */
  @media screen and (max-width: 992px) {
    .grid {
      grid-template-columns: repeat(2, 1fr);
    }

    .card {
      grid-template-columns: repeat(3, 1fr);
    }
    .home_section .grid .col-2 {
      order: 1;
    }
  }

  @media screen and (max-width: 992px) {
    .grid,
    .card {
      grid-template-columns: repeat(1, 1fr);
    }

    .intro {
      width: 320px;
    }
  }
</style>

<script>
  const header = document.querySelector(".header");
  header.addEventListener("click", () => {
    alert("clicked");
  });
  const handleHeaderShadow = () => {
    const scrollY = window.pageYOffset;
    scrollY >= 80
      ? header.classList.add("header_shadow")
      : header.classList.remove("header_shadow");
  };

  window.addEventListener("scroll", handleHeaderShadow);
</script>
