.bbd-collections {
  --grid-gap: 12px;
  --resource-list-column-gap: 12px;

  @media screen and (min-width: 750px) {
    --grid-gap: 20px;
    --resource-list-column-gap: 20px;
    --peek-next-slide-size: 0;
  }

  &:has(.resource-list__carousel) {
    @media screen and (max-width: 989px) {
      grid-column: 1 / -1;
    }
  }

  slideshow-arrows {
    z-index: var(--layer-above);

    .slideshow-control {
      line-height: 0;
      border-color: var(--color-background);
      background-color: var(--color-background);

      &[disabled] {
        display: none;
      }
    }
  }
}

.bbd-collections__toggle-wrapper {
  display: flex;
  justify-content: center;
}

.bbd-collections__toggle {
  position: relative;
  display: flex;
  margin-inline: var(--margin-lg);
  margin-block-end: var(--margin-2xl);
  padding: var(--padding-2xs);
  background-color: var(--color-selected-variant-background);
}

.bbd-collections__toggle-button {
  position: relative;
  padding: var(--padding-sm) var(--padding-lg);
  border: none;
  cursor: pointer;
  background-color: transparent;
  transition: background-color var(--animation-speed-slow) ease-in-out;

  &.is-active {
    background-color: var(--color-border);
  }
}

.bbd-collections__grid {
  gap: var(--grid-gap);
  height: auto;
  margin-block-end: var(--margin-lg);

  &[hidden] {
    display: none;
  }
}

.bbd-collections__grid--layout-grid {
  display: grid;
  grid-template-columns: repeat(var(--columns-mobile, 2), 1fr);

  @media screen and (min-width: 750px) {
    grid-template-columns: repeat(var(--columns-tablet, 3), 1fr);
  }

  @media screen and (min-width: 990px) {
    grid-template-columns: repeat(var(--columns-desktop, 5), 1fr);
  }
}

.resource-list__carousel--center {
  --peek-next-slide-size: var(--page-margin);

  slideshow-slides {
    scroll-snap-type: x mandatory;
    scroll-padding-inline: calc(var(--resource-list-column-gap) / 2);

    @media screen and (max-width: 989px) {
      &::before,
      &::after {
        content: '';
        flex: 0 0 0;
      }
    }
  }

  .resource-list__slide {
    scroll-snap-align: center;

    --slide-width: calc(
      (
          100% - (var(--resource-list-column-gap) * (var(--columns-mobile, 2) - 1)) - var(--peek-next-slide-size, 0px) *
            2
        ) /
        var(--columns-mobile, 2)
    );
    width: var(--slide-width);

    @media screen and (max-width: 749px) {
      max-width: var(--slide-width-max);
    }

    @media screen and (min-width: 750px) and (max-width: 989px) {
      --slide-width: calc(
        (
            100% - (var(--resource-list-column-gap) * (var(--columns-tablet, 3) - 1)) -
              var(--peek-next-slide-size, 48px) * 2
          ) /
          var(--columns-tablet, 3)
      );
    }

    @media screen and (min-width: 990px) {
      --slide-width: calc(
        (100% - (var(--resource-list-column-gap) * (var(--columns-desktop, 5) - 1)) - 0px) / var(--columns-desktop, 5)
      );
    }
  }
}