/* @media screen and (max-width:1920px) {} */

@media screen and (max-width:1440px) {
    main {
        grid-template-areas:
            "intro intro intro"
            ". . .";
    }

    .intro {
        display:grid;
        grid-template-areas:
            "leya desc";
        grid-template-columns:1fr;
        grid-template-rows:auto;
        grid-row-gap:32px;
        grid-column-gap:64px;
        min-height:240px;
    }

    .intro > div {
        grid-area:leya;
    }

    .intro > p {
        grid-area:desc;
        top:0;
        padding-top: 0;
        width:90%;
        padding-left: 2%;
        padding-right: 8%;
        margin-bottom: 8%;
        max-width:600px;
    }

    .tray {
        grid-column:span 3;
    }
}


@media screen and (max-width:1280px) {
    main {
        grid-template-areas:
            "intro intro intro"
            "project project project"
            "project project project"
            "project project project"
            "project project project"
            "project project project"
            "project project project";
        grid-template-rows:auto;
        grid-template-columns:.75fr 1fr 1fr;
    }

    .tray, .acct, .watch, .pttrns, .content, .audio {
        grid-area:project;
        grid-column:span 3;
        grid-row:span 2;
    }

    /* .watch {
        background-position:bottom;
    } */

} 

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

    main {
        grid-template-rows:auto;
    }

    .tray, .acct, .watch, .pttrns, .content, .audio {
        grid-area:project;
        grid-column:span 3;
        grid-row:span 1;
    }

    .intro {
        display:grid;
        grid-template-areas:
            "leya"
            "desc";
        grid-template-columns:auto;
        grid-template-rows:auto;
    }

    .intro > p {
        grid-area:desc;
        margin-top: 0;
    }

    .intro > div {
        grid-area:leya;
        margin-bottom: 0;
    }

    .tray {
        background-image:linear-gradient(rgba(0,0,0,.6), #000), url(_images/tray-preview.png);
        background-repeat:no-repeat;
        background-size:cover;
        background-position:center;
    }

    .pttrns {
        background-image:linear-gradient(rgba(0,0,0,.6), #000), url(_images/amhaus-home.png);
        background-repeat:no-repeat;
        background-size:cover;
        background-position:top;
    }
    .content {
        background-image:linear-gradient(rgba(0,0,0,.6), #000), url(_images/content-search.png);
        background-repeat:no-repeat;
        background-size:cover;
        background-position:bottom;
      }
      
      .watch {
        background-color:linear-gradient(lightgreen, lightgreen);
        background-image:linear-gradient(rgba(0,0,0,.6), #000), url(_images/icon-gon-shoe.svg);
        background-size:cover;
        background-position:center;
      }
      
      .acct {
        background-image:linear-gradient(rgba(0,0,0,.6), #000), url(_images/account-menu.svg);
        background-repeat:no-repeat;
        background-size:cover;
        background-position:right;
      }
      
      .audio {
        background-image:linear-gradient(rgba(0,0,0,.6), #000), url(_images/audio-libraries.png);
        background-repeat:no-repeat;
        background-size:cover;
        background-position:center;
      }
    

    .tray:hover {
        background-image:linear-gradient(rgba(0,0,0,.6), #000), url(_images/tray-preview.png);
        background-repeat:no-repeat;
        background-size:cover;
        background-position:center;
    }
    
    .pttrns:hover {
        background-image:linear-gradient(rgba(0,0,0,.6), #000), url(_images/amhaus-home.png);
    }
    
    .content:hover {
        background-image:linear-gradient(rgba(0,0,0,.6), #000), url(_images/content-search.png);
    }
    
    .watch:hover {
        background-color:linear-gradient(lightgreen, lightgreen);
        background-image:linear-gradient(rgba(0,0,0,.6), #000), url(_images/icon-gon-shoe.svg);
    }
    
    .acct:hover {
        background-image:linear-gradient(rgba(0,0,0,.6), #000), url(_images/account-menu.svg);
    }
    
    .audio:hover {
        background-image:linear-gradient(rgba(0,0,0,.6), #000), url(_images/audio-libraries.png);
    }

    .card > h3 {
        opacity:1;
    }
    
    
    .card > .view-project {
        opacity:1;
    }
    
    footer {
        padding-top: 4%;
        padding-bottom: 8%;
    }
}