.project-description-wrap{
    background-color: var(--tertiary-color3);
    padding: 3em 3em 4.2em 3em;
    height: auto;
}
.project-description-text p{
    margin-top: 1.3em;
    text-align: left;
    max-width: 1150px;

}
.description{
    font-weight: 100;
    margin-bottom: .7em;
    
}
.description bold{
    font-weight: 600;
    
}
.projects-wrapper a:hover{
    background-color: var(--main-color);
}

.project-photos-wrap{
    max-width: 1400px;
    margin: 2em auto;
}
.wide-project-photo{
    width: 100%;
    margin: 0 auto 1.5em auto;
    height: auto;
}
.wide-project-photo img{
    width: 100%;
    height: auto;
    margin: 0 auto;
}
.project-photos-wrap > .margin img{
    padding: 0 .3em;
}


.projects-grid-masonry{
    max-width: 1400px;
    height: auto;
    margin: 1.5em auto;
   gap: 1.5em;
   display: grid;
   justify-content: center;
   grid-template-columns: auto auto;
}
.projects-grid-masonry img{
    height: auto;
    width: 38.5vw;
    break-inside: avoid;
}

.outline{
    border: .8pt rgb(198, 198, 198) solid;
}

.shaddow{
    -webkit-box-shadow: 6px 8px 20px -8px rgba(176,176,176,0.45);
    -moz-box-shadow: 6px 8px 20px -8px rgba(176,176,176,0.45);
    box-shadow: 6px 8px 20px -8px rgba(176,176,176,0.45);
}

.buttons-wrap{
    margin: 1.7em auto;
    max-width: 1150px;

}

.buttons-wrap > a{
    cursor: url("./images/cursor-hover.svg"), auto;
}
a.project-preview-button{
    margin-right: 2em;
    color: var(--tertiary-color);
    margin-bottom: 1em;
}
.project-preview-button{
    letter-spacing: .6px;
    cursor: url("./images/cursor-hover.svg"), auto;
    padding: .4em .8em;
    text-transform: uppercase;
    float: left;
    background-color: var(--main-color2);

}
.project-preview-button:hover{
    color: var(--main-color);
    background-color: var(--secondary-color);
}

.projects-twocollumn-mobile{
    max-width: 1400px;
    height: auto;
    margin: 1.5em auto;
   gap: 1.5em;
   display: grid;
   justify-content: center;
   grid-template-columns: auto auto;
}
.projects-twocollumn-mobile img{
    height: auto;
    width: 38vw;
    break-inside: avoid;

}
.projects-grid-three-collumns{
    max-width: 1400px;
    height: auto;
    margin: 1.5em auto;
   gap: 1.5em;
   display: grid;
   justify-content: center;
   grid-template-columns: auto auto auto;

}
.projects-grid-three-collumns img{
    height: 5.6vw;
    width: auto;
    break-inside: avoid;
}
.wide img{
    height: 25em;
    min-height: 20em;
}

@media (max-width: 1248px){
    .wide{
        max-width: 900px;
        grid-template-columns: auto auto;
    }

}
@media (max-width: 900px){
    .project-description-text p{
        font-size: 1.1em;
    
    }
    a.project-preview-button{
        font-size: .8em;
        margin-right: .6em;
    }
    .project-description-wrap{
        background-color: var(--tertiary-color3);
        padding: 3em 2em;
        height: auto;
    }
    .projects-grid-three-collumns{
       
        justify-content: center;
        grid-template-columns: auto;
        align-items: center;
        
     
    }
    .projects-grid-three-collumns img{
         height: 16vw;
         width: auto;
         break-inside: avoid;
    }
   
    .wide img{
        height: 20em;
    }
    
}


@media (max-width: 750px){
    .project-description-wrap{
       
        padding: 3em 2em 4em 2em;
        
    }
    .projects-grid-masonry{
        grid-template-columns: auto;
    }
    
    .projects-grid-masonry img{
        width: 97vw;
    }
    .projects-twocollumn-mobile{
        gap: .7em;
        height: auto;
        margin: .5em auto;
       
    }
    .projects-twocollumn-mobile img{
        height: auto;
        width: 46vw;
        break-inside: avoid;
    
    }
    
}