*
{
    transition: all .2s;
}

@media only screen and (max-width: 1200px)
{
.MainGrid
{
        grid-template-columns: 1fr 3fr;
        grid-template-rows: 0.5fr 1fr 0.5fr;

}
.Logo
{
grid-area: 1 / 1 / 2 / 2; 
}
.Head
{
grid-area: 2/ 1 / 3 / 2;
flex-direction: column;
height: 300px;
}
.Head div{
    width: 90%;
    align-self: center;
}

.Main
{
grid-area: 1 / 2 / 3 / 3;
}
.PhotoGrid
{
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr;
}

.Foot
{
grid-area: 3 / 2 / 4 / 3;
}
.Foot img{
    height: 10%;
}

}


@media only screen and (max-width: 700px)
{
    .MainGrid
    {
        grid-template-columns: 1fr;
        grid-template-rows: 0.2fr 0.2fr 4fr 0.5fr;
    }

    .Logo
    {
    grid-area: 2 / 1 / 3 / 2; 
    background: none;
    height: 150px;
    line-height: 150px;
    }

    .Head
    {
    grid-area: 1/ 1 / 2 / 2;
    height: 100px;
    flex-direction: row;
    }

    .Head div{
    width: 90%;
    align-self: center;
    }
    
    .Main
    {
        grid-area: 3/ 1 / 4 / 2;
    }
    .PhotoGrid
{
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
}

    .Foot
    {
        grid-area: 4/ 1 / 5 / 2;
    }

}