* {
    box-sizing: border-box;
}

/* Default grid */
.grid{
    display: grid;
    grid-template-columns: 1fr;
    row-gap: 1rem;
}

.two-column {
    grid-template-columns: 1fr 1fr;
    column-gap: 2rem;
}

.three-column {
    grid-template-columns: 1fr 1fr 1fr;
    column-gap: 2rem;
    row-gap: 2rem;
}

/* ---- Index page project section ---- */
.project-container{
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin-top: 2rem;
}

@media(max-width:48rem){
    .project-container{
        grid-template-columns: 1fr;
        align-items: center;
        justify-items: center;
    }
    .project-content, .about-name, .about-content p{
        padding-left: 0;
    }
}

.skills-flex, .project-label,.about-content {
    display: flex;
    flex-wrap: wrap; 
}

.skills-flex {
    gap: 0.5rem;
    margin-bottom: 2rem;
}

.project-label{
    justify-content: space-between;
    align-items: baseline;
    column-gap: 3rem;
}

.about-content{
    column-gap: 3rem;
}

.about-wrapper {
  display: flex;
  align-items: center; 
  justify-content: center;
}

.image-wrapper {
    display: flex;
    justify-content: end;
    align-items: center;
}
/* ---- Index Page Contact Section ---- */
.link-with-icon{
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding-bottom: 1rem;
}

/* ----Footer layout ---- */
.footer-container{
    display: grid;
    grid-template-columns: 1fr 2fr;
    column-gap: 3rem;
}

.footer-grid-navigation {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  row-gap: 0.5rem;
}

@media(max-width:60rem){
    .footer-container{
        grid-template-columns: 1fr;
    }
}
@media(max-width:30rem){
  .footer-grid-navigation {
    grid-template-columns: 1fr 1fr;
  }  
}

.nav-bar-flex{
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    column-gap: 3rem;
    row-gap: 1rem;
}

.nav-link-flex {
    display: flex;
    column-gap: 2rem; 
    row-gap:0.5rem;
    align-items: center;
    flex-wrap: wrap;
}

/* ---- Project header layout ---- */
.six-column {
    grid-template-columns: repeat(6, 1fr);
    column-gap: 3rem;
    row-gap: 1rem;
}

.project-title{
    grid-column: 1/ span 3;
    align-self: start;
    justify-self: start;
}

/* Project header tablet layout */
@media(max-width:69rem){
    .six-column{
        grid-template-columns:repeat(3, 1fr);
    }
}

/*Project header mobile layout*/
@media(max-width:38rem){
    .project-title{
        grid-column:1/ span 2;
    }
    .six-column{
        grid-template-columns: 1fr 1fr;
    }

}

/* Project header visual */
.description-visual {
    order: -1; /* Move video to the top on mobile */
    margin-bottom: 2rem; 
}

/* For Desktop */ 
@media (min-width: 50rem) {
    .overview-container{
        grid-template-columns: repeat(6, 1fr);
        column-gap: 3rem;
        grid-template-rows: auto auto auto auto;
    }

    .description-title{
        grid-column: 1;
    }

    .description-content{
        grid-column: 2/ span 3;
        max-width: 40rem;
    }

    .description-visual{
        grid-column: 5/ span 2;
        grid-row: 1/ -1;
        order: unset;
    }

    .description-divider{
        grid-column: 1/ span 4;
        align-self: center;
    }
}

/* ---- Project analysis layout----*/
.grid-analysis{
    display: grid;
    grid-template-columns: repeat(5, 1fr); /* Default or desktop layout */
    column-gap:3rem;
}

.analysis-subsection {
   grid-column: 2 / span 4;
}

.analysis-content{
    grid-column: 2 / span 4;
}

@media(max-width:53rem){
    .analysis-content{
        grid-column: 1 /-1;
    }
}

.personas-container{
    grid-template-columns: 1fr 1fr 1fr 1fr; /* Default or desktop layout */
    column-gap: 1rem;
    max-width: 50rem;
}

.persona-info{
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: baseline;
}

.persona-info p{
    padding: 0;
    margin: 0;
    text-align: end;
}

/* Tablet layout */
@media(max-width:73rem){
    .analysis-subsection {
        grid-column: 1/-1;
    }
    .personas-container{
        grid-template-columns: 1fr 1fr;
    }
    .three-column{
        grid-template-columns: 1fr 1fr;
    }
}

/* Mobile layout */
@media(max-width:38rem){
    .three-column{
        grid-template-columns: 1fr;
    }
    .two-column{
        grid-template-columns: 1fr;
    }    
    #self-portrait {
        display: none;
    }
    #other-contact h3{
        margin-top: 4rem;
    }
    #email-contact{
        margin-left: 0rem;
    }
    #contact h2{
        margin-left:1rem;
    }
}