/*------------------------------------------------
/ Project: Digital Clock
/-----------------------------------------------*/
.click-clock ul li {
    list-style: inside;
}

/* Intro Section */
.click-clock-intro__title.flex {
    flex-direction: column;
    justify-content: start;
    align-items: flex-start;
}

.click-clock-intro h1 {
    color: var(--rose);
    margin-bottom: var(--m-8);
}

.click-clock-intro p.h3 {
    color: var(--med-indigo);
}

.click-clock-intro__img img, 
.click-clock-narrative__img img {
    width: 100%;
    object-fit: cover;
    vertical-align: top;
    border-radius: var(--round);
}

.click-clock-intro__img img {
    aspect-ratio: 4 / 3;
    object-position: left 50% top 40%;
}

/* Info Section */
.click-clock-info {
    background: var(--xlight-rose);
    padding: var(--m-56) 0 var(--m-40) 0;
}

.click-clock-info h2.h3 {
    color: var(--indigo);
}

.click-clock-info-overview .project-page__links {
    justify-content: center;
    margin-bottom: var(--m-40);
}

.click-clock-info-overview .pink-btn {
    background-color: var(--light-med-rose);
}

.click-clock-info-overview .pink-btn:hover {
    background-color: var(--med-rose);
}

/* Narrative Section */
.click-clock-narrative__content:not(:last-child) {
    margin-bottom: var(--m-72); 
    row-gap: 0;
} 

.click-clock-narrative-intro__text p {
    margin-bottom: var(--m-8);
}

.click-clock-narrative h3.h4 {
    color: var(--indigo);
}

/* spacing after paragraphs */
.click-clock-narrative__text.clock p:nth-child(2), 
.click-clock-narrative__text.clock p:nth-child(3), 
.click-clock-narrative__text.clock ul, 
.click-clock-narrative__text.lightdark p:nth-child(2) {
    margin-bottom: var(--m-16);
}

/* Narrative Section: Links */
.click-clock-narrative__text a {
    font-size: unset;
    color: var(--rose);
    text-decoration: underline;
}

.click-clock-narrative__text a:hover {
    color: var(--dark-med-rose);
}

/* Final Steps Links */
.project-page__links.flex {
    /* flex-direction: column; */
    flex-wrap: wrap;
    gap: 1rem;
}

.project-page__links .pink-btn {
    margin-right: 0;
}

.other-projects__link {
    text-align: right;
}

/* Tablet */
@media screen and (min-width: 768px) {

    /* Intro Section */
    .click-clock-intro__title h1 {
        order: 2;
    }

    .click-clock-intro__title p {
        order: 1;
    }

    .click-clock-intro p.h3 {
        margin-bottom: var(--m-8);
    }

    /* Info Section */
    .click-clock-info {
        background: var(--xlight-rose);
        padding: var(--m-56) 0 var(--m-40) 0;
    }

    .click-clock-info-tools {
        grid-column: 9 / span 4;
    }

    .click-clock-info-overview .project-page__links {
        justify-content: flex-start;
        margin-bottom: var(--m-24);
    }

    /* Narrative Section */
    .click-clock-narrative__content:not(:last-child) {
        margin-bottom: var(--m-72); 
        row-gap: 0.4rem;
    } 

    .click-clock-narrative__content {
        align-items: center;
    }

    .click-clock-narrative-intro__text,
    .click-clock-narrative__text,
    .click-clock-narrative__img {
        grid-column: 2 / span 10;
    }

    .click-clock-narrative__img.col-8-md,
    .project-page__links.col-8-md {
        grid-column: 3 / span 8;
    }
    
}

/* Desktop */
@media screen and (min-width: 1080px) {

    /* Intro Section */
    .click-clock-intro__img img {
        aspect-ratio: 16 / 9;
        object-position: left 50% top 40%;
    }

    /* Info Section */
    .click-clock-info-tools {
        grid-column: 10 / span 3;
    }

    /* Narrative Section */
    .click-clock-narrative__content:not(:last-child) {
        margin-bottom: var(--m-96); 
        row-gap: 0;
    } 

    .click-clock-narrative-intro__text, 
    .click-clock-narrative__text {
        margin-left: var(--m-16);
    }

    .click-clock-narrative-intro__text,
    .click-clock-narrative__text,
    .click-clock-narrative__img {
        grid-column: auto / span 6;
    }

    .click-clock-narrative__img.col-8-md,
    .project-page__links.col-8-md {
        grid-column: span 6;
    }

    /* Remove bottom margin to align text w/ img */
    .click-clock-narrative__text p,
    .click-clock-narrative-intro__text ul,
    .click-clock-narrative__text.lightdark p:nth-child(3) {
        margin-bottom: 0;
    }

    /* Change Order of text/images */
    .click-clock-narrative-intro__text,
    .click-clock-narrative__text {
        order: 2;
    }

    /* Maintain Buttons on right side for final steps */
    .click-clock-narrative__content .project-page__links {
        order: 2;
    }

    .project-page__links {
        justify-content: flex-end;
    }
    
}