/*
 * DO NOT EDIT THIS FILE.
 * It's generated automatically by 'yarn build' command.
 * @preserve
 */

.m-card-table {
  display: grid;
  gap: 1rem;
}

@media (min-width: 1025px) {
  .m-card-table {
    grid-template-columns: repeat(auto-fit, minmax(0.0625rem, 71.25rem));
    gap: 1.5rem;
  }
}

.m-card-table__header {
  padding: 1rem;
  color: var(--color-text-stroke-light);
  border-radius: var(--border-radius-6);
  background-color: var(--color-secondary-saint-gobain-blue);
}

.m-card-table--second .m-card-table__header {
  background-color: var(--color-secondary-footer);
}

.m-card-table__table {
  --m-card-table-shadow-degrees: -90deg;
  --m-card-table-shadow-color: var(--color-background-primary);

  position: relative;
}

[class*='h-container--hp-'] .m-card-table__table {
  margin-inline: -1rem;
}

@media (min-width: 1025px) {
  [class*='h-container--hp-'] .m-card-table__table {
    margin-inline: 0;
  }
}

.h-container--bg-secondary .m-card-table__table {
  --m-card-table-shadow-color: var(--color-background-secondary);
}

.m-card-table__table::before,
.m-card-table__table::after {
  position: absolute;
  top: 0;
  width: 1rem;
  height: 100%;
  content: '';
  pointer-events: none;
  background-image: linear-gradient(
    var(--m-card-table-shadow-degrees),
    transparent 0%,
    var(--m-card-table-shadow-color) 100%
  );
}

@media (min-width: 1025px) {
  .m-card-table__table::before,
  .m-card-table__table::after {
    content: none;
  }
}

.m-card-table__table::before {
  left: 0;
}

.m-card-table__table::after {
  --m-card-table-shadow-degrees: 90deg;

  right: 0;
}

.m-card-table__scrollable {
  overflow-x: auto;
  max-width: var(--viewport-width);
  white-space: nowrap;
}

@media (min-width: 1025px) {
  .m-card-table__scrollable {
    overflow: visible;
    white-space: normal;
  }
}

@media (min-width: 1025px) {
  .m-card-table__scrollable-inner {
    overflow: auto;
  }
}