/***********
*************** RELEASES CAROUSEL
*****************************************/

/*************************************************************         CAROUSEL SHELL          ********************/

/* #region CAROUSEL SHELL */

.releases-carousel{
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 12px;
  align-items: center;
}

/* #endregion CAROUSEL SHELL */


/*************************************************************         CAROUSEL VIEWPORT          ********************/

/* #region CAROUSEL VIEWPORT */

.releases-viewport{
  overflow: hidden;
}

.releases-viewport::-webkit-scrollbar{
  display: none;
}

.releases-track{
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 2 * 16px) / 3);
  gap: 16px;
  padding: 4px;
  will-change: transform;
}

/* #endregion CAROUSEL VIEWPORT */


/*************************************************************         CAROUSEL CONTROLS          ********************/

/* #region CAROUSEL CONTROLS */

.carousel-btn{
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,0.04);
  color: var(--text);
  display: grid;
  place-items: center;
  cursor: pointer;
}

.carousel-btn:hover{
  background: rgba(255,255,255,0.08);
}

.carousel-btn:disabled{
  opacity: 0.4;
  cursor: not-allowed;
}

/* #endregion CAROUSEL CONTROLS */


/*************************************************************         CAROUSEL RESPONSIVE          ********************/

/* #region CAROUSEL RESPONSIVE */

@media (max-width: 900px){
  .releases-track{
    grid-auto-columns: calc((100% - 1 * 16px) / 2);
  }
}

@media (max-width: 560px){
  .releases-track{
    grid-auto-columns: 100%;
  }
}

/* #endregion CAROUSEL RESPONSIVE */