nav{
    justify-content: space-between;
    div{
        width: 60%;
    }
}




header{
    section{
        align-items: start;
    }
}

#button-header{
    li{
        a{
            display: flex;
            justify-content: center;
            width: 100%;
        }
    }
}

.Stack{
    gap: var(--space-3);
    li{
        padding: var(--space-3);
        background: var(--color-bg-list);
    }
}

#process{
    article{
        gap: var(--space-3);
    }
}

#wireframes{
    picture{
        height: 550px;
    img{
        width: 100%;
        object-fit: cover;
    }
}
}

section .title{
    text-align: center;
}

picture{
        display: flex;
        align-items: center;
        justify-content: center;
        img{
            object-position: top; 
            width: 100%;
            height: 99%;
        }
    }

#concept{
    h2{
        line-height: 1.1;
    }
}
#develop{
    article{
        gap: var(--space-6);
        text-align: center;
        justify-content: center;
        h3{
            font-size: 60px;
            font-weight: var(--font-weight-bold);
        }
    }
    ul{
        li{
            display: flex;
            a{
                width: 100%;
                display: flex;
                align-items: center;
                justify-content: center;
            }

        }
    }
}

.sectionContent img {
  opacity: 0;
}

@keyframes blurIn {
  from {
    opacity: 0;
    
  }
  to {
    opacity: 1;
   
  }
}

.blur-in {
  animation: blurIn 0.7s ease forwards;
}

@media (min-width: 768px) {
    #button-header, #develop ul{
        grid-template-columns: repeat(2, 1fr);
    
    }
    ul{
        grid-column: 1/3;
        
    }

    #WhatIS{
        p{
            grid-column: 1/3;
        }
        picture{
            grid-column: 1/3;
        }
    }

    #whatDid{
        picture{
            grid-column: 1/3;
            img{
                object-fit: cover;
            }
        }
    }

    #wireframes{
        p{
            grid-column: 1/3;
        }
    }

    #UIelement{
        p{
            grid-column: 1/3;
        }
        picture:last-child{
        grid-column: 1/3;
    }
    }

    
}

@media (min-width: 1200px) {
    
    header{
        article{
            grid-template-columns: 60% 40% !important;
            grid-template-rows: repeat(4, 1fr);
            height: 87vh;
            h1{
                grid-column: 1/2;
                display: flex;
                align-items: center;
            }
            picture{
                grid-row: 1/3;
                img{
                    object-fit: cover;
                }
            }
            p{
                grid-row: 2/3;
                display: flex;
                align-items: center;
            }
            #stack{
                grid-column: 1/2;
                justify-content: center;
                gap: var(--space-3);
            }
            #role{
                grid-column: 1/2;
                justify-content: center;
                gap: var(--space-3);
            }
            ul{
                grid-column: 2/3;
                grid-row: 3/5;
                grid-template-columns: repeat(1, 1fr) !important;
                li{
                    display: flex;
                    align-items: center;
                }
            }
        }
    }

    #WhatIS{
        p{
            grid-column: 1/2;
        }
        picture{
            grid-column: 2/3 ;
        }
    }
     #whatDid{
        grid-template-rows: repeat(7, auto);
        picture{
            grid-column: 2/3;
            grid-row: 2/8;
        }
        p{
            grid-column: 1/2;
        }
    }

    #UIelement{
        grid-template-columns: repeat(3, 1fr);
        h2{
            grid-column: 1/4;
        }
        p{
            grid-column: 1/4;
        }
        picture:nth-last-child(2){
            grid-column: 1/2;
            object-fit: cover;
        }
        picture:last-child {
        grid-column: 2/4;
        }

    }
  
 
}