.differentHard-img-container {
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    padding: var(--gap-3) var(--gap-2) var(--gap-2);
}

.differentHard-img-content
{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: var(--gap-2);
    padding: 5px;
}

.small-all .differentHard-img-content
{
    gap: 5px;
    padding: 5px;
}

.differentHard-img {
    /* 계산을 해야 할까? */
    width: 20vh;
    height: 20vh;
    transition: 0.1s;
    border-radius: var(--gap-3);
}
/* 화면이 긴 경우 gameWrapper의 너비를 기준으로 크기를 정한다. */
.long-different .differentHard-img {
    width: calc(var(--gameWrapper-width) / 4) !important;
    height: calc(var(--gameWrapper-width) / 4) !important;
}
.small-different .differentHard-img {
    width: 12vh;
    height: 12vh;
}
.small-all .differentHard-img{
    width: 11vh;
    height: 11vh;
}