/*------------------------------------------------
/ Project: See You Later
/-----------------------------------------------*/
.see-you-later ul li {
    list-style: inside;
}

/* Intro Section */
.see-you-later-intro__title.flex {
    flex-direction: column;
    justify-content: start;
    align-items: flex-start;
}

.see-you-later-intro h1 {
    color: var(--rose);
    margin-bottom: var(--m-8);
}

.see-you-later-intro p.h3 {
    color: var(--med-indigo);
}

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

.see-you-later-intro__img img {
    aspect-ratio: 4 / 3;
    object-position: left 50% top 55%;
}

.see-you-later-narrative__img img {
    aspect-ratio: 4 / 3;
}

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

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

.see-you-later-info-overview .pink-btn {
    background-color: var(--light-med-rose);
}

.see-you-later-info-overview .pink-btn:hover {
    background-color: var(--med-rose);
}

.see-you-later-info h2.h3 {
    color: var(--indigo);
}

.see-you-later-narrative__title,
.see-you-later-narrative__content:not(:last-child) {
    margin-bottom: var(--m-72); 
    row-gap: 0;
} 

.see-you-later-narrative h3.h4 {
    color: var(--indigo);
}

/* Narrative Section: List */
.see-you-later-narrative__text ol li {
    list-style: inside;
    list-style-type: auto;
}

.see-you-later-narrative__list {
    margin-bottom: var(--m-16);
}

/* Narrative Section: Links */
.see-you-later-narrative__text > p > a {
    font-size: unset;
    color: var(--rose);
    text-decoration: underline;
}

.see-you-later-narrative__text a.pink-btn:hover {
    background-color: var(--light-med-rose);
    color: var(--rose);
}

.see-you-later-narrative__text a:hover {
    color: var(--dark-med-rose);
}

.see-you-later .project-page__links.flex {
    flex-wrap: wrap;
    gap: 1rem;
}

.see-you-later-narrative__text a.pink-btn {
    margin-bottom: 1rem;
}

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

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

hr {
    border: 0.07rem solid var(--light-med-rose);
    margin-bottom: var(--m-72); 
}

/* Title Highlight for Small Screens */
.see-you-later h1.highlight::after,
.see-you-later h1 span.highlight::after {
    content: '';
    position: absolute;
    top: 40%;
    left: 1.5%;
    width: 103%;
    height: 55%;
    z-index: -1;
}

@media screen and (max-width: 496px) {

    .see-you-later h1.highlight::after {
        position: absolute;
        top: 20%;
        left: 1.5%;
        width: 306px;
        height: 27%;
        z-index: -1;
    }

    .see-you-later h1 span.highlight::after {
        content: '';
        position: absolute;
        top: 40%;
        left: 1.5%;
        width: 103%;
        height: 55%;
        z-index: -1;
    }

}

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

    /* Intro Section */
    .see-you-later-intro__title h1 {
        order: 2;
    }

    .see-you-later-intro__title p {
        order: 1;
    }

    .see-you-later-intro p.h3 {
        margin-bottom: var(--m-8);
    }

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

    .see-you-later-info-tools {
        grid-column: 9 / span 4;
    }

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

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

    .see-you-later-narrative__content {
        align-items: center;
    }

    .see-you-later-narrative__heading,
    .see-you-later-narrative-intro__text,
    .see-you-later-narrative__img, 
    .see-you-later-narrative__text {
        grid-column: 2 / span 10;
    }

    .see-you-later-narrative__img.col-8-md,
    .project-page__links.col-8-md {
        grid-column: 3 / span 8;
    }
    
    .project-page__links {
        text-align: left;
    }
    
}

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

    /* Intro Section */
    .see-you-later-intro__img img {
        aspect-ratio: 16 / 9;
        object-position: left 50% top 55%;
    }
    
    /* Info Section */
    .see-you-later-info-tools {
        grid-column: 10 / span 3;
    }

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

    /* set closer margins for packaging section */
    .see-you-later-narrative__content.p2 {
        margin-bottom: var(--m-48); 
    }

    /* remove l/r extra margin for packaging section */
    .see-you-later-narrative__text.odd,
    .see-you-later-narrative__text.even {
        margin-left: unset;
        text-align: center;
    }

    .see-you-later-narrative-intro__text, 
    .see-you-later-narrative__text,
    .see-you-later-narrative__content .project-page__links {
        margin-left: var(--m-16);
    }

    /* Remove bottom margin to align text w/ img */
    .see-you-later-narrative__text p:not(.empathize, .see-you-later-narrative__list),
    .see-you-later-narrative-intro__text p,
    .see-you-later-narrative__text ul,
    .see-you-later-narrative__text ol:nth-child(4){
        margin-bottom: 0;
    }

    /* horizontal section line */
    .see-you-later-narrative__heading {
        grid-column: auto / span 12;
    }

    .see-you-later-narrative-intro__text,
    .see-you-later-narrative__img, 
    .see-you-later-narrative__text {
        grid-column: auto / span 6;
    }

    .see-you-later-narrative__img.col-8-md,
    .project-page__links.col-8-md {
        grid-column: span 6;
    }

    .project-page__links {
        justify-content: center;
    }

    /* Alternate Order of text/images */
    .see-you-later-narrative-intro__text,
    .see-you-later-narrative__text {
        order: 2;
    }
    
    /* alternate tea/coffee packaging section */
    .see-you-later-narrative__text.even {
        order: unset;
    }

    .see-you-later-narrative__content .project-page__links {
        order: 2;
    }
    
}