@import url('https://fonts.googleapis.com/css2?family=Playfair+Display&family=Prata&display=swap');

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

body{
    font-family: 'Prata', serif;
    background: rgb(237, 232, 226);
    display: flex;
    height: 100vh;
}

.grid{
    background: #fff;
    height: 98vh;
    width: 98%;
    max-width: 1500px;
    margin: auto;
    box-shadow: 0 0 30px -10px rgba(138,135,135,0.5);
    border-radius: 15px;
    display: grid;
    grid-template-columns: repeat(8,1fr);
    grid-template-rows: repeat(6,1fr);
    overflow: hidden; /* para que todo lo que salga del elemento grid, desaparezca */
}

.grid::before{
    content: "";
    grid-column: 1/-1;
    grid-row: 1 /-1;
    /* background-image: url(imagen1.jpg); */
    background: linear-gradient(to right, rgba(55, 100, 123, 0.5), rgba(55, 100, 123, 0.5)), url(renta_de_maquinaria.jpg);
    background-size: cover;
    background-position: center top;
    clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
    animation: show 2s 3.5s cubic-bezier(1, 0.08, 0.76, 0.94) forwards;
}

.grid__texts{
    grid-row: 2/-2;
    grid-column: 2/8;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: left;    
    clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0 100%);
    transform: translate(50%);
    animation: show 2s forwards, move 1s 2s forwards;
}


.grid_title{
    font-size: 3rem;
    
}


.grid_title--transform{
    font-family: 'Playfair Display', serif;
    font-size: 2.5rem;
    animation: move 1s 2s forwards;
}

.grid_title--transform2{
    font-family: 'Playfair Display', serif;
    font-size: 1.5rem;
    animation: move 1s 2s forwards;
}

@keyframes show {
    to{
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
 
    }
    
}

@keyframes move {
    to{
        transform: translate(0%);
        color: rgb(255, 255, 255);
    }    
}

@media screen and (max-width:500px){

    .grid_title{     
           font-size: 2rem;   
           margin: 10px auto;
        }
    .grid_title--transform{       
         font-size: 1.5rem;   
         margin: 10px auto;
        }
    .grid_title--transform2{       
         font-size: 1.0rem;    
        margin: 10px auto;
        }
    



}