.project-credits ul{
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: var(--font-size-caption);
    line-height: var(--line-height-loose);
}

.project-text{
    transition: height var(--main-transition-time) var(--main-ease);
    
}

.project-text p:first-of-type, .grid-text p, .initial-hidden p{
    margin-top: var(--space-small);
}

.initial-hidden{
    margin-block: 0;
    padding-bottom: 0;
    opacity: 0;
    height: 0;
    overflow: hidden;
    transition: opacity var(--main-transition-time) var(--main-ease), height var(--main-transition-time) var(--main-ease), margin var(--main-transition-time) var(--main-ease);
}

.initial-hidden.visible{ 
    opacity: 1;
}

.project-credits li{
    max-width: 50ch;
}

main .article-grid-gallery{
    display: grid;
    font-size: var(--font-size-text);
    margin-top: var(--space-large);
}

.project-image-wrapper{
    opacity: 0;
    transform: translateY(20px);
    transition: background-color var(--main-transition-time) var(--main-ease), opacity var(--main-transition-time) var(--main-ease), transform var(--main-transition-time) var(--main-ease); 
}

.ratio-index-project{
   
}

.project-image-wrapper.loaded{
    opacity: 1;
    transform: translateY(0);
}

.grid-component{
    grid-column-end: span 6;
}
/* 
.grid-component.large{
    grid-column-end: span 6;
}

.grid-component.small{
    grid-column-end: span 4;
}

.grid-component.xsmall{
    grid-column-end: span 2;
} */
  
.grid-component.full-width > div:first-child {
    margin-inline: calc(-1 * var(--main-margin));
}

.read-more{
    font-size: var(--font-size-caption);
}

.read-button{
    opacity: 0;
    transform: translateY(var(--translate-Y));
    transition: opacity var(--main-transition-time) var(--main-ease), transform var(--main-transition-time) var(--main-ease);
    margin-top: var(--space-small); 
}

.project-text .read-button{
    transform: translateX(calc(-1 * var(--translate-Y)));
}

.read-button.visible{
    opacity: 1;
    transform: translateY(0);
}

.project-image-caption{
    font-size: var(--font-size-caption);
    margin-top: var(--space-xsmall);
    max-width: 40ch;
    opacity: 0;
    transform: translateY(var(--translate-Y));
    transition: opacity var(--main-transition-time) var(--main-ease), transform var(--main-transition-time) var(--main-ease);
}

.project-image-caption.visible{
    opacity: 1;
    transform: translateY(0);
}

.grid-text{
    max-width: 60ch;
}

.grid-text h4, .grid-text p{
    opacity: 0;
    transform: translateY(var(--translate-Y));
    transition: opacity var(--main-transition-time) var(--main-ease), transform var(--main-transition-time) var(--main-ease);
}

.grid-text h4.visible, .grid-text p.visible{
    opacity: 1;
    transform: translateY(0);
}

.grid-text .quote{
  font-size: var(--font-size-subtitle);
  font-style: italic;
  max-width: 35ch;
  margin-bottom: var(--space-xsmall); 
}

.grid-text .author {
    font-size: var(--font-size-caption);
    max-width: 35ch;
    margin-bottom: var(--space-xsmall);
}

.main-content .footer-project{
    display: flex;
    justify-content: space-between;
    margin-top: var(--space-xlarge);
    margin-bottom: var(--space-medium);  
}

.footer-project a{
    transition: color var(--main-transition-time) var(--main-ease);
}

.footer-project a:hover{
    color: rgb(var(--main-accent-color));
}

.main-button{
    margin-top: var(--main-basic-space);
    transform: translateX(calc(-1 * var(--translate-Y)));

}

.buttons-section{
    display: flex;
    gap: var(--main-basic-space);
}

.separator{
    min-height: 0.5rem;
    border: 0;
    border-top: 0.5px solid rgb(var(--main-lighter-color));
    flex-grow: 1;
    width: clamp(15rem, 40%, 41rem);
    margin-inline: 0;
    margin-block: var(--space-small);
}

.spacer{
    display: none;
}

@media only screen and (min-width: 1599px){
    .grid-component.full-width > div:first-child {
        margin-inline: 0;
    }
}

@media only screen and (min-width: 850px) {

    main .article-grid-gallery{
        /* gap: var(--space-large); */
    }

    .project-image-caption{
        margin-top: var(--space-small); 
    }
   /*  .grid-component.medium{
       grid-column-end: span 4;
    }

    .grid-component.start-1{
        grid-column-start: 1;
    }

    .grid-component.start-3{
        grid-column-start: 3;
    }

    .grid-component.start-4{
        grid-column-start: 4;
    }
   
    .grid-component.medium-left{
        grid-column: 1 / span 4;
    }

    .grid-component.small{
        grid-column-end: span 3;
    }

    .grid-component.xsmall{
        grid-column-end: span 2;
    } */

    main .article-grid-gallery{
        /* gap: var(--space-xlarge); */
    }

    .spacer{
        display: block;
    }
}