*{
    box-sizing: border-box;
    margin: 0px;
    padding: 0px;

}

.grid-principal{
    display: grid;
    grid-template-columns: 1fr;
    padding: 20px;
    grid-template-rows: 1fr 1fr;
    height: max-content;
    .grid-principal-top{
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: 0.3fr 1fr;
        gap: 10px;
        .container-content{
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            align-items: flex-start;
            padding: 20px;
            gap: 10px;
            position: relative;
            .title{
                font-family: "Poppins", sans-serif;
                font-size: 2em;
                font-weight: 600;
                text-align: start;
                font-style: normal;
            }
            .subtitle{
                font-family: "Poppins", sans-serif;
                text-align: start;
                font-size: 1.2rem;
                font-weight: 100;
                font-style: normal;
            }
            #boton{
                padding: 10px;
                width: 100px;
                text-align:center;
                text-decoration: none;
                background-color: black;
                border-radius: 15px;
                color: white;
                font-family: "Poppins", sans-serif;
                font-size: 15px;
                font-weight: 300;
                font-style: normal;
            }
            img{
                max-width: 50%;
                height: auto;
                margin-top: 20px;
                margin-right: 20px;
                align-self: flex-end;
            }

        }
        .container-two{
            display: flex;
            flex-direction: row;
            justify-content: center;
            .container-two-image1{
                width: 100%;
                height: 100%;
                display: flex;
                flex-direction: column;
                justify-content: space-around;
                align-items: center;
                #image1{
                    width: 30%;
                    height:70%;
                }
            }
            .container-two-image2{
                width: 100%;
                height: 100%;
                display: flex;
                flex-direction: column;
                justify-content: space-around;
                align-items: center;
                #image2{
                    width: 80%;
                    height:70%;
                }
            }
        }
    }
    .grid-principal-bottom{
        display: grid;
        grid-template-columns: repeat(2,1fr);
        grid-template-rows: 1fr auto;
        gap: 10px;
        height: max-content;
        .container-bottom-image3{
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            align-items: center;
            #image3{
                width: 100%;
                height:60%;
            }
        }
        .container-bottom-image4{
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            align-items: center;
            #image4{
                width: 100%;
                height:70%;
            }
            #image5{
                width: 100%;
                height:50%;
            }
        }
        .container-content2{
            grid-column: span 2;
            grid-row: 2 / 3;
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            justify-content: center;
            #image6{
                width: 100%;
                height:100%;
            }
            .grid-principal-bottom-text{
                height: 100%;
                font-family: "Poppins", sans-serif;
                text-align: start;
                font-size: 1rem;
                font-weight: 100;
                font-style: normal;
            }
        }
    }

}

@media (min-width: 630px){
    .grid-principal{
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1fr;
        padding: 10px;
        .grid-principal-top{
            display: grid;
            grid-template-columns: 1fr;
            grid-template-rows: 0.3fr 0.5fr ;
            gap: 10px;
            .container-content{
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: flex-start;
                padding: 20px;
                gap: 10px;
                position: relative;
                .title{
                    font-family: "Poppins", sans-serif;
                    font-size: 3em;
                    width: 50%;
                    font-weight: 600;
                    text-align: start;
                    font-style: normal;
                }
                .subtitle{
                    font-family: "Poppins", sans-serif;
                    text-align: start;
                    font-size: 1.2rem;
                    font-weight: 100;
                    font-style: normal;
                    width: 100%;
                }
                #boton{
                    padding: 10px;
                    width: 100px;
                    text-align:center;
                    text-decoration: none;
                    background-color: black;
                    border-radius: 15px;
                    color: white;
                    font-family: "Poppins", sans-serif;
                    font-size: 15px;
                    font-weight: 300;
                    font-style: normal;
                }
                img{
                    position: absolute;
                    width: 60%;
                    height: 30%;
                    transform: translate(60%);
                    top: 10px;
                }
    
            }
            .container-two{
                display: flex;
                flex-direction: row;
                justify-content: center;
                height: fit-content;
                align-items: flex-end;
                .container-two-image1{
                    width: 100%;
                    height: 100%;
                    display: flex;
                    flex-direction: column;
                    justify-content: space-around;
                    align-items: center;
                    #image1{
                        width: 40%;
                        height:70%;
                    }
                }
                .container-two-image2{
                    width: 100%;
                    height: 100%;
                    display: flex;
                    flex-direction: column;
                    justify-content: space-around;
                    align-items: center;
                    #image2{
                        width: 80%;
                        height:70%;
                    }
                }
            }
        }
        .grid-principal-bottom{
            display: grid;
            grid-template-columns: repeat(2,1fr);
            grid-template-rows: 1fr 0.3fr;
            gap: 10px;
            height: max-content;
            .container-bottom-image3{
                display: flex;
                flex-direction: column;
                justify-content: flex-end;
                align-items: center;
                #image3{
                    width: 80%;
                    height:60%;
                }
            }
            .container-bottom-image4{
                display: flex;
                flex-direction: column;
                justify-content: flex-start;
                align-items: center;
                #image4{
                    width: 70%;
                    height:50%;
                }
                #image5{
                    width: 60%;
                    height:50%;
                }
            }
            .container-content2{
                grid-column: span 2;
                grid-row: 2 / 3;
                display: flex;
                flex-direction: row;
                flex-wrap: wrap;
                align-content: flex-start;
                align-items: center;
                #image6{
                    width: 100%;
                    height:100%;
                }
                .grid-principal-bottom-text{
                    height: 100%;
                    font-family: "Poppins", sans-serif;
                    text-align: start;
                    font-size: 1rem;
                    font-weight: 100;
                    font-style: normal;
                }
            }
        }
    
    }
}