/* ------------------------------------------------------------- 04/09/2025 - *
  .b-slim-portrait
 * -------------------------------------------------------------------------- */
.b-slim-portrait {
//border: 1px solid Red;
  position: relative;
  overflow: hidden;
  max-width: 560px;
  max-height: 700px;
  margin: auto;
  background-color: rgba(var(--text-rgb, Fuchsia),.05);
  border-radius: 8px;

  .slim { 
    cursor: pointer;
    background-color: transparent;
    transition: .3s; 

    &[data-state*='empty']:hover { background-color: rgba(var(--text-rgb, Fuchsia),.07); }
  } /* .slim */

  .slim-label { 
    font-size: smaller;

    i { 
      font-size: 500%; 
      display: block; 
      margin-bottom: 1em;
      opacity: .2;
    } /* icon */
  } /* .slim-label */
} /* b-slim-portrait */


/* ------------------------------------------------------------- 09/08/2025 - *
  .b-slim-portrait | -portraitgrid (optional)
 * -------------------------------------------------------------------------- */
.b-slim-portrait {
  &.-portraitgrid:before,
  &.-portraitgrid:after {
    z-index: 1;
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, rgba(DeepPink,.5) 1px, transparent 1px);
  } /* -portraitgrid */

  /* optional -portraitgrid */
  &.-portraitgrid:before { top: 0%; left: 10%; background-size: 80%; } /* lines vertikal */
  &.-portraitgrid:after  { top: 1%; left:  0%; background-size: 98%; transform: rotate(90deg); } /* lines horizontal */
  
  .cl-portraitgrid {
    z-index: 3;
    position: absolute;
    top: 2%;
    right: 2%;    
    color: DeepPink;
  } /* .cl-portraitgrid */
} /* b-slim-portrait */