/* =========================================================
   HAVEN Website v3
   Chat Sounds grid v0.2 candidate
   ========================================================= */


.guide-sound-grid {
    display: grid;

    grid-template-columns:
        repeat(
            4,
            minmax(0, 1fr)
        );

    gap: 1px;

    background:
        rgba(255, 255, 255, 0.055);
}


.guide-sound-item {
    min-width: 0;
    min-height: 92px;

    padding:
        14px
        15px;

    background:
        rgba(8, 12, 15, 0.97);

    border: 0;

    transition:
        background 110ms ease;
}


.guide-sound-item:hover {
    background:
        rgba(209, 106, 45, 0.055);
}


.guide-sound-name {
    min-width: 0;

    color:
        rgba(232, 238, 242, 0.72);

    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1.35;

    overflow-wrap: anywhere;
}


.guide-sound-trigger {
    margin-top: 10px;
}


.guide-sound-item .guide-command {
    padding:
        4px
        6px;

    font-size: 0.67rem;
}


.guide-sound-item .guide-variant-badge {
    margin-left: 5px;

    vertical-align: 1px;
}


.guide-sound-item[hidden] {
    display: none;
}


/* =========================================================
   Responsive columns
   ========================================================= */


@media (max-width: 1180px) {

    .guide-sound-grid {
        grid-template-columns:
            repeat(
                3,
                minmax(0, 1fr)
            );
    }

}


@media (max-width: 820px) {

    .guide-sound-grid {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }

}


@media (max-width: 520px) {

    .guide-sound-grid {
        grid-template-columns:
            1fr;
    }


    .guide-sound-item {
        min-height: 0;
    }

}