[data-page="species-by-families"],
[data-page="species"]{

    .group-sort-view{
        display: flex;
        justify-content: space-between;
   
        flex-wrap: wrap;

        grid-column: span 2;
        width: 100%;
         max-width: 100%;
        border-bottom: 1px solid var(--color-x-light);
        padding-top: calc(var(--spacing)*1);
        padding-bottom: calc(var(--spacing)*0.5);
        margin-bottom: calc(var(--spacing)*1.5);

        position: sticky;
        top: 0;
        background-color: var(--white);
        z-index: 50;
    }

    .page-species{
        margin-bottom: 30vh;
    }




}


[data-page="species-by-families"]{
  .species-list{
         align-items: center;

        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: calc(var(--spacing)*1);
        margin-bottom: calc(var(--spacing)*3);
         .taxon{
            width: calc(100%/3 - var(--spacing)*2/3);
        }

    }
}








[data-page="species"]{

    .page-species{
        grid-column: span 2;
        width: 100%;
        max-width: 100%;
    }


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

        .taxon{
            align-self: start;
        }

    }

}