.recommend {
    background-color: $micSoftOrange;
    & * {
        font-size: 14px;
    }
    &__list{
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }
    &__component {
        background-color: white;
        display: block;
        width: 32%;
        margin: 0 0 30px 0;
        & img {
            width: 100%;
        }
        @include sp {
            width: 100%;
        }
    }
    &__info {
        padding: 15px;
    }
    &__top{
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    &__tag {
        font-size: 10px;
        background-color: $micPurple;
        color: white;
        padding: 5px 10px;
    }
    &__name {
        margin: 20px 0;
    }
    &__detail {
        margin: 5px 0;
        display: flex;
        & dd {
            margin: 0
        }
        
    }
    &__view {
        & i { 
            margin: 0 0 0 10px ;
        }
        text-align: right;
    }
}