#home {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    color: var(--text-color-home);
    font-family: var(--font-family);
    height: 100vh;
    width: 100%;
    margin: auto;
    background-image: url(../assets/img/bg-desktop/bg-pc-2.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;

    /* Se oculta la seccion de portafolio version mobile */
    .portafolio-mobile {
        display: none;
    }
   
    /* Nombre del fotografo */
    .presentation {
        height: 80%;
        margin: 4rem;
        padding: 4rem;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: flex-start;

        .name {
            h1 {
                font-size: var(--font-size-first);
            }

            p {
                font-size: var(--font-size-second);
            }

        }

        .cta-box {

            #cta {
                padding: 1rem;
                background-color: var(--clr-20);
                border-radius: var(--border-radius);
                font-size: var(--font-size-second);
                color: var(--clr-90);
                cursor: pointer;
                transition: all .2s;
            }

            #cta:hover {
                background-color: var(--clr-50);
            }
        }
    }
}

@media (max-width: 768px) {
    #home {
        position: relative;
        align-items: center;
        justify-content: center;
        height: 100dvh;
        width: 100%;
        background: none;
        overflow: hidden;

        /* imgen de home */
        .portada-home {
            height: 100%;
            background-image: url(../assets/img/bg-mobile/bg-mo-1.webp);
            background-position: center;
            background-size: cover;
            background-repeat: no-repeat;
            transform: scale(1.5);
            transition: transform 1.5s ease-in-out;

            /* cristal oscuro */
            .portafolio-mobile {
                width: 100%;
                height: 100%;
                display: flex;
                justify-content: center;
                align-items: center;
                background-color: rgba(0, 0, 0, 0);
                transition: background-color 1.5s ease-in-out;


                /* grilla de fotos de home */
                .photos {
                    display: grid;
                    grid-template-areas:
                        'name name'
                        'small-1 small-2'
                        'large-1 large-1'
                    ;
                    gap: 1rem;
                    margin-top: 3.5rem;
                    opacity: 0;
                    transform: scale(0.5);
                    transition: all 1.5s ease-in-out;

                    /* grilla 1 */
                    .name {
                        grid-area: name;
                        text-align: center;
                    }
                    
                    /* grilla 2 */
                    figure:nth-child(2) {
                        grid-area: small-1;
                    }
                    
                    /* grilla 3 */
                    figure:nth-child(3) {
                        grid-area: small-2;
                    }
                    
                    /* grilla 4 */
                    figure:nth-child(4) {
                        grid-area: large-1;
                    }

                    /* boton svg para cada grilla */
                    figure {
                        position: relative;
                        
                        img {
                            flex: 1;
                            object-fit: cover;
                            width: 100%;
                        }
                        
                        figcaption {
                            position: absolute;
                            bottom: 2rem;
                            right: 1rem;
                            border: solid 1px var(--clr-30);
                            border-radius: 50%;
                            transform: rotateZ(45deg);
                            
                            
                            a {
                                display: flex;
                                align-items: center;
                                justify-content: center;
                                width: 2rem;
                                height: 2rem;

                                svg {
                                    fill: var(--clr-30);
                                }
                            }
                        }
                    }
                }
            }
        }

        .presentation {
            display: none;
        }
    }

    .container-all {

        #portafolio {
            display: none;
        }

        #message-section {
            display: none;
        }
    }
}