.post-gallery-inline { .posts-container { overflow-x: auto; white-space: nowrap; } article.post-preview { width: auto; height: auto; margin: 0 0 0.5rem 0; padding: 0.5rem; overflow: hidden; vertical-align: top; } } .post-gallery-grid { .posts-container { display: grid; gap: 0.5rem; } &.post-gallery-150 .posts-container { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); } &.post-gallery-180 .posts-container { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); } &.post-gallery-225 .posts-container { grid-template-columns: repeat(auto-fill, minmax(225px, 1fr)); } &.post-gallery-225w .posts-container { grid-template-columns: repeat(auto-fill, minmax(225px, 1fr)); } &.post-gallery-270 .posts-container { grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); } &.post-gallery-270w .posts-container { grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); } &.post-gallery-360 .posts-container { grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); } @media screen and (max-width: 660px) { &.post-gallery-150 .posts-container { grid-template-columns: repeat(2, auto); } &.post-gallery-180 .posts-container { grid-template-columns: repeat(2, auto); } &.post-gallery-225 .posts-container { grid-template-columns: repeat(2, auto); } &.post-gallery-225w .posts-container { grid-template-columns: repeat(2, auto); } &.post-gallery-270 .posts-container { grid-template-columns: repeat(2, auto); } &.post-gallery-270w .posts-container { grid-template-columns: repeat(2, auto); } &.post-gallery-360 .posts-container { grid-template-columns: repeat(1, auto); } } }