.main{
    .main-section-card{
        .card-article{
            display: flex;
            align-items: center;
            height: 600px;
            margin-bottom: 20px;

            .article-left{
                width: 30%;
                height: 100%;
                border-radius: var(--value12Px);
                box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
                padding: var(--value12Px);

                .left-image{
                    width: 100%;
                    margin-left: 0;

                    .image{
                        width: 100%;
                        border-radius: var(--value12Px);
                    }
                }

                .left-title .title{
                    text-transform: uppercase;
                    line-height: 25px;
                }

                .left-text{
                    .text-list{
                        list-style: none;
                        padding-left: 0;
                        display: flex;
                        flex-direction: column;
                        gap: 12px;

                        .list-item .item-paragraph{
                            font-size: .9rem;
                            mark{
                                background-color: var(--colorFirst);
                            }
                        }

                        .item{
                            mark{
                                background-color: var(--colorFirst);
                            }
                        }
                    }

                    .text-paragraph{
                        font-size: .9rem;
                    }

                }

            }


            .article-right{
                width: 70%;
                height: 95%;
                box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
                border-top-right-radius: var(--value12Px);
                border-bottom-right-radius: var(--value12Px);
                padding:20px;

                .right-iframe,
                .right-videos{

                    .iframe-title,
                    .videos-title{
                        margin-bottom: var(--value12Px);

                        mark{
                            background-color: var(--colorFirst);
                        }
                    }

                    .inframe-content,
                    .videos-content{
                        display: flex;
                        justify-content: space-between;
                        margin-bottom: var(--value12Px);
                        
                        .content-iframe,
                        .content-video{
                            width: calc((100% / 2) - 20px);
                            border-radius: var(--value12Px);
                            
                        }

                        .content-iframe{
                            height: 200px;
                        }
                    }
                }

                .article-date{

                    .date-paragraph mark{
                        background-color: var(--colorFirst);
                        padding: 0 4px;
                    }
                }
            }
        }

        #boceto-diseno,
        #importancia-programacion-web{
            .article-right{
                order: -1;
            }
        }

        #boceto-diseno .article-right,
        #importancia-programacion-web .article-right{
            border-radius: 0;
            border-bottom-left-radius: var(--value12Px);
            border-top-left-radius: var(--value12Px);
        }

    }
}