@ebay/skin
Version:
Skin - CSS modules that represent the brand eBay
105 lines (101 loc) • 2.98 kB
CSS
div.file-preview-card-group {
container: file-preview-cards-container/inline-size;
}
div.file-preview-card-group ul {
display: grid;
gap: var(--spacing-100);
grid-template-columns: repeat(2, 1fr);
list-style: none;
margin: 0;
padding: 0;
width: 100%;
}
div.file-preview-card-group ul li {
height: max-content;
}
@supports not (contain: inline-size) {
@media (min-width: 512px) {
div.file-preview-card-group ul {
gap: var(--spacing-100);
grid-template-columns: repeat(4, 1fr);
}
}
@media (min-width: 768px) {
div.file-preview-card-group ul {
gap: var(--spacing-200);
grid-template-columns: repeat(5, 1fr);
}
}
@media (min-width: 1024px) {
div.file-preview-card-group ul {
gap: var(--spacing-200);
grid-template-columns: repeat(7, 1fr);
}
}
@media (min-width: 1280px) {
div.file-preview-card-group ul {
gap: var(--spacing-200);
grid-template-columns: repeat(9, 1fr);
}
}
@media (min-width: 1440px) {
div.file-preview-card-group ul {
gap: var(--spacing-200);
grid-template-columns: repeat(10, 1fr);
}
}
@media (min-width: 1680px) {
div.file-preview-card-group ul {
gap: var(--spacing-200);
grid-template-columns: repeat(12, 1fr);
}
}
@media (min-width: 1920px) {
div.file-preview-card-group ul {
gap: var(--spacing-200);
grid-template-columns: repeat(14, 1fr);
}
}
}
@container file-preview-cards-container (inline-size >= 512px) {
div.file-preview-card-group ul {
gap: var(--spacing-100);
grid-template-columns: repeat(4, 1fr);
}
}
@container file-preview-cards-container (inline-size >= 768px) {
div.file-preview-card-group ul {
gap: var(--spacing-200);
grid-template-columns: repeat(5, 1fr);
}
}
@container file-preview-cards-container (inline-size >= 1024px) {
div.file-preview-card-group ul {
gap: var(--spacing-200);
grid-template-columns: repeat(7, 1fr);
}
}
@container file-preview-cards-container (inline-size >= 1280px) {
div.file-preview-card-group ul {
gap: var(--spacing-200);
grid-template-columns: repeat(9, 1fr);
}
}
@container file-preview-cards-container (inline-size >= 1440px) {
div.file-preview-card-group ul {
gap: var(--spacing-200);
grid-template-columns: repeat(10, 1fr);
}
}
@container file-preview-cards-container (inline-size >= 1680px) {
div.file-preview-card-group ul {
gap: var(--spacing-200);
grid-template-columns: repeat(12, 1fr);
}
}
@container file-preview-cards-container (inline-size >= 1920px) {
div.file-preview-card-group ul {
gap: var(--spacing-200);
grid-template-columns: repeat(14, 1fr);
}
}