section.courses_component {

    background-color: #f3f3f3;
    padding: 8rem 0;
    margin: 0 auto;
    width: 100%;

    
    .container {
        margin: 0 auto;
        max-width: 122rem;
        padding-top: 96px;
        padding-inline: 2rem;
        width: 100%;
        
        article {
            padding-bottom: 4rem;
            
            h2 {
                font-size: 3.2rem;
                font-family: "Montserrat", sans-serif;
                padding-bottom: 2rem;
                border-bottom: 1px solid #b8b8b8;
                margin-bottom: 4rem;
                font-weight: 800;
                line-height: 1.1em;
            }

            ul {
                display: flex;
                flex-wrap: wrap;
                flex-direction: row;

                li {
                    padding-bottom: 4rem;

                    a {
                        display: flex;
                        flex-direction: row;
                        justify-content: space-around;

                        div {
                            width: 60px;
                            height: 60px;
                            border-radius: 100%;
                            padding: 10px;
                            display: flex;
                            align-items: center;
                            justify-content: center;

                            img {
                                width: 32px;
                                height: auto;
                            }
                        }

                        article {
                            flex: 0 0 78%;
                            color: #4a5565;
                            font-size: 1.6rem;
                            padding-bottom: 0;

                            h3 {
                                font-size: 2.2rem;
                                font-family: "Montserrat", sans-serif;
                                font-weight: 800;
                                color: #000;
                                line-height: 1.1em;
                            }

                            p.subtitle {
                                color: #000;
                                line-height: 2.2rem;
                                font-size: 1.6rem;
                                font-weight: 600;

                                span {
                                    font-weight: 400;
                                }
                            }

                            p.description {
                                line-height: 2.2rem;
                                font-size: 1.6rem;
                            }

                            p.tag {
                                color: #000;
                                background-color: #f7f003;
                                font-weight: 700;
                                padding: 3px 6px;
                                font-size: 1.4rem;
                                display: inline-block;
                                margin-top: 8px;
                            }
                        }

                        &:hover {

                            div {
                                background-color: #5f7a95;
                            }
                            article {
                                h3 {
                                    color: #5f7a95;
                                }

                                p.subtitle,
                                p.description {
                                    color: #5f7a95;
                                }
                                
                            }
                        }
                    }
                }
            }
        }
    }

    .tag--recommended {
        background-color: #fcd34d;
        color: #92400e;
    }
    
    .tag--basic {
        background-color: #bfdbfe;
        color: #1e40af;
    }
    
    .tag--specialization {
        background-color: #a7f3d0;
        color: #065f46;
    }
    
    .tag--high_demand {
        background-color: #fecaca;
        color: #991b1b;
    }

    .violet {
        background-color: #766ede;
    }

    .purple {
        background-color: #9c3bc3;
    }

    .lightblue {
        background-color: #80ceed;
    }

    .red {
        background-color: #ed2b3d;
    }

    .jade {
        background-color: #7ee1b6;
    }

    .blue {
        background-color: #3758f3;
    }

    .green {
        background-color: #92db93;
    }
}

@media screen and (max-width: 768px) {
    section.courses_component {
        .container {
            article {
                ul {
                    li {
                        flex: 0 0 50%;
                        max-width: 50%;
                    }
                }
            }
        }
    }
}

@media screen and (min-width: 992px) {
    section.courses_component {
        .container {
            article {
                ul {
                    li {
                        flex: 0 0 33.3333333333%;
                        max-width: 33.3333333333%;
                    }
                }
            }
        }
    }
}

@media screen and (max-width: 767px) {
    section.courses_component {
        .container {
            article {
                ul {
                    li {
                        flex: 100%;
                        max-width: 100%;
                    }
                }
            }
        }
    }
}