.grid-container {
    container: grid / inline-size;
}

.frame-type-container-dynamic {
    .grid > .frame {
        padding: 0;
    }
}

.grid {
    display: grid;
    gap: var(--anresis-grid-gap);

    &.grid-gap--large {
    gap: var(--anresis-grid-gap-large);
    }

    > .frame:first-child {
        padding-block-start: 0;
    }

    > .column > .frame:first-child {
        padding-block-start: 0;
    }
    
    > .frame:last-child {
        padding-block-end: 0;
    }

    > .column > .frame:last-child {
        padding-block-end: 0;
    }

    &.grid--6-columns {
        grid-template-columns: repeat(6, minmax(0, 1fr));
        
        @container grid (width < 1500px) {
            grid-template-columns: repeat(4, minmax(0, 1fr));
        }

        @container grid (width < 1100px) {
            grid-template-columns: repeat(3, minmax(0, 1fr));
        }

        @container grid (width < 1000px) {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        @container grid (width < 750px) {
            grid-template-columns: minmax(0, 1fr);
        }
    }

    &.grid--5-columns {
        grid-template-columns: repeat(5, minmax(0, 1fr));

        @container grid (width < 1500px) {
            grid-template-columns: repeat(4, minmax(0, 1fr));
        }

        @container grid (width < 1100px) {
            grid-template-columns: repeat(3, minmax(0, 1fr));
        }

        @container grid (width < 1000px) {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        @container grid (width < 500px) {
            grid-template-columns: minmax(0, 1fr);
        }
    }

    &.grid--4-columns {
        grid-template-columns: repeat(4, minmax(0, 1fr));

        @container grid (width < 1000px) {
            grid-template-columns: repeat(3, minmax(0, 1fr));
        }

        @container grid (width < 700px) {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        @container grid (width < 500px) {
            grid-template-columns: minmax(0, 1fr);
        }


    }

    &.grid--3-columns {
        grid-template-columns: repeat(3, minmax(0, 1fr));

        @container grid (width < 800px) {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        @container grid (width < 500px) {
            grid-template-columns: minmax(0, 1fr);
        }
    }

    
    &.grid--3-columns-30-35-35 {
        grid-template-columns: minmax(0, 3fr) minmax(0, 3.5fr) minmax(0, 3.5fr);

        @container grid (width < 1000px) {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        @container grid (width < 750px) {
            grid-template-columns: minmax(0, 1fr);
        }


    }

    &.grid--2-columns {
        grid-template-columns: repeat(2, minmax(0, 1fr));

        @container grid (width < 750px) {
            grid-template-columns: minmax(0, 1fr);
        }
    }
    
    &.grid--2-columns-66-33 {
        grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);

        @container grid (width < 1000px) {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        @container grid (width < 750px) {
            grid-template-columns: minmax(0, 1fr);
        }
    }

    &.grid--2-33-66-columns {
        grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);

        @container grid (width < 1000px) {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        @container grid (width < 750px) {
            grid-template-columns: minmax(0, 1fr);
        }
    }
    
    &.grid--2-columns-25-75 {
        grid-template-columns: minmax(0, 1fr) minmax(0, 3fr);

        @container grid (width < 1000px) {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        @container grid (width < 750px) {
            grid-template-columns: minmax(0, 1fr);
        }
    }

    &.grid--1-column {
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }


}