*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
.project-frame:first-child{
    margin-top:30vh;
}

.project-frame{
    border-top: .5px solid black;
    filter: drop-shadow(5px black);
    display: grid;
    grid-template-columns: 2fr 1fr;    
    gap: 0; /* No gap between grid items */
    padding-bottom: 20px;  
}
.project-frame{
    cursor:pointer;
    
}

.main-image{
    object-fit: cover;
    max-width: 100%;

}

.project-name{
    text-align: left;
    margin-top:10px;
    margin-left: 25px;
}

@media (max-width: 800px) {

.project-frame:first-child{
    margin-top:10vh;
}

    .project-frame {
        grid-template-columns: 1fr;
        width: 100%;
        border: none;
        
    }
    .project-name{
        padding-top: 10px;
        padding-bottom: 10px;
        margin: 0;
        border-bottom: .5px solid black;
        text-align: center;
        margin-left: 0;
    }
    .project-frame>*{
        grid-column-start: 0;
    grid-column-end: 1;
    }
    .description{
        border-top: 1px solid black;
        padding-top: 5px;
    }
    .project{
        width: 100%;
    }
}


/* 
.card {
    width: 100%;
    height: auto;
  } */
  
.card img {
width: 100%; 
height: 100%; 
object-fit: contain; 
display: block; 
margin: 0;
padding: 0;
}
  
.project-container{
    cursor: pointer;
}

.title{
    height: 20px;
    line-height: 20px;
    display: flex;
    justify-content: left;
    padding-left: 10px;
    font-size: 15px;
  
}
.title p{
    text-transform: uppercase;
}

@media (max-width: 800px) {
    #image-grid {
        grid-template-columns: repeat(1, 1fr);
    }
    .hide{
        display: none;
    }
}

/************* TYPOTES ***************/
/* 
#card-3{
height: 100%;
width: auto;
}
#front-img{
    width: 100%;
    height: auto;
    
    background-color: #f8e4707e;
    text-align: center;
    display: flex;
}
#front-img>video{
    width: 60%;
    margin: auto;
    vertical-align: middle;
    border-radius: 20px;
    border: 10px solid black;
    filter: drop-shadow(6px 10px 3px #00000083);
    min-width: 300px;
}

.project-img>img{
    width: 100%;
    border-radius: 15px;
}
 */
/* 
#front-img {
    min-height: 100%;
    width: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #f8e4707e;
}
#front-img > img {
    width: 30vw;
    height: auto;
    object-fit: cover;
    border-radius: 20px;
    border: 10px solid black;
    filter: drop-shadow(6px 10px 3px #00000083);
    margin: auto;
}
@media (max-width: 800px) {
    #front-img>img{
        width: 90%;
        margin: 30px 0px;
    }
}
 */


#device{
    width: 55vw; /* Ensure it takes up full width */
    height: auto; /* Ensure it takes up full height */
    object-fit: cover; /* Maintain aspect ratio while covering the container */
    border-radius: 20px;
    border: 8px solid black;
    filter: drop-shadow(6px 6px 3px #00000083);
    margin: auto;
}

.project-frame #device-container{
/* height: 720px; */
display: flex;
min-height: auto;
padding: 50px 0;
/* min-height: 70vh ; */
  width: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  /* background-color: #fff6c2; */

}

#device-container .project-name{
    background-color: #F2F2F2;
}
@media (max-width: 800px) {
    #device{
        width: 90%;
        margin: 0px 0px;
    }
    .project-frame #device-container{
        min-height: 35vh;
        padding: 0;
    }
    #typotes-txt{
        padding-top: 15px;
        }
}