material-components-vue/dist/grid-list/grid-list.min.css

Material Design components for Vue.js

.mdc-grid-tile__primary{padding-bottom:100%}.mdc-grid-tile{margin:2px 0;padding:0 2px}.mdc-grid-tile__secondary{left:2px;width:calc(100% - 4px)}.mdc-grid-list__tiles{margin:2px auto;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-flow:row wrap;flex-flow:row wrap;padding:0}.mdc-grid-list--tile-gutter-1 .mdc-grid-tile{margin:.5px 0;padding:0 .5px}.mdc-grid-list--tile-gutter-1 .mdc-grid-tile__secondary{left:.5px;width:calc(100% - 1px)}.mdc-grid-list--tile-gutter-1 .mdc-grid-list__tiles{margin:.5px auto}.mdc-grid-list--tile-aspect-16x9 .mdc-grid-tile__primary{padding-bottom:56.24993%}.mdc-grid-list--tile-aspect-3x2 .mdc-grid-tile__primary{padding-bottom:66.66667%}.mdc-grid-list--tile-aspect-2x3 .mdc-grid-tile__primary{padding-bottom:149.99925%}.mdc-grid-list--tile-aspect-4x3 .mdc-grid-tile__primary{padding-bottom:75.00019%}.mdc-grid-list--tile-aspect-3x4 .mdc-grid-tile__primary{padding-bottom:133.33333%}.mdc-grid-tile{display:block;position:relative;width:200px;width:var(--mdc-grid-list-tile-width,200px)}.mdc-grid-tile__primary{background-color:#fff;background-color:var(--mdc-theme-background,#fff);color:rgba(0,0,0,.87);color:var(--mdc-theme-text-primary-on-background,rgba(0,0,0,.87));position:relative;height:0}.mdc-grid-tile__primary-content{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;background-repeat:no-repeat;background-position:50%;background-size:cover}.mdc-grid-tile__secondary{background-color:#6200ee;background-color:var(--mdc-theme-primary,#6200ee);color:#fff;color:var(--mdc-theme-on-primary,#fff);position:absolute;bottom:0;-webkit-box-sizing:border-box;box-sizing:border-box;height:48px;padding:16px}.mdc-grid-tile__title{margin:0;line-height:1rem;font-weight:500}.mdc-grid-tile__support-text,.mdc-grid-tile__title{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;display:block;padding:0;font-size:1rem}.mdc-grid-tile__support-text{font-family:Roboto,sans-serif;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;line-height:1.75rem;font-weight:400;letter-spacing:.00937em;text-decoration:inherit;text-transform:inherit;margin:4px 0 0}.mdc-grid-tile__icon{position:absolute;top:calc(50% - 12px);font-size:0}.mdc-grid-list--twoline-caption .mdc-grid-tile__secondary{height:68px}.mdc-grid-list--header-caption .mdc-grid-tile__secondary{top:0;bottom:auto}.mdc-grid-list--with-icon-align-start .mdc-grid-tile__secondary{padding-left:56px;padding-right:8px}.mdc-grid-list[dir=rtl] .mdc-grid-list--with-icon-align-start .mdc-grid-tile__secondary,[dir=rtl] .mdc-grid-list .mdc-grid-list--with-icon-align-start .mdc-grid-tile__secondary{padding-left:8px;padding-right:56px}.mdc-grid-list--with-icon-align-start .mdc-grid-tile__icon{left:16px;right:auto;font-size:24px}.mdc-grid-list[dir=rtl] .mdc-grid-list--with-icon-align-start .mdc-grid-tile__icon,[dir=rtl] .mdc-grid-list .mdc-grid-list--with-icon-align-start .mdc-grid-tile__icon{left:auto;right:16px}.mdc-grid-list--with-icon-align-end .mdc-grid-tile__secondary{padding-left:16px;padding-right:56px}.mdc-grid-list[dir=rtl] .mdc-grid-list--with-icon-align-end .mdc-grid-tile__secondary,[dir=rtl] .mdc-grid-list .mdc-grid-list--with-icon-align-end .mdc-grid-tile__secondary{padding-left:56px;padding-right:16px}.mdc-grid-list--with-icon-align-end .mdc-grid-tile__icon{left:auto;right:16px;font-size:24px}.mdc-grid-list[dir=rtl] .mdc-grid-list--with-icon-align-end .mdc-grid-tile__icon,[dir=rtl] .mdc-grid-list .mdc-grid-list--with-icon-align-end .mdc-grid-tile__icon{left:16px;right:auto}