.dry-card-carousel {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  gap: 32px;
  justify-content: center;
  width: 100%;
  overflow: hidden;

  &__content-wrapper {
    position: relative;
    width: 100%;
  }

  &__content {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: hidden;
    gap: 16px;
    justify-content: center;
    max-width: 100%;
    transition: transform 0.3s ease;

    &::-webkit-scrollbar {
      display: none;
    }

    -ms-overflow-style: none;
    scrollbar-width: none;
  }

  &__buttons {
    display: flex;
    align-items: center;
    gap: 32px;
    width: 100%;

    &--overlay {
      position: absolute;
      top: 50%;
      left: 0;
      right: 0;
      transform: translateY(-50%);
      justify-content: space-between;
      padding: 0 20px;
      pointer-events: none;
    }

    &--bottom {
      position: relative;
      justify-content: center;
      margin-top: 20px;
    }
  }

  &__button {
    display: flex;
    justify-content: center;
    align-items: center;
    border: none;
    padding: 10px;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.2s ease;

    .dry-card-carousel__buttons--overlay & {
      pointer-events: auto;
    }

    &:hover {
      transform: scale(1.1);
    }
    &:active {
      transform: scale(0.95);
    }

    &--disabled {
      cursor: default;
      opacity: 0.5;
      &:hover,
      &:active {
        transform: scale(1);
      }
    }

    &--forward,
    &--back {
      height: 40px;
      width: 40px;
      min-height: 40px;
      min-width: 40px;
      border-radius: 20px;
      border: 1px solid var(--Gray-200, #eaecf0);
      background: rgba(255, 255, 255, 0.9);
      backdrop-filter: blur(4px);
    }
  }

  &__card {
    flex-shrink: 0;
    transition: transform 0.3s ease;
  }

  &__bubbles {
    display: flex;
    gap: 8px;
    margin-top: 16px;
  }

  &__bubble {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: #d9d9d9;
    border: unset;
    transition: background-color 0.3s ease;
    cursor: pointer;

    &:hover {
      background-color: #bfbfbf;
    }

    &--active {
      background-color: #002b7a;
    }
  }
}

// ========================================
// Media Queries
// ========================================
// Adjusting desktop screens
@media (min-width: 1024px) {
  .dry-card-carousel {
    &__buttons {
      gap: 40px; // Increased gap between buttons for larger screens
    }
  }
}

// Adjusting for tablet screens (between small tablets and desktops)
@media (max-width: 1023px) {
  .dry-card-carousel {
    &__content {
      gap: 12px;
    }

    &__buttons {
      gap: 32px;
    }

    &__button {
      &--forward,
      &--back {
        height: 36px;
        width: 36px;
        min-height: 36px;
        min-width: 36px;
      }
    }
  }
}

// Adjusting for smaller screens (small tablets and mobile)
@media (max-width: 768px) {
  .dry-card-carousel {
    gap: 24px;

    &__content {
      gap: 10px;
    }

    &__buttons {
      gap: 24px;
    }

    &__button {
      &--forward,
      &--back {
        height: 32px;
        width: 32px;
        min-height: 32px;
        min-width: 32px;
      }
    }

    &__bubble {
      width: 10px;
      height: 10px;
    }
  }
}

// Adjusting for smaller screens (mobile)
@media (max-width: 480px) {
  .dry-card-carousel {
    gap: 20px;

    &__content {
      gap: 8px;
    }

    &__buttons {
      gap: 20px;
    }

    &__button {
      &--forward,
      &--back {
        height: 28px;
        width: 28px;
        min-height: 28px;
        min-width: 28px;
      }
    }

    &__bubble {
      width: 8px;
      height: 8px;
    }
  }
}