@import '../../icons/icons';

.reviews {
    width: 100%;
    display: flex;
    flex-wrap: wrap;

    .review {
        flex: 0 0 33.3%;
    }

    &--list {
        display: block;

        .review {
            padding-left: map-get($spacers, 5);

            &::after {

            }
            &::before {

            }


        }
    }
}

.review {
    position: relative;
    padding-left: map-get($spacers, 5);
    margin-bottom: map-get($spacers, 4);

    @include icon(star, 'after');

    &::after,
    &::before {
        position: absolute;
    }

    &::after {
        top: 1.1rem;
        left: 1.1rem;
        transform: translate(-50%, -50%);
    }

    &::before {
        top: 0;
        left: 0;
        content: ' ';
        width: 2.2rem;
        height: 2.2rem;
        border-radius: 50%;
        // transform: translateY(-50%);
        background-color: rgba($primary, .3);
    }

    &:nth-child(even) {
        &::before {
            background-color: rgba($secondary, .3);
        }
    }

    &__content * {
        margin-bottom: 0;
    }

    &__footer {
        font-style: italic;
    }
}

@include media-breakpoint-down(lg) {
    .reviews .review {
        flex: 0 0 50%;
    }
}

@include media-breakpoint-down(md) {
    .reviews .review {
        flex: 0 0 100%;
    }
}