.entries-container {
    --column-gap: 16;
    display: grid;
    gap: calc(var(--column-gap) * 1px);
    grid-auto-rows: max-content
}

@media (min-width: 768px) {
    .entries-container {
        --column-gap: 24
    }
}

.entries-container:empty {
    display: none
}

.sm-grid-1 {
    grid-template-columns: 1fr
}

.sm-grid-2 {
    grid-template-columns: repeat(auto-fit, calc(1 / 2 * 100% - ((var(--column-gap) * 1 / 2) * 1px)))
}

.sm-grid-3 {
    grid-template-columns: repeat(auto-fit, calc(1 / 3 * 100% - ((var(--column-gap) * 2 / 3) * 1px)))
}

.sm-grid-4 {
    grid-template-columns: repeat(auto-fit, calc(1 / 4 * 100% - ((var(--column-gap) * 3 / 4) * 1px)))
}

.sm-grid-5 {
    grid-template-columns: repeat(auto-fit, calc(1 / 5 * 100% - ((var(--column-gap) * 4 / 5) * 1px)))
}

.sm-grid-6 {
    grid-template-columns: repeat(auto-fit, calc(1 / 6 * 100% - ((var(--column-gap) * 5 / 6) * 1px)))
}

.sm-grid-7 {
    grid-template-columns: repeat(auto-fit, calc(1 / 7 * 100% - ((var(--column-gap) * 6 / 7) * 1px)))
}

.sm-grid-8 {
    grid-template-columns: repeat(auto-fit, calc(1 / 8 * 100% - ((var(--column-gap) * 7 / 8) * 1px)))
}

.sm-grid-9 {
    grid-template-columns: repeat(auto-fit, calc(1 / 9 * 100% - ((var(--column-gap) * 8 / 9) * 1px)))
}

.sm-grid-10 {
    grid-template-columns: repeat(auto-fit, calc(1 / 10 * 100% - ((var(--column-gap) * 9 / 10) * 1px)))
}

@media (min-width: 768px) {
    .md-grid-1 {
        grid-template-columns:1fr
    }

    .md-grid-2 {
        grid-template-columns: repeat(auto-fit, calc(1 / 2 * 100% - ((var(--column-gap) * 1 / 2) * 1px)))
    }

    .md-grid-3 {
        grid-template-columns: repeat(auto-fit, calc(1 / 3 * 100% - ((var(--column-gap) * 2 / 3) * 1px)))
    }

    .md-grid-4 {
        grid-template-columns: repeat(auto-fit, calc(1 / 4 * 100% - ((var(--column-gap) * 3 / 4) * 1px)))
    }

    .md-grid-5 {
        grid-template-columns: repeat(auto-fit, calc(1 / 5 * 100% - ((var(--column-gap) * 4 / 5) * 1px)))
    }

    .md-grid-6 {
        grid-template-columns: repeat(auto-fit, calc(1 / 6 * 100% - ((var(--column-gap) * 5 / 6) * 1px)))
    }

    .md-grid-7 {
        grid-template-columns: repeat(auto-fit, calc(1 / 7 * 100% - ((var(--column-gap) * 6 / 7) * 1px)))
    }

    .md-grid-8 {
        grid-template-columns: repeat(auto-fit, calc(1 / 8 * 100% - ((var(--column-gap) * 7 / 8) * 1px)))
    }

    .md-grid-9 {
        grid-template-columns: repeat(auto-fit, calc(1 / 9 * 100% - ((var(--column-gap) * 8 / 9) * 1px)))
    }

    .md-grid-10 {
        grid-template-columns: repeat(auto-fit, calc(1 / 10 * 100% - ((var(--column-gap) * 9 / 10) * 1px)))
    }
}

@media (min-width: 1024px) {
    .lg-grid-1 {
        grid-template-columns:1fr
    }

    .lg-grid-2 {
        grid-template-columns: repeat(auto-fit, calc(1 / 2 * 100% - ((var(--column-gap) * 1 / 2) * 1px)))
    }

    .lg-grid-3 {
        grid-template-columns: repeat(auto-fit, calc(1 / 3 * 100% - ((var(--column-gap) * 2 / 3) * 1px)))
    }

    .lg-grid-4 {
        grid-template-columns: repeat(auto-fit, calc(1 / 4 * 100% - ((var(--column-gap) * 3 / 4) * 1px)))
    }

    .lg-grid-5 {
        grid-template-columns: repeat(auto-fit, calc(1 / 5 * 100% - ((var(--column-gap) * 4 / 5) * 1px)))
    }

    .lg-grid-6 {
        grid-template-columns: repeat(auto-fit, calc(1 / 6 * 100% - ((var(--column-gap) * 5 / 6) * 1px)))
    }

    .lg-grid-7 {
        grid-template-columns: repeat(auto-fit, calc(1 / 7 * 100% - ((var(--column-gap) * 6 / 7) * 1px)))
    }

    .lg-grid-8 {
        grid-template-columns: repeat(auto-fit, calc(1 / 8 * 100% - ((var(--column-gap) * 7 / 8) * 1px)))
    }

    .lg-grid-9 {
        grid-template-columns: repeat(auto-fit, calc(1 / 9 * 100% - ((var(--column-gap) * 8 / 9) * 1px)))
    }

    .lg-grid-10 {
        grid-template-columns: repeat(auto-fit, calc(1 / 10 * 100% - ((var(--column-gap) * 9 / 10) * 1px)))
    }
}

.full-grid {
    grid-column: 1 / -1
}

.entries-container .entry::before,
.entries-container .entry::after {
    content:  none;
}