index-main/assets/css/components/_card-open-graph.scss

.card--open-graph{

     container-type: inline-size;
    container-name: opengraph;

    .open-graph__inner{
        @include grid-content();
        
    }



  

    // border: var(--border-light);
    border: 1px solid var(--grey-600);
    border-radius: var(--radius-small);
    position: relative;

    figure{
        grid-column: 1;
        grid-row: 1;
        width: 100%;
        height: 100%;
        img{
            width: 100%;
            height: 100%;
            object-fit: cover;  
        }
    
    }

    // @include figure-16-9();
    

    @media #{$x-small}{
       figure{
        height: 100%;
        aspect-ratio: auto;
       }
    }

    .content{
        padding-top: calc(var(--padding-inner)*0.75);
        padding-bottom: calc(var(--padding-inner)*0.75);

        padding-right: var(--padding-inner);
        grid-column: 2;
        grid-row: 1;
    }

    .site-name{
        color: var(--color-txt-light);
        font-size: var(--fs-xsmall);
        margin-bottom: 3px;
    }

    .title{
        font-size: var(--fs-small);
        font-weight: 500;
        line-height: 1.1;
        padding-top: 2px;
        display: -webkit-box;
        -webkit-line-clamp: 2;    
        -webkit-box-orient: vertical;
        overflow: hidden;
        margin-bottom: 0.5em;
        a{ 
            text-decoration: none;
        }
    }

    .description{
        font-size: var(--fs-xsmall);
        display: -webkit-box;
        -webkit-line-clamp: 3;    
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    &:hover{
        border-color: var(--color-txt);
        background-color: var(--grey-950);
    }
}



@container opengraph (width < 500px) {
    // .card--open-graph{
    //     background-color: red!important;

    //     .content{
    //         padding: calc(var(--padding-inner)*0.5);
    //     }

    //     figure{
    //         aspect-ratio: inherit;
    //     }
    // }
}