.carousel-container {
 position: relative;
 width: 100%;
 max-width: 900px;
 margin: 0 auto;
 padding: 20px 0;
}

.carousel-wrapper {
 overflow: hidden;
 border-radius: 24px;
 box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.carousel-track {
 display: flex;
 transition: transform 0.4s ease;
 gap: 15px;
 padding: 0px;
}

.carousel-slide {
 flex: 0 0 calc(66.666% - 15px);
 border-radius: 24px;
 overflow: hidden;
}

.carousel-slide img {
 width: 100%;
 height: 100%;
 object-fit: cover;
}

.carousel-btn {
 position: absolute;
 top: 50%;
 transform: translateY(-50%);
 width: 40px;
 height: 40px;
 background: white;
 border: none;
 border-radius: 50%;
 color: black;
 font-size: 20px;
 cursor: pointer;
 z-index: 2;
 box-shadow: 0 2px 8px rgba(0,0,0,0.15);
 display: flex;
 align-items: center;
 justify-content: center;
}

.prev-btn { 
 left: -20px;
}

.next-btn { 
 right: -20px;
}

.prev-btn::before {
 content: "❮";
 color: black;
}

.next-btn::before {
 content: "❯"; 
 color: black;
}

@media (max-width: 768px) {
 .carousel-btn {
   width: 32px;
   height: 32px;
   font-size: 16px;
 }
 
 .prev-btn { left: -16px; }
 .next-btn { right: -16px; }
}


.T75of.B5GQxf {
 display: block;
 border-radius: 24px;
}

@media screen and (max-width: 768px) {
 .carousel-container {
   padding: 10px 0;
 }

 .carousel-slide {
   flex: 0 0 calc(85% - 10px);
 }

 .carousel-track {
   gap: 10px;
   padding: 0px;
 }
}

@media screen and (max-width: 480px) {
 .carousel-slide {
   flex: 0 0 calc(95% - 8px);
 }

 .carousel-track {
   gap: 8px;
   padding: 0px;
 }

 .carousel-wrapper {
   border-radius: 16px;
 }

 .carousel-btn {
   width: 28px;
   height: 28px;
   font-size: 14px;
 }
}