<article class='post-card'>
  <div class='content'>
    <img class='poster' src='https://creatures.dev/_astro/general-5.99bc4673_1aShEp.webp' />
    <div class='post-data'>
      <h4>Getting started with CSS Nesting</h4>
      <p>CSS Nesting used to only be possible in CSS preprocessors like Sass and Less. But guess what, it’s now part of Native CSS! Let's see what's CSS Nesting and how we can get started using it.
      </p>
      <a href='https://creatures.dev/blog/getting-started-with-css-nesting'>Read on →</a>
    </div>
  </div>
</article>

@layer styles {
  :root {
    --colors-bg-panel: #0f0f14;
    --colors-bg-panel-hover: #1a1a24;
    --colors-border: #1c1d29;
    --colors-link: #ca5577;
    --colors-text-primary: white;
    --colors-text-secondary: #ffffffb3;
  }

  body {
    background: #020208;
    color: var(--colors-text-primary);
    font-family: system-ui, sans-serif;
    padding: 24px;
  }

  article.post-card {
    background: var(--colors-bg-panel);
    border: 2px solid var(--colors-border);
    overflow: hidden;
    transition: background 150ms ease-out;
    padding: 12px;
    border-radius: 12px;
    position: relative;
    /* Declare the containment context on this element */
    container: post-card / inline-size;
    /* same as:
       container-name: post-card;
       container-type: inline-size;
    */

    &:hover {
      background: var(--colors-bg-panel-hover);
    }

    & div.content {
      display: flex;
      /* Set the flex initially to column */
      flex-direction: column;
      overflow: hidden;

      & img.poster {
        aspect-ratio: 16 / 9;
        position: relative;
        width: 100%;
        border-radius: 12px;
        margin-bottom: 12px;
        overflow: hidden;
      }

      & div.post-data {
        width: 100%;
        padding: 12px;
        display: flex;
        flex-direction: column;
        gap: 12px;
        box-sizing: border-box;

        & h4 {
          font-size: 24px;
          line-heigth: 32px;
          margin: 0;
        }

        & p {
          font-size: 14px;
          line-height: 20px;
          color: var(--colors-text-secondary);
          overflow: hidden;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 3;
          margin: 0;
        }

        & a {
          color: var(--colors-link);
          text-decoration: none;
          font-weight: bold;

          &::after {
            content: " ";
            position: absolute;
            inset: 0;
          }
        }
      }
    }
  }
}

/*
Define a style block for when the post card
is at least 512px wide.
*/
@container post-card (min-width: 512px) {
  /*
  The 'post-card' after @container sets the top-level
  context to the article.post-card element, so all 
  selectors must target its descendants,
  otherwise the styles will not be applied.
  */

  div.content {
    /* Change the card orientation to row */
    flex-direction: row;
    align-items: center;
  }

  img.poster {
    margin-bottom: 0px;
    /* Set the poster as the second child */
    order: 2;
  }

  /* Increase visual values like gap, font-size
  and line-height */
  div.post-data {
    gap: 24px;

    & h4 {
      font-size: 2.75cqi;
      line-height: 140%;
    }

    & p {
      font-size: 1.5cqi;
      line-height: 140%;
    }

    & a {
      font-size: 1.5cqi;
      line-height: 140%;
    }
  }
}