.GridRep {
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    gap: $unit;
    padding: $unit * 2;

    &:hover {
        background: white;
        cursor: pointer;

        .Grid .weapon {
            box-shadow: inset 0 0 0 1px $grey-80;
        }
    }

    .Grid {
        display: flex;
        flex-direction: row;
        flex-shrink: 0;

        .weapon {
            background: white;
            border-radius: 4px;
        }

        .grid_mainhand {
            margin-right: $unit;
            height: 139px;
            width: 66px;
        }

        .grid_weapons {
            display: grid;
            grid-template-columns: 1fr 1fr 1fr;
            grid-template-rows: 1fr 1fr 1fr;
            gap: $unit;
            margin: 0;
            padding: 0;
            width: fit-content;
        }

        .grid_weapon {
            float: left;
            height: 40px;
            width: 70px;
        }
        
        .grid_mainhand img[src*="jpg"],
        .grid_weapon img[src*="jpg"] {
            border-radius: 4px;
            width: 100%;
            height: 100%;
        }
    }

    .Details {
        display: flex;
        flex-direction: column;
        gap: $unit / 2;

        h2 {
            color: $grey-00;
            font-size: $font-regular;

            &.empty {
                color: $grey-50;
            }
        }

        .bottom {
            display: flex;
            flex-direction: row;
        }

        .raid, time {
            color: $grey-50;
            font-size: $font-small;
        }

        .raid {
            flex-grow: 1;
        }
    }
}