portal-sense/src/components/@shared/PartnerLogos/index.module.css at afba7068baa2df73d81e60635c785078c8f50f66 · deltaDAO/portal-sense · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
.container {
  --grid-layout-gap: calc(var(--spacer) / 2);
  --grid-column-count: 4;
  --grid-item-min-width: 10rem;

  --gap-count: calc(var(--grid-column-count) - 1);
  --total-gap-width: calc(var(--gap-count) * var(--grid-layout-gap));
  --grid-item-max-width: calc(
    (100% - var(--total-gap-width)) / var(--grid-column-count)
  );

  display: grid;
  grid-template-columns: repeat(
    auto-fill,
    minmax(max(var(--grid-item-min-width), var(--grid-item-max-width)), 1fr)
  );
  grid-gap: var(--grid-layout-gap);
  justify-items: center;
  padding: var(--spacer) 0;
}

.logo {
  margin: 0;
  height: 3rem;
  object-fit: contain;
}

.logo:last-child:nth-child(4n + 1) {
  grid-column: 2 / span 2;
}

.logo:nth-last-child(2):nth-child(4n + 1),
.logo:last-child:nth-child(4n + 2) {
  grid-column: span 2;
}

.title {
  margin-top: var(--spacer);
}