#main {
    min-height: max-content;
    display: flex; flex-wrap: wrap;
    gap: 10px;
    padding-inline: 2vw;
}

article {
    flex: 1 1 600px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    font-size: clamp(8px, 2vw, 16px);
}

.drop-btn{
    --btn-border: 10px;
    min-height: 80px;
    height: auto;

    display: flex;

    box-shadow: 0 0 5px 0 var(--bg-secondary);
    border-radius: 10px;
    border-bottom-right-radius: var(--btn-border);
    border-bottom-left-radius: var(--btn-border);

    overflow: hidden;
    z-index: 1;

    transition: border-radius .4s ease;
    .source-title, span{
        min-height: 80px;
        display: flex;
        align-items: center;
    }
    .source-title{
        background-color: var(--bg-primary);
        flex: 1;
        padding-inline: 4vw;

    }
    span{
        --angle-drop-icon: 0deg;
        background-color: var(--bg-tertiary);
        width: 10vw;
        max-width: 120px;
        display: flex;
        justify-content: center; align-items: center;
        cursor: pointer;
        .btn-icon{
            font-size: xx-large;
            transform: rotate(var(--angle-drop-icon));
            transition: transform .4s ease;
            color: var(--description-color);
        }
    }
}

.dropbox{
    --dropbox-posY: -50px;
    --dropbox-max-height: 0;
    --dropbox-paddingY: 0;
    --dropbox-vis: hidden;
    transform: translateY(var(--dropbox-posY));
    opacity: 0; visibility: var(--dropbox-vis);

    background-color: var(--bg-primary);
    box-shadow: 0 0 5px var(--bg-secondary);

    border-bottom-left-radius: var(--drop-border);
    border-bottom-right-radius: var(--drop-border);
    filter: blur(10px);
    max-height: var(--dropbox-max-height);
    padding: var(--dropbox-paddingY) 40px;

    transition: all .3s ease, max-height .15s ease;
}

.drop{
    --dropbox-posY: 0;
    --angle-drop-icon: 45deg;
    --btn-border: 0px;
    --drop-border: 10px;
    --dropbox-max-height: 1000px;
    --dropbox-paddingY: 10px;
    --dropbox-vis: visible;
    opacity: 1;
    filter: none;
}