.design {
    margin: 0 3% !important;
    section {
        #section1 {           
            
            
            .plans {
                width: 1500px;
                gap: 3rem !important;
                
                
                :nth-child(1) {
                    width: 100%;
                    max-width: 1180px !important;         // Ocupa todo el ancho del contenedor
                    height: auto;        // Ajusta la altura automáticamente manteniendo la proporción
                }
                :nth-child(2) {
                    width: 100%;
                    max-width: 220px !important;
                    height: auto;
                    
                }
        
                :nth-child(3) {
                    margin-top: 4rem;
                    width: 100%;
                    max-width: 1180px !important;         // Ocupa todo el ancho del contenedor
                    height: auto;        // Ajusta la altura automáticamente manteniendo la proporción
                }
        
                :nth-child(4) {
                    margin-top: 4.5rem;
                    margin-left: 2rem;
                    width: 12% !important;
                    object-fit: cover;
                    height: 400px;
                }
        
            }
        }
        
    } 
}

@media screen and (max-width: 1890px) {
    .design {
        section {
            #section1 {
                .plans {
                    width: 100%;
                    justify-content: center !important;

                    :nth-child(1) {
                        width: 80%;       
                    }
                    :nth-child(2) {
                        width: 15%;       
                    }
                    :nth-child(3) {
                        width: 80%;       
                    }  
                }   
                div {
                    .text-container {
                        .text {
                            -webkit-line-clamp: 30;
                            line-clamp: 30;
                        }
                        .toggle-btn {
                            display: none;
                        }
                    }
                }              
            }
        }
    }
}

@media screen and (max-width: 1035px) {
    .design {
        section {
            #section1 {
                .plans {

                    > :nth-child(1) {
                        width: 98%;       
                    }
                    > :nth-child(2) {
                        width: 19%;
                    }
                    > :nth-child(3) {
                        width: 98%;  
                        margin-top: 0;   
                        margin-bottom: 3rem; 
                    }
                }
            }
        }
    }
}

@media screen and (max-width: 860px) {
    .design {
        section {
            #section1 {
                .plans {
                    > :nth-child(2) {
                        width: 21%;
                    }
                }
            }
        }
    }
}

@media screen and (max-width: 745px) {
    .design {
        section {
            #section1 {
                div {
                    .text-container {
                        .text {
                            -webkit-line-clamp: 14;
                            line-clamp: 14;
            
                            &.expanded {
                                -webkit-line-clamp: unset;
                                line-clamp: unset;
                                overflow: visible;
                            }
                        }
                        .toggle-btn {
                            display: inline-block;
                            bottom: 0;
                        }
                    }
                }
            }
        }
    }
}

@media screen and (max-width: 600px) {
    .design {
        section {
            #section1 {
                .plans {
                    > :nth-child(2) {
                        width: 24%;
                    }
                    > :nth-child(4) {
                        width: 20% !important;
                    }
                }
            }
        }
    }
}