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

.container {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: int.$spacing-2;
}

.contests {
  display: grid;
  gap: int.$spacing-4;
  align-items: flex-start;
  grid-template-columns: repeat(auto-fit, minmax(256px, 1fr));

  &.overflow {
    display: flex;
    overflow-x: scroll;
    padding-left: int.$spacing-2;
    padding-top: int.$spacing-2;
    padding-bottom: int.$spacing-3;
  }
}

.overflow .contest {
  min-width: 280px;
}

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

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