@import "cols.css"; /* ------------------------------------------ DONORS ------------------------------------------ */ .donorsList { margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0; margin-top: 2rem; margin-bottom: 2rem; /* display: flex; flex-wrap: wrap; */ justify-content: center; display: grid; grid-row-gap: 1rem; grid-column-gap: 1rem; grid-auto-flow: row; } .donorsList li { /* flex-basis: var(--base-width); flex-grow: 0; display: flex; align-items: center; */ overflow: hidden; margin: 0; text-align: center; border-width: 0.25rem; } .donorsList li a { display: flex; flex-direction: column; height: 100%; width: 100%; font-size: 0.9em; } .donorsList li a img { width: 100%; display: block; } .donorsList li a img, .donorsList li a .name { width: 100%; } .donorsList li a .name { flex-grow: 1; padding: 1rem 0; text-align: center; display: flex; align-items: center; } .donorsList li a .name span { padding: 0 1em; flex-grow: 1; } @media screen and (min-width: 28.5rem) { .donorsList li:nth-of-type(3n+1) { grid-column: 1; } .donorsList li:nth-of-type(3n+2) { grid-column: 2; } .donorsList li:nth-of-type(3n+3) { grid-column: 3; } } @media screen and (min-width: 42.25rem) { .donorsList li:nth-of-type(5n+1) { grid-column: 1; } .donorsList li:nth-of-type(5n+2) { grid-column: 2; } .donorsList li:nth-of-type(5n+3) { grid-column: 3; } .donorsList li:nth-of-type(5n+4) { grid-column: 4; } .donorsList li:nth-of-type(5n+5) { grid-column: 5; } } @media screen and (min-width: 83.5rem) { @media screen and (min-width: 42.25rem) { .donorsList li:nth-of-type(7n+1) { grid-column: 1; } .donorsList li:nth-of-type(7n+2) { grid-column: 2; } .donorsList li:nth-of-type(7n+3) { grid-column: 3; } .donorsList li:nth-of-type(7n+4) { grid-column: 4; } .donorsList li:nth-of-type(7n+5) { grid-column: 5; } .donorsList li:nth-of-type(7n+6) { grid-column: 6; } .donorsList li:nth-of-type(7n+7) { grid-column: 7; } } }