<h1>⭐️ CSS Color Mix() </h1>
<p>Article on <a href="https://developer.chrome.com/blog/whats-new-css-ui-2023/#color-mix">Chrome Developers</a> </p>
<div class="container">
  <div class="card">
    <h2 class="card-title">Velvet Bliss: Indulge in Our Signature Latte Creations</h2>
    <img class="card-img" src="https://images.unsplash.com/photo-1509042239860-f550ce710b93?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=987&q=80" alt="">
    <p class="card-description">Experience the epitome of coffee luxury with our exquisite selection of signature lattes at Biscotti. Step into a world of velvety textures and delightful flavors that will awaken your senses and transport you to a state of pure bliss.</p>
    <div class="card-action">
      <div class="action-row">
        <i class="fa-solid fa-heart"></i>
        <p>362</p>
      </div>
      <div class="action-row">
        <i class="fa-solid fa-paper-plane"></i>
        <p>Share</p>
      </div>
    </div>
  </div>
</div>

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@200;400;900");

:root {
  --color1: #222;
  --color2: #25661e;
  --color1-t5: color-mix(in srgb, var(--color1), transparent 5%);
  --color1-t10: color-mix(in srgb, var(--color1), transparent 10%);
  --color1-t20: color-mix(in srgb, var(--color1), transparent 20%);
  --color1-t30: color-mix(in srgb, var(--color1), transparent 30%);
  --color1-t40: color-mix(in srgb, var(--color1), transparent 40%);
}

* {
  box-sizing: border-box;
}

body {
  font-family: "Inter", sans-serif;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: color-mix(in srgb, var(--color1), transparent 90%);

  > h1 {
    color: color-mix(in srgb, var(--color1-t20), var(--color2));
    font-size: clamp(1.2rem, 8vw, 2rem);
    margin-bottom: 0;
    text-align: center;
  }

  > p {
    color: var(--color1-t30);
    text-align: center;
    margin: 0.5rem 0 1rem;
  }
}

a {
  color: color-mix(in srgb, var(--color1-t20), var(--color2));
}

// was trying to use native CSS Nesting but it doesn't work yet on everywhere else except latest Chrome 👀 - so back to SCSS
.card {
  max-width: 350px;
  &-title {
    font-size: 30px;
    color: var(--color1-t20);
    font-size: clamp(1.2rem, 8vw, 25px);
  }

  &-img {
    width: 100%;
    object-fit: cover;
    aspect-ratio: 1/1;
  }

  .card-description {
    color: var(--color1-t5);
  }

  &-action {
    display: flex;
    gap: 0.75rem;
    color: var(--color1-t40);

    .action-row {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      transition: color 0.4s ease;

      &:hover {
        color: var(--color2);
      }
    }
  }
}

/* IGNORE - for codepen preview on profile */
@media (max-width: 666px) and (max-height: 380px) {
  .card {
    max-width: 150px;
  }
}