.CardsContainer 
{
  /* border: 2px solid rgb(75 70 74); */
  /* border-radius: 0.5em; */
  /* font: 1.2em sans-serif; */

  height: auto;
  display: flex;
  align-items: center;
  justify-content: center;

    .Item 
    {
        /* border: 2px solid rgb(95 97 110); */
        /* border-radius: 0.5em; */
        /* padding: 0px; */
        width: 100%;
        height: auto;
        text-align: center;
    }
}

.RendererFeatureCard
{
    border-style: solid; 
    border-width: 2px;
    border-radius: 8px;
    margin: 0;
    padding: 8px;

    /* Responsive sizing: scales between 200px and 400px */
    /* width: clamp(200px, 100%, 400px); */
    
    /* Maintain aspect ratio (adjust ratio as needed) */
    /* Standard card ratio */
    /* aspect-ratio: 2.5 / 3.5; */

    /* this style applies to elements with class body inside an element with class card. */
    /* the syntax for CSS sub-classes is: .classname .subclassname                       */
    .Body
    {
        border-style: dashed; 
        border-width: 0px;
        margin: 0;
        padding: 2px;

        /* this style applies to elements with class header inside an element with class card. */
        .Header
        {
            border-style: none; 
            border-width: 1px; 
            display: flex; 
            justify-content: space-between; 
            align-items: center; 
            margin-bottom:2px; 
            padding:0;

            /* text-overflow: ellipsis; */

            .Name
            {
                border-style: dashed; 
                border-width: 1px;
                text-align: left; 
                padding: 2px;
                font-size: small;
                
                /* Make text shrink and truncate */
                min-width: 0;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
                
                /* Optional: allow it to take available space */
                flex: 1;
            }

            .Icon
            {
                border-style: dashed; 
                border-width: 1px;
                text-align: right;
                padding:2px;
                font-size: small; 
            }
        }

        .Image
        {
            border-style: dashed; 
            border-width: 1px; 
            margin-bottom: 8px; 
            padding:4px; 
            border-style: dashed;
        }

        .ImageCaption
        {
            border-style:   dashed; 
            border-width:   1px;
            margin-top:     -12px; 
            margin-bottom:  8px; 
            padding:        8px;
            font-size:      6px;
            font-style:     italic;
        }


        .Description
        {
            border-style: dashed; 
            border-width: 1px; 
            line-height:1; 
            margin:0; 
            padding:4px; 
            text-align:left; 
            font-size:smaller; 
            border-style: dashed;
        }
    }
}

/* TCG Card Style for Mermaid Diagram FlowChart Nodes */
/* Keep in mind that breaks/enters/whitespace etcetera in mermaid node headers isn't ignored as is with regular HTML*/
.FlowChartNodeCard
{
    border-style:   solid; 
    border-width:   0px;
    margin:         0;
    padding:        0px;
    size:           100%;

    .Body
    {
        border-style:       dashed; 
        border-width:       1px;
        margin:             0;
        padding:            2px;

        .Header
        {
            border-style:       none; 
            border-width:       1px; 
            display:            flex; 
            justify-content:    space-between; 
            align-items:        center; 
            margin-bottom:      2px; 
            padding:            0;

            .Name
            {
                border-style:   dashed; 
                border-width:   1px;
                text-align:     left; 
                padding:        2px;
                font-size:      7px; 
            }

            .Icon
            {
                border-style:   dashed; 
                border-width:   1px;
                text-align:     left; 
                padding:        2px;
                font-size:      7px; 
            }
        }

        .Image
        {
            border-style:   dashed; 
            border-width:   1px; 
            margin-bottom:  8px; 
            padding:        4px; 
        }

        .ImageCaption
        {
            border-style:   dashed; 
            border-width:   1px;
            margin-top:     -12px; 
            margin-bottom:  8px; 
            padding:        8px;
            font-size:      6px;
            font-style:     italic;
        }

        .Description
        {
            border-style:   dashed; 
            border-width:   1px; 
            line-height:    1; 
            margin:         0; 
            padding:        2px; 
            text-align:     left; 
            font-size:      8px; 
            border-style:   dashed;
        }
    }
}