free-courses.scss

.free-courses {
    padding: 15px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    .course-base-item{
        margin-top: 0;
        margin-bottom: 15px;
        img{
            border-radius: 3px;
        }
    }

    .top {
        position: absolute;
        top: 10px;
        left: 0;
    }

    .tag-soon {
        background: $red;
        color: $white;
    }
    .tag-playing {
        background: $active;
        color: $white;
    }

    .tag-category {
        background: #E0B97B;
        color: $white;
    }

    .course-item {
        margin-top: 0;
        margin-bottom: 16px;

        .course-title {
            margin-top: 0;
            line-height: 34px;
            width: 100%;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }

        .bottom {
            display: flex;
            justify-content: space-between;
        }
    }

    .live {
        .bottom {
            display: flex;
            justify-content: flex-start;
            color: $active;
        }
    }

    .animation-box {
        width: 14px;
        height: 12px;
        display: flex;
        justify-content: space-between;
        margin-right: 5px;

        .column {
            width: 2px;
            height: 12px;
            transform-origin: bottom center;
            animation: scaleY 1.1s ease-out infinite;
            background-color: $bg_active;
            @for $i from 1 to 4 {
                &-#{$i} {
                    animation-delay: $i * 0.2s;
                }
            }
        }
    }
}

@keyframes scaleY {
    from {
        transform: scaleY(0);
    }
    50% {
        transform: scaleY(1);
    }
    to {
        transform: scaleY(0);
    }
}