#view-ecosystem-decision-tree .contextual-region
{
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

#view-ecosystem-decision-tree .views-exposed-form
{
    display: flex;
    margin-bottom: 1rem;
    justify-content: center;
}

#view-ecosystem-decision-tree .view-content
{
    flex-basis: 70%;
}

#view-ecosystem-decision-tree .view-content-wrap
{
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

#view-ecosystem-decision-tree .form-actions
{
    display: flex;
    flex-direction: column;
}


#view-ecosystem-decision-tree .form-select
{
    width: 100%;
}

#view-ecosystem-decision-tree [id^="edit-submit"]
{
    flex-basis: 100%;
}

#view-ecosystem-decision-tree .form-actions:has([id^='edit-reset']) .form-submit
{
    padding-block: unset;
    flex-basis: 50%;
    font-size: 1rem;
}

#view-ecosystem-decision-tree .item
{
    flex: 0 0 calc(33.7% - 1rem);
    border: 1px solid var(--arta-st-two-grey);
    border-radius: var(--arta-border-radius);
    padding-bottom: 1rem;
}

#view-ecosystem-decision-tree .item .views-field-field-stage
{
    font-weight: 500;
}

#view-ecosystem-decision-tree .item img
{
    border-top-right-radius: 1rem;
    margin-bottom: 1rem;
}

#view-ecosystem-decision-tree .item > div:not(.views-field-field-image)
{
    padding-inline: 1rem;
}

@media screen and (max-width: 1100px) 
{
    #view-ecosystem-decision-tree .views-exposed-form
    {
        flex-direction: column;
    }

    #view-ecosystem-decision-tree .select-wrapper
    {
        height: unset;
        margin-block: 0.5rem;
        width: 100%;
    }

    #view-ecosystem-decision-tree .form-select
    {
        width: 100%;
    }

    #view-ecosystem-decision-tree .form-actions:has([id^="edit-reset"]) .form-submit
    {
        font-size: inherit;
        padding: 0.25rem 2rem;
    }

    #view-ecosystem-decision-tree .form-item
    {
        margin-right: unset;
    }
}

@media screen and (max-width: 700px)
{
    #view-ecosystem-decision-tree .item
    {
        flex-basis: calc(50% - 1rem);
    }
}

@media screen and (max-width: 500px)
{
    #view-ecosystem-decision-tree .item
    {
        flex-basis: 100%;
    }
}