.participants-grid-view {
  display: grid;
  grid-template-columns: 1fr 20fr 1fr;
  grid-template-rows: 1fr;
  aspect-ratio: 16/9;
}

.participants-grid-view__button {
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  cursor: pointer;
  background: white;
}

.participants-grid-view__button:disabled {
  cursor: auto;
}

.participants-grid-view__previous-button {
  grid-area: 1 / 1 / 2 / 2;
}

.participants-grid-view__next-button {
  grid-area: 1 / 3 / 2 / 4;
}

.participants-grid-view__grid {
  display: grid;
  grid-area: 1 / 2 / 2 / 3;
  row-gap: 0.25rem;
  column-gap: 0.5rem;
  grid-auto-rows: 1fr;
}

.participants-grid-view__grid--1-column {
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
}

.participants-grid-view__grid--2-columns {
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: 1fr;
}

.participants-grid-view__grid--3-columns {
  grid-template-columns: repeat(3, 1fr);
}

.participants-grid-view__grid--4-columns {
  grid-template-columns: repeat(4, 1fr);
}

.participants-grid-view__grid--5-columns {
  grid-template-columns: repeat(5, 1fr);
}

@mixin participants-grid-view__button-icon {
  background-size: 50%;
  background-repeat: no-repeat;
  background-position: center center;
  height: 2rem;
  width: 2rem;
}

.participants-grid-view__next-button-icon {
  @include participants-grid-view__button-icon;
  background-image: url('../../../../assets/right-arrow.png');
}

.participants-grid-view__previous-button-icon {
  @include participants-grid-view__button-icon;
  background-image: url('../../../../assets/left-arrow.png');
}
