.grid {
  display: grid;
  grid-gap: var(--si-space-28) 0;
  gap: var(--si-space-28) 0;
}
@media (min-width: 768px) {
  .grid {
    gap: var(--si-space-28);
  }
}
@media (min-width: 1024px) {
  .grid {
    gap: var(--si-space-40);
  }
}
@supports (display: contents) {
  .grid .grid__item {
    display: contents;
  }
}
.grid.grid--gap-none {
  gap: 0 !important;
}
.grid.grid--gap-small {
  gap: var(--si-space-12) 0;
}
@media (min-width: 768px) {
  .grid.grid--gap-small {
    gap: var(--si-space-12);
  }
}
.grid.grid--gap-large {
  gap: var(--si-space-28) 0;
}
@media (min-width: 768px) {
  .grid.grid--gap-large {
    gap: var(--si-space-40);
  }
}
.grid.grid--2-column {
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 768px) {
  .grid.grid--2-column {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.grid.grid--3-column {
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 768px) {
  .grid.grid--3-column {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.grid.grid--4-column {
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 768px) {
  .grid.grid--4-column {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 1024px) {
  .grid.grid--4-column {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
.grid.grid--5-column {
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 768px) {
  .grid.grid--5-column {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (min-width: 1440px) {
  .grid.grid--5-column {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}
.grid.grid--6-column {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 768px) {
  .grid.grid--6-column {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (min-width: 1440px) {
  .grid.grid--6-column {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}

ul.grid {
  margin: 0;
  padding: 0;
}

.listing {
  list-style: none;
  margin: 0;
  padding: 0;
}
.listing:not(.listing--no-border) > *:not(:last-child) {
  border-block-end: 2px solid var(--si-color-medium-gray);
  padding-block-end: var(--si-space-40);
}
.listing:not(.listing--no-border) > *:not(:first-child) {
  border-block-start: 2px solid var(--si-color-medium-gray);
  margin-block-start: -2px;
  padding-block-start: var(--si-space-40);
}
.listing.listing--top-border > *:first-child {
  border-block-start: 2px solid var(--si-color-medium-gray);
  padding-block-start: var(--si-space-40);
}

.grid-listing__toggle-button-wrapper .button {
  display: none;
}
@media (min-width: 768px) {
  .grid-listing__toggle-button-wrapper .button {
    display: inline-flex;
  }
}
.grid-listing__toggle-button-wrapper .hide-text .text {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  word-wrap: normal;
}
.grid-listing__toggle-button-wrapper .grid-listing__toggle-button.active {
  background-color: var(--si-color-light-gray);
  color: var(--si-color-dark-blue);
}
.grid-listing__toggle-button-wrapper .grid-listing__toggle-button.active .icon {
  background-color: var(--si-color-dark-blue);
}

ul.grid-listing {
  margin-block-start: var(--si-space-28);
}
ul.grid-listing.listing {
  display: block;
}