.ic {
    display: inline-block;
    vertical-align: middle;

    background-color: var(--txt);

    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;

    transition: background-color 0.3s ease;
}

.ic-gray {
    background-color: var(--gray);
}

.ic-red {
    background-color: var(--red);
}

.ic-white {
    background-color: #fff;
}

.ic-logo {
    -webkit-mask-image: url('./icon/logo.svg');
    mask-image: url('./icon/logo.svg');
}

.ic-arw-up {
    -webkit-mask-image: url('./icon/arw-up.svg');
    mask-image: url('./icon/arw-up.svg');
}

.ic-img {
    -webkit-mask-image: url('./icon/img.svg');
    mask-image: url('./icon/img.svg');
}