@import "./variables.css";

body
{
    background: url("../assets/images/RedBlueMesh_Unsplash.jpg") lightgray 50% / cover no-repeat;
    background-blend-mode: overlay, normal;
}

.project
{
    .projectPic
    {
        height:     auto;
        max-height: 20em;
    }
}

.project1
{
    img
    {
        align-self:     flex-start;
        max-width:      300px;
        border-radius:  var(--radius-m);
    }
}

.project2
{
    .projectPic
    {
        align-self:            flex-start;
        margin-bottom:         var(--space-xl);
    }

    img
    {
        align-self:         flex-end;
        max-width:          300px;
        border-radius:      var(--radius-m);
    }
}

.project3
{
    .projectPic
    {
        margin-top:         var(--space-xl);
    }

    img
    {
        align-self:     flex-start;
        max-width:      300px;
        border-radius:  var(--radius-m);
    }
}

.project4
{
    .projectPic
    {
        flex-direction: column;
        margin-block:   var(--space-xl);
        align-self:     center;
        overflow:       hidden;
        border-radius:  var(--radius-m);
        height:         stretch;
    }

    img
    {   
        object-fit:     cover;
        max-width:      500px;
        height:         100%;
    }
}

@media screen and (max-width: 700px)
{
    .project
    {
        flex-direction:     column-reverse;
        justify-content:    center;
        align-items:        center;
        gap:                0;
        
        .projectPic
        {
            align-self: center;
            margin:     0;
        }
        
        .description
        {
            max-width: 100%;
        }
    }

    .project1
    {
        flex-direction: column;

        .projectPic
        {
            border-radius: var(--radius-m);
            border-bottom: 5px solid var(--grey-9);
        }
    }

    .project4
    {
        padding-block: var(--space-xl);

        .projectPic
        {
            margin-block: 0;
        }
    }
}