main {
    background: linear-gradient(rgba(255,255,255,0.7), rgba(255,255,255,0.7)), url('../imgs/fondo.jpg');
    background-size: cover;
    background-position: 0px -960px;
    height: calc(100vh - 55px);
    min-height: calc(100vh - 55px);
    width: 100%;

    #proyectos {
        display: flex;
        flex-direction: column;
        height: 100%;
        overflow: scroll;

        .contenedor {
            display: flex;
            flex-direction: row;
            gap: 64px;
            justify-content: space-evenly;
            padding: 64px 64px 0px;

            .showcase {
                display: flex;
                flex-direction: column;
                height: 100%;
                max-width: 760px;
                min-width: 525px;
                min-height: 734px;
                width: 85%;

                .main-section {
                    align-items: center;
                    border: 2px solid #282a29;
                    border-radius: 24px;
                    display: flex;
                    flex-direction: column;
                    padding: 48px;
                    height: 85%;
                    gap: 32px;

                    img {
                        height: 100%;
                        max-height: 365px;
                        object-fit: cover;
                        width: 100%;
                    }

                    .body {
                        align-items: center;
                        display: flex;
                        flex-direction: column;
                        gap: 28px;
                        
                        .title {
                            font-size: 32px;
                            font-weight: 700;
                            letter-spacing: -2px;
                            text-transform: uppercase;
                        }
                    }
                }

                .footer {
                    display: flex;
                    flex-direction: row;
                    justify-content: center;

                    .know-more-btn {
                        align-items: center;
                        border: 2px solid #282a29;
                        color: #282a29;
                        display: none;
                        font-size: 14px;
                        font-weight: 700;
                        height: 36px;
                        justify-content: center;
                        letter-spacing: 2px;
                        padding: 0px 16px;
                        text-align: center;
                        text-decoration: none;
                        text-transform: uppercase;
                        width: 156px;
                    }
                }
            }
        }
    }
}

/* movil */
@media (width <= 1200px){
    main {
        background-position: 0;

        #proyectos {
            .contenedor {
                align-items: center;
                flex-direction: column;
                gap: 32px;
                padding: 48px;

                .showcase {
                    min-height: 500px;
                    min-width: 400px;

                    .main-section {
                        height: 100%;
                        padding: 48px;

                        img {
                            height: unset;
                        }
                        
                        .body {
                            .title {
                                text-align: center;
                            }
                        }
                    }

                    &:last-child {
                        margin-bottom: 76px;
                    }
                }
            }
        }
    }
}