.project-image-wrapper{
    aspect-ratio: var(--main-aspect-ratio-projects);
}
.image-wrapper{
    aspect-ratio: var(--main-aspect-ratio-index);
}

main .article-grid-gallery{
    grid-template-columns: repeat(6, 1fr);
    gap: var(--main-basic-space);
}

main .journal-grid-gallery{
    grid-template-columns: repeat(6, 1fr);
    gap: var(--space-large);
}

.ratio-1-1{
    aspect-ratio: 1/1;
}

.ratio-3-2{
    aspect-ratio: 3/2;
}

.ratio-2-3{
    aspect-ratio: 2/3;
}

.ratio-4-3{
    aspect-ratio: 4/3;
}

.ratio-5-4{
    aspect-ratio: 5/4;
}

.ratio-4-5{
    aspect-ratio: 4/5;
}

.ratio-16-9{
    aspect-ratio: 16/9;
}

.ratio-9-16{
    aspect-ratio: 9/16;
}

.ratio-185-1{
    aspect-ratio: 1.85/1;
}

.span-6{
    grid-column-end: span 6;
}

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

.span-5{
    grid-column-end: span 5;
}

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

.span-2{
    grid-column-end: span 2;
}

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

.start-2{
    grid-column-start: 2;
}

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

.start-4{
    grid-column-start: 4;
}

.start-5{
    grid-column-start: 5;
}

#day-of-the-dead, #day-of-the-dead-tote{
    object-position: top;
}

@media only screen and (min-width: 850px) {
    main .article-grid-gallery{
        grid-template-columns: repeat(6, 1fr);
        gap: var(--space-xlarge) var(--space-large);
        align-items: flex-start;
    } 

    .lg\:ratio-1-1{
        aspect-ratio: 1/1;
    }
    
    .lg\:ratio-3-2{
        aspect-ratio: 3/2;
    }
    
    .lg\:ratio-2-3{
        aspect-ratio: 2/3;
    }

    .lg\:ratio-4-3{
        aspect-ratio: 4/3;
    }
    
    .lg\:ratio-5-4{
        aspect-ratio: 5/4;
    }
    
    .lg\:ratio-4-5{
        aspect-ratio: 4/5;
    }
    
    .lg\:ratio-16-9{
        aspect-ratio: 16/9;
    }

    .lg\:ratio-9-16{
        aspect-ratio: 9/16;
    }
    
    .lg\:ratio-185-1{
        aspect-ratio: 1.85/1;
    }

    .lg\:span-6{
        grid-column-end: span 6;
    }
    
    .lg\:span-4{
        grid-column-end: span 4;
    }
    
    .lg\:span-5{
        grid-column-end: span 5;
    }
    
    .lg\:span-3{
        grid-column-end: span 3;
    }
    
    .lg\:span-2{
        grid-column-end: span 2;
    }

    .lg\:start-1{
        grid-column-start: 1;
    }
    
    .lg\:start-2{
        grid-column-start: 2;
    }
    
    .lg\:start-3{
        grid-column-start: 3;
    }
    
    .lg\:start-4{
        grid-column-start: 4;
    }

    .lg\:start-5{
        grid-column-start: 5;
    }
}