@font-face {
    font-family:louis-george-cafe Font;
    src:url("Louis.tff");
}
body {
    margin: 5%;
    background-color: rgb(100, 82, 59);
}
.container{
    display: grid;
    grid-template-columns: auto auto auto;
    grid-template-rows: auto auto auto auto;
    grid-gap: 10px
}

.container .block{
    padding:20px;
    color: grey;
    font-size: large;
    font-weight:bold;
    text-align: center;
}
.foto1{
    position: relative ;
    /* z-index: index 2; ; */
    z-index: 2;
    left: 2%;

}
.foto2{
    position: relative;
    /* z-index: index 1; ; */
    z-index: 1;

    }

.foto3{
    position: relative;
    /* z-index: index 2; ; */
    z-index: 3;
    right: 2%;

        }
        

.block.block1{
    background-color: rgb(223, 215, 205);
    align-content: center;
    width: 100%;

    /* grid-row:1;
    grid-column:1 /span 2; */
 }
.block.block2{
    background-color: rgb(223, 215, 205);

    font-family:louis-george-cafe Font;
    font-size: 60px;
    /* grid-row:2 ;
    grid-column:1  /span 2 ;  */
}
.block.block3{
    background-color: rgb(223, 215, 205);
    
    /* grid-row:3 ; 
    grid-column:1 ; */
}
.block.block4{
    background-color: rgb(254, 248, 240);
    box-shadow:5px 10px rgb(109, 109, 113);
    font-family:louis-george-cafe Font;
    /* grid-row:3 ;
    grid-column:2  ; */
}

.block.block5{
    background-color: rgb(223, 215, 205);
    /* grid-row:4 ;
    grid-column: 1; */
}
.block.block6{
    background-color: rgb(223, 215, 205);
    border-color: grey;
    font-family:louis-george-cafe Font;
    margin-top: 25px;
    
    /* grid-row:4 ;
    grid-column: 2; */
}
.block.block7{
    background-color: rgb(28,32,35);
    font-family:louis-george-cafe Font;
    font-size: 15px;
    color: rgb(223, 215, 205)

    /* grid-row:5 ;
    grid-column: 1 / span 2; */
}

@media screen and (min-width: 320px) {
    main{ 
        grid-template-columns: auto;
    }

    .block.block1 {
        grid-row:1;
    }

    .block.block2 {
        grid-row:2;
    }

    .block.block3 {
        grid-row:3;
    }

    .block.block4 {
        grid-row:5;
    }
    .block.block5 {
        grid-row:4;
    }
    .block.block6 {
        grid-row:6;
    }
    .block.block7 {
        grid-row:7;
    }

}
@media screen and (min-width: 768px) {
    main{ 
        grid-template-columns: auto;
    }

    .block.block1 {
        grid-row:1;
    }

    .block.block2 {
        grid-row:2;
    }

    .block.block3 {
        grid-row:3;
    }

    .block.block4 {
        grid-row:5;
    }
    .block.block5 {
        grid-row:4;
    }
    .block.block6 {
        grid-row:6;
    }
    .block.block7 {
        grid-row:7;
    }
}

@media screen and (min-width: 992px) {
    main{ 
        grid-template-columns: auto;
    }
.block.block1{
    grid-row:1;
    grid-column:1 /span 2;
}

.block.block2{
    grid-row:2 ;
    grid-column:1  /span 2 ; 
}

.block.block3{
    grid-row:3 ; 
    grid-column:1 ;
}

.block.block4{
    grid-row:3 ;
    grid-column:2  ;
}

.block.block5{
    grid-row:4 ;
    grid-column: 1;
}

.block.block6{
    grid-row:4 ;
    grid-column: 2;
}

.block.block7{
    grid-row:5 ;
    grid-column: 1 / span 2;
}
}