.table {
    display: flex;
    flex-direction: column;
    gap: 1.6rem;
    margin-bottom: 3rem;
}

.row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1.5fr;
    align-items: center;
    justify-items: center;

}

.name {
    font-weight: bold;
    font-size: 1.1rem;
    text-align: center;
}

.icon {
    width: 64px;
    height: 64px;
}

.stat {
    height: 28px;
    display: flex;
    flex-direction: row;
    justify-content: start;
    align-items: center;
    padding: 8px 0;
}

.stat-icon {
    width: 28px;
    height: 28px;
    margin: 0px 6px;
}

.description {
    display: flex;
    flex-direction: row;
    justify-content: start;
    align-items: center;
    padding: 8px 0;
    font-size: 0.9rem;
    color: #555;
    text-align: center;
}

.hunger {
    filter: brightness(0) saturate(100%) invert(72%) sepia(64%) saturate(776%) hue-rotate(358deg) brightness(100%) contrast(107%) drop-shadow(1px 1px 0px #000);
}

.stamina {
    filter: brightness(0) saturate(100%) invert(80%) sepia(89%) saturate(463%) hue-rotate(14deg) brightness(94%) contrast(90%) drop-shadow(1px 1px 0px #000);
}

.poison {
    filter: brightness(0) saturate(100%) invert(19%) sepia(96%) saturate(2586%) hue-rotate(263deg) brightness(115%) contrast(97%) drop-shadow(1px 1px 0px #000);
}

.heat {
    filter: brightness(0) saturate(100%) invert(10%) sepia(94%) saturate(5589%) hue-rotate(352deg) brightness(95%) contrast(97%) drop-shadow(1px 1px 0px #000);
}

.injury {
    filter: brightness(0) saturate(100%) invert(34%) sepia(74%) saturate(1871%) hue-rotate(358deg) brightness(97%) contrast(101%) drop-shadow(1px 1px 0px #000);
}

.drowsy {
    filter: brightness(0) saturate(100%) invert(57%) sepia(63%) saturate(3822%) hue-rotate(298deg) brightness(99%) contrast(84%) drop-shadow(1px 1px 0px #000);
}

.cursed {
    filter: brightness(0) saturate(100%) invert(11%) sepia(7%) saturate(6351%) hue-rotate(217deg) brightness(97%) contrast(115%) drop-shadow(1px 1px 0px #000);
}

.spores {
    filter: brightness(0) saturate(100%) invert(46%) sepia(48%) saturate(538%) hue-rotate(305deg) brightness(79%) contrast(79%) drop-shadow(1px 1px 0px #000);
}

.thorns {
    filter: brightness(0) saturate(100%) invert(36%) sepia(78%) saturate(1727%) hue-rotate(50deg) brightness(99%) contrast(101%) drop-shadow(1px 1px 0px #000);
}

@media (max-width: 768px) {
    .icon {
        width: 42px;
        height: 42px;
    }

    .name {
        font-size: 0.68rem !important;
        font-weight: bold;
    }

    .stat {
        height: 14px;
        font-size: 0.5rem !important;
        font-weight: normal;
        padding: 4px 0;
    }

    .stat-icon {
        width: 16px;
        height: 16px;
        margin: 0 2px;
    }

    .description {
        font-size: 0.6rem !important;
    }
}