/* ------------------------------------------------------------- 22/07/2025 - *
   .b-card-portrait (container query)

  <div class="b-card-portrait | -bradius8px" style="--foto-max-width: calc(150px + 1vw); padding: 1em; border: 1px solid rgba(var(--text-rgb, Fuchsia), .1);">
    <div class="b-card | .-testr">
      <div class="b-card-foto"><img loading="lazy" src="" alt="" class="-clipped-bot | -bradius8px"></div>
      <div class="b-card-text" style="max-width: 72ch;">
        <p>.b-card-portrait (-clipped-bot) - Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos, ad!</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas, et, quidem! Vero, blanditiis tempora fuga, at ut aperiam dicta eligendi cupiditate rem neque fugiat dolor veniam, explicabo ab. Quod, aut.</p>
      </div><!-- b-card-text  -->
    </div><!-- b-card -->
  </div><!-- b-card-portrait -->
 * -------------------------------------------------------------------------- */
.b-card-portrait {
  --foto-max-width: calc(150px + 1vw); /* kann inline überschrieben werde */

  .b-card-foto { max-width: var(--foto-max-width); } /* .b-card-foto */

  // Responsive Container  
  container-type: inline-size;
  @container (min-width: 700px) { /* gap wird hier addiert */
    .b-card {
      display: flex;
      flex-direction: row;
      gap: 1.25em;
    } /* .b-card */
  } /* @container */

  /* optional */
  .-clipped-top { clip-path: polygon(100% 100%, 0% 100%, 0% 0%, 90% 0%); border-bottom-right-radius: 0; }
  .-clipped-bot { clip-path: polygon(100% 0, 0% 0, 0% 100%, 90% 100%);   border-top-right-radius: 0; } 
} /* .b-card-portrait */