.why-me {
 display: flex;
   height: 100vh;
}

.project-sub-section {
    /* background: cadetblue; */
    position: relative;
    margin-inline: auto;
    padding: clamp(0, 2vw, 1em);
    max-width: 1400px;
}

.project-grid {
    display: flex;
    flex-wrap: wrap;    
  }
  
  .project-grid-item {
    display: grid;
    grid-template-columns: 1fr 1fr;
    justify-content: space-between;
    align-items: center;
    grid-gap: clamp(1rem,calc(3vw + 1vh), 3rem);
    margin: 2rem 0;
    padding: 10px;
    border: solid var(--background) 1px;
  }

.project-img {
    position: relative;
    background-color: var(--backgroundwithopacity);
    /* margin: clamp(1px, 2vw, 5px); */
    margin: auto;
    border-radius: 10px;
    width: 100%;
    height: 400px;    
}

.project-img img:nth-child(1) {
    position:absolute;
    top:0;
    left:0;
    padding:0.5rem;
}
.project-img img:nth-child(2) {
    position:absolute;
    top:3%;
    left:50%;
    transform: rotate(25deg);
}

.project-img img:nth-child(3) {
    position:absolute;
    top:3%;
    left:70%;
    transform: rotate(-5deg);
    box-shadow: var(--boxshadowwithopacity);
}

.project-img img:nth-child(4) {
    position:absolute;
    top:50%;
    left:1%;
    transform: rotate(-5deg);
    box-shadow: var(--boxshadowwithopacity);
}

.project-img img:nth-child(5) {
    position:absolute;
    top:50%;
    left:20%;
    transform: rotate(-20deg);
}

.project-img img:nth-child(6) {
    position:absolute;
    top:50%;
    left:60%;
    transform: rotate(0deg);
}

.project-grid-item:nth-child(odd) .project-detail {
    order: 1;
}

.project-grid-item .read-more-toggle {
    font-size: 12px;
}

.project-grid-item .hidden {
    display: none;
}

.project-detail {
    position: relative;
    /* background-color:blueviolet; */
    margin: 5px;
}

.project-technologies {
    margin: 1rem 0;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 5px;
}

.project-technologies div { 
    border-radius: 4px;    
    background-color: var(--background);
    padding: 0 5px;
}

.project-technologies div p { 
    color: var(--text);
    font-size: 10px;
}

.project-url {
    margin: clamp(0rem, 2vh, 1rem) 0;    
}

.project-url button {
    color: tomato;  
    border: none;
    cursor: pointer;
}

@media screen and (max-width: 867px) {
    
    .project-grid-item {
        grid-template-columns: 1fr;
    }

     .project-detail{
        order: 1;
    }
}