.feedbackBox {
    border-radius: 10px;
    background: #FFF;
    box-shadow: 0px 4px 6px -2px rgba(27, 27, 28, 0.04), 0px 12px 16px -4px rgba(27, 27, 28, 0.07);
    width: calc(100% - 3.2rem);
    margin: 0 auto;
    padding: 1.6rem;
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto;
    max-width:calc(var(--main-container-max) - 4.8rem) !important;

    @include min(tablet) {
        display: grid;
        grid-template-columns: 9.6rem 2.1fr 1.2fr 0.5fr;
        grid-template-rows: repeat(2, auto);
        align-items: center;
    }

    >img {
        display: none;

        @include min(tablet) {
            display: block;
            grid-column: 1;
            grid-row: 1/3;
            width: 8rem;
            height: 8rem;
            border-radius: .8rem;
            margin-right: 1.6rem;
        }
    }
}

.title {
    color: #1B1B1C;
    font-size: 1.8rem;
    font-style: normal;
    font-weight: 600;
    line-height: 2.8rem;
    margin-right: .8rem;

    @include min(tablet) {
        grid-column: 2/3;
        grid-row: 1/2;
        font-size: 1.8rem;
        font-style: normal;
        font-weight: 600;
        line-height: 2.8rem;
        margin-top: .5rem
    }
}

.formBox {
    @include flex-direction(row);
    gap: .8rem;

    @include min(tablet) {
        grid-row: 1/3;
    }
}

.button {
    border-radius: 100px;
    background: #ECECEC;
    min-width: 5.6rem;
    height: 5.6rem;
    cursor: pointer;
    @include flex-align(center, center);
    @include min(tablet){
        width: 6.4rem;
        height: 6.4rem;
    }

    >svg {
        width: 2.8rem;
        height: 2.8rem;
    }
}

.details {
    border-radius: 4px;
    background: var(--feedback-color-details, #D3DB34);
    grid-column: 1/3;
    color: #262629;
    font-size: 1.4rem;
    font-style: normal;
    font-weight: 500;
    line-height: 2.2rem;
    height: 3rem;
    margin-top: 1.6rem;
    @include flex-align(center, center);

    @include min(tablet) {
        @include flex-align(center, flex-start);
        grid-column: 2/3;
        grid-row: 2/3;
        background-color: transparent;
        margin-top: 0;
        font-size: 1.4rem;
        font-style: normal;
        font-weight: 400;
        line-height: 2.2rem;
    }
}

.like,
.dislike {
    background: var(--feedback-button, #136A43);

    >svg {
        fill: white;
    }
}

.voted {
    grid-column: 1/3;
    margin-top: 2.4rem;
    @include min(tablet){
        grid-column: 2/3;
        grid-row: 1/3;
        margin-top: 0;
    }

    >span {
        color: #1C1A28;
        font-size: 1.8rem;
        font-style: normal;
        font-weight: 600;
        line-height: 2.8rem;
    }

    >p {
        color: #515156;
        font-size: 1.4rem;
        font-style: normal;
        font-weight: 400;
        line-height: 2.2rem;
        margin-top: 0.8rem;
        @include min(tablet){
            margin-top: 0.4rem;
        }

        >a {
            margin-left: 0.5rem;
            text-decoration: underline;
        }
    }
}

.userCount {
    @include flex-direction(column);
    color: #1B1B1C;
    font-size: 1.8rem;
    font-style: normal;
    font-weight: 600;
    line-height: 2.8rem;
    display: none;

    @include min(tablet) {
        display: flex;
        grid-column: 3;
        grid-row: 1/3;
        height: 100%;
        margin-left: 4.8rem;
        margin-right: 2.4rem;
        @include flex-align(start, center);
    }

    >span {
        color: #515156;
        font-size: 1.6rem;
        font-style: normal;
        font-weight: 400;
        line-height: 2.6rem;
        @include min(tablet){
            font-size: 1.4rem;
        }
    }
}

.showCounter {
    display: flex;
}