/*-----------------------------------*\
  #BANNER
\*-----------------------------------*/

.banner { 
  margin: 30px 0; 
}

.slider-container {
  display: flex;
  align-items: center;
  gap: 10px;
  border-radius: var(--border-radius-md);
  overflow: auto hidden;
  scroll-snap-type: inline mandatory;
  overscroll-behavior-inline: contain;
}

.slider-item {
  position: relative;
  min-width: 100%;
  border-radius: var(--border-radius-md);
  overflow: hidden;
  scroll-snap-align: start;
  /* Adjust height to be more flexible initially */
  max-height: 250px; /* Base max height for smaller screens */
}

.slider-item .banner-img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Keeps image covering the area */
  object-position: center; /* Center the image to avoid cropping important parts like faces */
}

.banner-content {
  position: absolute;
  top: 50%;
  left: 20px;
  right: auto;
  transform: translateY(-50%);
  max-width: 300px;
}

.banner-subtitle {
  color: var(--salmon-pink);
  font-size: var(--fs-7);
  font-weight: var(--weight-500);
  text-transform: capitalize;
  letter-spacing: 2px;
  margin-bottom: 10px;
}

.banner-title {
  color: var(--white);
  font-size: var(--fs-1);
  text-transform: uppercase;
  line-height: 1;
  margin-bottom: 10px;
}

.banner-text { 
  display: none; 
}

.banner-btn {
  background: var(--salmon-pink);
  color: var(--white);
  width: max-content;
  font-size: var(--fs-11);
  font-weight: var(--weight-600);
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: var(--border-radius-sm);
  transition: var(--transition-timing);
}

.banner-btn:hover { 
  background: var(--sandy-brown); 
}

/* responsive larger than 480px screen */
@media (min-width: 480px) {
  .slider-item {
    max-height: 300px; /* Slightly taller on small tablets */
  }
  
  .banner-content {
    max-width: 320px;
  }

  .banner-subtitle {
    font-size: 1rem;
  }

  .banner-text {
    display: block;
    color: var(--sonic-silver);
    font-size: 1rem;
    font-weight: var(--weight-500);
    margin-bottom: 10px;
  }
}

/* responsive larger than 768px screen */
@media (min-width: 768px) {
  .slider-item {
    height: 350px; /* Fixed height for larger screens to ensure consistency */
    max-height: none; /* Remove max-height constraint here */
  }

  .banner-content {
    max-width: 380px;
  }

  .banner-subtitle {
    font-size: 1.25rem;
  }

  .banner-text {
    font-size: 1.125rem;
  }

  .banner-btn {
    padding: 7px 20px;
  }
}

/* responsive larger than 1024px screen */
@media (min-width: 1024px) {
  .banner { margin-top: 0; }

  .slider-item { height: 400px; } /* Adjust height for even larger screens */

  .banner-content {
    left: 75px;
    max-width: 400px;
  }

  .banner-subtitle { --fs-7: 1.625rem; }

  .banner-text { --fs-7: 1.375rem; }

  .banner-btn { --fs-11: 0.875rem; }
}

/* responsive larger than 1200px screen */
@media (min-width: 1200px) {
  .slider-item:last-child .banner-img { 
    object-position: center; /* Keep position center for all images */
  }
}

/* responsive larger than 1400px screen */
@media (min-width: 1400px) {
  .slider-item { height: 500px; } /* Even larger screens can have more height */

  .banner-content {
    left: 110px;
    max-width: 460px;
  }
}