@use "../../../styles/int.scss";

$scroll-padding: calc((100% - var(--Well-content-width, 100%)) / 2);

.container {
}

.header {
  max-width: var(--Well-content-width, 100%);
  margin-left: auto;
  margin-right: auto;
}

.contests {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc(360px);
  gap: int.$spacing-4;
  align-items: flex-start;
  overflow-x: auto;
  padding-left: $scroll-padding;
  padding-right: int.$spacing-5;

  // leave room for bottom box shadow
  padding-bottom: 8px;
}

.contest {
  padding: int.$spacing-3;
  background: white;

  @include int.shadow($size: "100");
}