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

    p {
        margin-bottom: 0;
    }
}

body {
    background-color: #FFFFFF;

    .equipos {
        padding: 60px 20px;

        .carousel.slide {
            margin-top: 20px;
            box-shadow: 0px 8px 30px rgba(46, 158, 114, 0.2);

            .carousel-item {
                img {
                    width: 100%;
                    height: 300px;
                    object-fit: cover;
                    border-radius: 15px;
                }
            }

            .carousel-caption {
                color: #2D2D2D;
                background: rgba(255, 255, 255, 0.75);
                padding: 8px 12px;
                margin-bottom: 20px;
                border-radius: 10px;
                bottom: 15px;

                h5 {
                    font-size: 16px;
                }

                p {
                    font-size: 14px;
                }
            }
        }

        #titulo {
            text-align: center;
            margin-bottom: 30px;
            font-size: 24px;
        }

        article {
            padding-left: 12px;

            h4 {
                font-size: 22px;
                margin-bottom: 8px;
            }

            p {
                line-height: 1.6;
                color: #2D2D2D;
                font-size: 16px;
                max-width: 500px;
            }
        }
    }

    #equipo1 {
        background: #E8F5EE;
        border-bottom: 2px solid rgba(46, 158, 114, 0.2);
    }

    #equipo2 {
        background: #FDECEA;
        border-bottom: 2px solid rgba(200, 48, 42, 0.2);
    }

    #equipo3 {
        background: #E8F5EE;
        border-bottom: 2px solid rgba(46, 158, 114, 0.2);
    }
}

@media (min-width: 768px) and (max-width: 1023px) {

    body {
        .equipos {
            display: grid;
            grid-template-columns: 1fr 1fr;
            grid-template-rows: auto 1fr;
            column-gap: 40px;
            row-gap: 20px;
            align-items: center;


            .carousel.slide {
                .carousel-item {
                    img {
                        height: 380px;
                    }
                }
            }

            .carousel-caption {
                h5 {
                    font-size: 18px;
                }

                p {
                    font-size: 15px;
                }
            }

            #titulo {
                grid-area: Titulo;
                font-size: 28px;
            }

            article {
                h4 {
                    font-size: 24px;
                }

                p {
                    font-size: 17px;
                }
            }
        }



        #equipo1 {
            grid-template-areas:
                "Titulo Titulo"
                "texto imagen";

            article {
                grid-area: texto;
            }

            .carousel {
                grid-area: imagen;
            }
        }

        #equipo2 {
            grid-template-areas: "texto imagen";

            article {
                grid-area: texto;
            }

            .carousel {
                grid-area: imagen;
            }
        }

        #equipo3 {
            grid-template-areas: "texto imagen";

            article {
                grid-area: texto;
            }

            .carousel {
                grid-area: imagen;
            }
        }

    }
}

@media (min-width: 1024px) {
    body {
        .equipos {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 40px;
            align-items: center;
            column-gap: 60px;
            row-gap: 20px;

            .carousel.slide {
                .carousel-item {
                    img {
                        height: 550px;
                    }
                }
            }

            .carousel-caption {
                h5 {
                    font-size: 20px;
                }

                p {
                    font-size: 16px;
                }
            }

            article {
                padding-right: 20px;

                h4 {
                    font-size: 26px;
                }

                p {
                    font-size: 18px;
                }
            }

            #titulo {
                grid-area: Titulo;
                font-size: 32px;
            }
        }

        #equipo1 {
            grid-template-areas:
                "Titulo Titulo"
                "texto imagen";


            article {
                grid-area: texto;
            }

            .carousel {
                grid-area: imagen;
            }
        }

        #equipo2 {
            grid-template-areas: "texto imagen";

            article {
                grid-area: texto;
            }

            .carousel {
                grid-area: imagen;
            }
        }

        #equipo3 {
            grid-template-areas: "texto imagen";

            article {
                grid-area: texto;
            }

            .carousel {
                grid-area: imagen;
            }
        }
    }
}