.user-advertisement-section .carousel {
  flex-grow: 1;
  display: flex;
  width: 100%;
  aspect-ratio: 16 / 9;
  position: relative;
}

.user-advertisement-section .carousel a {
  display: flex;
  width: 100%;
}

.user-advertisement-section .carousel img.carousel-item {
  width: 100% !important;
  max-width: 100vw !important;
  display: none;
  object-fit: cover;
}

.user-advertisement-section .carousel img.active {
  display: block;
}

.carousel-arrows {
  height: 100%;
  display: flex;
  position: absolute;
  z-index: 10;
}

.carousel-arrows button {
  background: transparent;
  border: 0;
  margin: 0;
  padding: 0;
}

.carousel-arrows button > * {
  display: block;
  width: 40px;
  height: 40px;
  margin: 3px;
}

.carousel-arrows:has(#carousel-arrow-next) {
  right: 0px;
  margin-right: 10px;
}

.carousel-arrows:has(#carousel-arrow-prev) {
  left: 0px;
  margin-left: 10px;
}

.user-advertisement-section .media-count-icons {
  position: absolute;
  bottom: 5px;
  right: 15px;
  display: flex;
  gap: 8px;
  overflow: visible;
}

.user-advertisement-section .media-count-icons > * {
  overflow: visible;
}
.user-advertisement-section .media-count-icons > *:has(img) {
  position: relative;
  background: #66666630;
  padding: 4px;
  border-radius: 8px;
  width: 20px;
  height: 20px;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.user-advertisement-section .media-count-icons img{
  height: 14px !important;
  width: 14px !important;
}

.user-advertisement-section .media-count-icons > *::after {
  content: "0";
  position: absolute;
  top: -10px;
  right: -8px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background-color: #007bff;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 9px;
  color: white;
}

@media (min-width: 1024px) {
  .user-advertisement-section .carousel {
    flex-grow: 2;
    max-width: 20vw;
  }

  .carousel .adv-status,
  .carousel .adv-vetrina {
    font-size: 16px;
  }
}