.tilted-carousel-section {
  overflow: hidden;
  color: rgb(var(--color-text));
  background: rgb(var(--color-background));
}

.tilted-carousel__inner--full { width: 100%; }

.tilted-carousel__header {
  display: flex;
  align-items: center;
  justify-content: var(--tilted-title-alignment, center);
  text-align: var(--tilted-title-alignment, center);
  margin-bottom: 48px;
}

.tilted-carousel__title {
  width: 100%;
  color: rgb(var(--color-text));
  font-weight: 600;
}

.tilted-carousel {
  overflow: visible;
}

.tilted-carousel__track {
  display: grid !important;
  grid-auto-columns: calc((100% - var(--tilted-gap) * (var(--tilted-desktop-columns) - 1)) / var(--tilted-desktop-columns));
  grid-auto-flow: column;
  gap: var(--tilted-gap);
  width: calc(100% + var(--page-padding) * 2);
  margin-inline: calc(-1 * var(--page-padding));
  padding-block: 44px calc(var(--tilted-even-offset, 30px) + 56px);
  padding-inline: 0;
  scroll-padding-inline: 0;
  overflow-x: auto !important;
  overflow-y: hidden !important;
}

.tilted-carousel-card {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: var(--tilted-card-ratio, 4 / 3);
  overflow: hidden;
  color: rgb(var(--color-text));
  text-decoration: none;
  border: var(--tilted-border-width, 5px) solid rgb(var(--color-button-secondary-background, 255 255 255));
  border-radius: var(--tilted-radius, 16px);
}

.tilted-carousel-card:nth-child(odd) { transform: rotate(calc(-1 * var(--tilted-angle, 6deg))); }
.tilted-carousel-card:nth-child(even) { transform: rotate(var(--tilted-angle, 6deg)) translateY(var(--tilted-even-offset, 30px)); }

.tilted-carousel-card img,
.tilted-carousel-card svg {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tilted-carousel-card__label {
  position: absolute;
  inset-inline-start: 18px;
  inset-block-end: 16px;
  z-index: 2;
  color: rgb(var(--color-text));
  font-size: 30px;
  font-weight: 600;
  line-height: 1.2;
}

.tilted-carousel-card::after {
  position: absolute;
  inset: 50% 0 0;
  content: "";
  background: linear-gradient(transparent, rgb(0 0 0 / 55%));
}

.tilted-carousel__button {
  position: absolute;
  inset-block-start: -91px;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  color: rgb(var(--color-button-secondary-text));
  background: rgb(var(--color-button-secondary-background));
  border: 1px solid rgb(var(--color-button-secondary-border));
  border-radius: 50%;
}

.tilted-carousel__button:disabled {
  opacity: 0.45;
  cursor: default;
}
.tilted-carousel__button--previous { inset-inline-end: 56px; }
.tilted-carousel__button--previous svg { transform: rotate(180deg); }
.tilted-carousel__button--next { inset-inline-end: 0; color: rgb(var(--color-button-text)); background: rgb(var(--color-button-background)); }

@media (min-width: 960px) {
  .tilted-carousel__inner--full .tilted-carousel__button--previous {
    inset-inline-end: max(56px, calc((100% - var(--page-width)) / 2 + 56px));
  }

  .tilted-carousel__inner--full .tilted-carousel__button--next {
    inset-inline-end: max(0px, calc((100% - var(--page-width)) / 2));
  }
}

.tilted-carousel__progress {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-block-start: var(--carousel-pagination-spacing, 24px);
}

.tilted-carousel__progress button {
  width: 8px;
  height: 8px;
  padding: 0;
  appearance: none;
  background: rgb(var(--color-button-secondary-background));
  border: 0;
  border-radius: 999px;
  opacity: 0.4;
  cursor: pointer;
  transition: width 0.2s ease, opacity 0.2s ease, background-color 0.2s ease;
}

.tilted-carousel__progress button[aria-current="true"] {
  width: 24px;
  background: rgb(var(--color-button-background));
  opacity: 1;
}

@media (max-width: 959px) {
  .tilted-carousel__header {
    margin-bottom: 20px;
  }
  .tilted-carousel__title { font-size: 28px; }
  .tilted-carousel__track {
    grid-auto-columns: calc((100% - var(--tilted-gap)) / var(--tilted-mobile-columns));
    gap: 14px;
    width: calc(100% + var(--page-padding) * 2);
    margin-inline: calc(-1 * var(--page-padding));
    padding-inline: var(--page-padding);
    scroll-padding-inline: var(--page-padding);
    padding-block: 28px calc(var(--tilted-even-offset, 30px) + 36px);
    overflow-x: auto !important;
  }
  .tilted-carousel-card__label { font-size: 18px; }
}