#collectionsGridLayout {
    width: 100%;
    display: block;
    text-align: center;
    position: relative;
    background-color: rgb(var(--color-background));
    padding-top: var(--collectionsGridLayout-padding-top);
    padding-bottom: var(--collectionsGridLayout-padding-bottom);

.collectionsInnerContainer {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 3rem;
    width: 100%;
    max-width: 1728px;
    padding: 0 6rem;
    margin: 0 auto;

    & .collectionItem {
        display: flex;
        flex-wrap: wrap;

        &.half {
            width: calc(50% - 1.5rem);
            position: relative;
            .imageContainer {
                width: 100%;
                &.black_and_white img {
                    filter: grayscale(100%);
                }
            }
            .imageContainer img {
                width: 100%;
                height: auto;
                aspect-ratio: 1 / 1;
                object-fit: cover;
            }
            @media only screen and (max-width: 600px){
                &.half {
                    width: calc(50% - 0.5rem);
                }
            }
        }
        &.thirds {
            width: calc(31.33% - 1.5rem);
            position: relative;
            .imageContainer {
                width: 100%;
                &.black_and_white img {
                    filter: grayscale(100%);
                }
            }
            .imageContainer img {
                width: 100%;
                height: auto;
                aspect-ratio: 3 / 4;
                object-fit: cover;
            }
            @media only screen and (max-width: 600px){
                &.thirds {
                    width: 100%;
                }
            }
        }
        &.full {
            width: 100%;
            position: relative;
            .imageContainer {
                width: 100%;
                &.black_and_white img {
                    filter: grayscale(100%);
                }
            }
            .imageContainer img {
                width: 100%;
                height: auto;
                aspect-ratio: 16 / 9;
                object-fit: cover;
            }
        }
        h2 {
            width: 100%;
            display: block;
            text-align: center;
            margin-block-start: 0;
            margin-block-end: 0;
            a, 
            a.visited {
                color: rgba(var(--color-foreground), 1);
                text-decoration: none;
                border-bottom: 1px solid rgba(var(--color-foreground), 1);
                font-size: 1.6rem;
            }
             @media only screen and (max-width: 600px){
                margin-block-end: 2rem;
             }
        }
    }
    @media only screen and (max-width: 820px){
        & {
            padding: 0 4rem;
        }
    }
    @media only screen and (max-width: 600px){
        & {
            padding: 0 2rem;
            gap: 1rem;
        }
    }
}
}