@use "../abstracts/mixins.scss" as *;


.species-list{
         display: grid;
         grid-gap: calc(var(--spacing)*1);
        grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));

        .taxon{
            align-self: start;
        }

    }
    

.species-list .taxon{


    .chart-edit{
        @include chart-edit(40px);
    }


    .chart-edit, .btn-edit{
        display: none;
    }



    display: flex;
    flex-direction: column;
    position: relative;

    background-color: var(--color-green-light);
    padding: calc(var(--padding-inner)*0.75);

    .name{ order: 1; }
    figure{ order: 2; }

    figure{
        @include fig-ratio(1/1);

        border-radius: var(--radius-img);
        overflow: hidden;
        
    }

    .vernacular{
        background-color: var(--color-green);
        color: white;
        border-radius: var(--radius-small);
        padding: 4px 1ch;
        margin-bottom: calc(var(--spacing)*0.25);
        font-size: var(--fs-normal);
        line-height: 1.1;
        a{
            color: white;
            text-decoration: none;
        }
    }

    .latin{
        font-weight: normal;
        font-weight: 500;
        font-style: italic;
        margin-bottom: calc(var(--spacing)*0.75);
        color: var(--color-txt);
             font-size: var(--fs-small);
    }

    .vernacular, .latin{
        text-align: center;
    }

    &:hover{
        outline: 2px solid var(--color-green);

    }

  

}