main{
    display: none;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    padding: 0;

}

.imageContainer{
    height: calc((100vw - 60px) / 5);
    border-right: 1px dashed var(--color2);
    border-bottom: 1px dashed var(--color2);
    display: grid;
    grid-template-columns: 30% 70%;
    transition: .8s all ease;


}

.spaceContainer{
    height: calc((100vw - 60px) / 5);
    border-right: 1px dashed var(--color2);
    border-bottom: 1px dashed var(--color2);
    display: grid;
    grid-template-columns: 30% 70%;


}

.pointer{
    cursor: pointer;
}

.dreamImage{
    width: 100%;
    height: auto;
    object-fit: contain;
   
}

.imageContainer:hover{
    width: 100%;
    grid-template-columns: 100% 0%;
}


.imageContainer:hover .description{
    opacity: 0%;
}

.image{
    display: flex;
    align-items: flex-end;
}
.description{
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    margin-left: 10px;
    transition: .2s all ease;
    -webkit-transition: all .2s ease;
    -moz-transition: all .2s ease;
    -o-transition: all .2s ease;
    flex-direction: column;
}

.description h1{
    position: relative;
    margin-top: 5px;
    bottom: 0;
}


.number{
    text-decoration: none;
    min-height: 22px;
    min-width: 22px;
}

.open{
    display: grid;
}


@media(max-width: 1200px){

    main{
        grid-template-columns: 1fr 1fr 1fr ;
        padding: 0;
    
    }

    .imageContainer{
        height: calc((100vw - 60px) / 3);
        
    }

    .spaceContainer{
        height: calc((100vw - 60px) / 3);
    
    
    }
    
}