/* -------------------------------------------------------- */
/* GRIDDERY */
/* -------------------------------------------------------- */
/*----- griddery v2.0 (NEW) -----*/
[griddery-cont] {
    display: table;
    width: 100%;
}

[griddery-tr] {
    display: table-row;
}

[griddery-col] {
    display: table-cell;
    vertical-align: top;
}

[griddery-item] {
    display: flex;
    justify-content: center;
}

[griddery-item] > * {
    flex: 1;
}

[griddery-item] img,
[griddery-item] iframe,
[griddery-item] figure {
    max-width: 100%;
}

[griddery-item] img {
    border-radius: var(--border-radius);
    width: 100%;
    transition: 0.5s;
}

[griddery-item] img:hover {
    outline: 1px solid var(--secondary-accent);
    outline-offset: -5px;
}

/*----- 🐶 DOGS GRID 🐶 -----*/
/* dogs grid column spacing */
[griddery-id=".minecraft"] [griddery-col] + [griddery-col] {
    padding-left: 10px;
}

/* dogs grid "row" spacing */
[griddery-id=".minecraft"] [griddery-item] + [griddery-item] {
    margin-top: 3px;
}

/* everything below here is not necessary, it's just for the purpose of the demo. however,
 * you may consider following the rules I wrote for imgs so that they don't appear super huge. */

[griddery-item] {
    position: relative;
    border-radius: 4px;
    overflow: hidden;
    z-index: 0;
}

[griddery-item] .label {
    position: absolute;
    top: 0;
    left: 0;
    padding: 4px 6px;
    border-radius: 0 0 4px 0;
    background: rgba(0, 0, 0, 69%);
    color: white;
    font-family: monospace;
    z-index: 1;
}