.card-concept {
    @include flex-column-no;
    gap: $px-8;
    padding: $px-14;
    width: 240px;
    height: 254px;
    // background: $color-white;
    border: 1px solid $color-gray-light;
    border-radius: $px-8;
    text-decoration: none;

    &:hover {
        background: $gradient-sunrise;
    }
}

.card-concept-row {
    @include flex-column;
    gap: $px-8;
    padding: $px-12;
    background: $color-white;
    // border: 1px solid $color-gray-light;
    border-radius: $px-8;
    text-decoration: none;

    &:hover {
        // background: $gradient-sunrise;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' viewBox='0 0 4 4'%3E%3Cpath fill='%23a2a2a2' fill-opacity='0.6' d='M1 3h1v1H1V3zm2-2h1v1H3V1z'%3E%3C/path%3E%3C/svg%3E");
        background-color: $color-background;
    }
}

.card-post {
    @include flex-column;
    gap: $px-8;
    padding: $px-14;
    border-radius: $px-8;
    text-decoration: none;
    background: $color-white;
    cursor: pointer;

    &:hover {
        // background: $gradient-sunrise;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' viewBox='0 0 4 4'%3E%3Cpath fill='%23a2a2a2' fill-opacity='0.6' d='M1 3h1v1H1V3zm2-2h1v1H3V1z'%3E%3C/path%3E%3C/svg%3E");
        background-color: $color-background;
    }
}

.card-row {
    @include flex-row;
    gap: $px-14;
    padding: $px-14;
    width: 100%;
    background: $color-white;
    border: 1px solid $color-gray-light;
    border-radius: $px-8;
    text-decoration: none;

    &:hover {
        background: $gradient-sunrise;
    }
}

.card-post-b {
    @include flex-column;
    gap: $px-8;
    padding: $px-16;
    border-radius: $px-8;
    text-decoration: none;
    width: 100%;
    // background: $gradient-blue;
}

.card-post-line {
    @include flex-column;
    gap: $px-8;
    padding: $px-16;
    border-radius: $px-8;
    text-decoration: none;
    width: 100%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' viewBox='0 0 4 4'%3E%3Cpath fill='%23a2a2a2' fill-opacity='0.6' d='M1 3h1v1H1V3zm2-2h1v1H3V1z'%3E%3C/path%3E%3C/svg%3E");
    background-color: $color-background;
    // background-image: url("data:image/svg+xml,%3Csvg width='6' height='6' viewBox='0 0 6 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%239C92AC' fill-opacity='0.4' fill-rule='evenodd'%3E%3Cpath d='M5 0h1L0 6V5zM6 5v1H5z'/%3E%3C/g%3E%3C/svg%3E");
}

.badge {
    width: $px-4;
    height: $px-16;
    border-radius: $px-48;
    margin: 0;
}

.badge-h {
    width: $px-16;
    height: $px-4;
    border-radius: $px-48;
    margin: 0;
}