/* ==============
   FEATURE SLIDER
   ==============  */
 
.feature-slider {
  width: 100%;
  margin: 0 auto; }


/* Navigation */
.feature-slider__nav {
  width: fit-content;
  margin: 0 auto;
  border-radius: 20em;
  border: 2px solid var(--color__green__1);
  margin-bottom: var(--spacing__md); }


.feature-slider__nav nav ul {
  padding: 5px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .5em .1em ; }
  
.feature-slider__nav a {
  cursor: pointer;
  border: 2px solid transparent;
  display: block;
  padding: .5em 1em;
  white-space: nowrap;
  background: var(--color__white);
  border-radius: 2rem;
  transition: background 0.2s, border 0.2s; }


.feature-slider__nav li.active a {
  border-color: var(--color__green__1);
  background: var(--color__green__tint); }


  /* Over flow version */
.has__overflow .feature-slider__nav {
  width: auto;
  border-radius: 20em;
  border: none; }  

.has__overflow .feature-slider__nav nav ul {
  min-width: 0;
  gap: .5em .4em; }
    
.has__overflow .feature-slider__nav a {
  border: 2px solid var(--color__green__1);
  white-space: normal; }
  

  
/* Slides */
.feature-slider__slides {
  max-width: var(--layout__width__md);
  margin: 0 auto;
  width: 100%;
  text-align: left;  }

.feature-slider__slide {
  width: 100%;
  display: flex;
  gap: var(--spacing__sm);
  align-items: stretch; }

.feature-slider__slide__content {
    width: calc(60% - (var(--spacing__sm) / 2)); }
  
.feature-slider__slide__image {
  width: calc(40% - (var(--spacing__sm) / 2)); }



/* .feature-slider__slide__content {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0; } */

.feature-slider__slide__content .footer {
  margin-top: var(--spacing__sm); }
   
/* .feature-slider__slide__image {
  flex: 1 1 0;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0; } */

.feature-slider__slide__image {
  position: relative;  
   overflow: hidden;  }

.feature-slider__slide__image img {
  position: absolute;
  top: 50%;
  left: 50%;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  transform: translate(-50%, -50%);
  object-fit: contain; }

/* Vertical Center */
@media (min-width: 800px) {
  
  .feature-slider__slide__image.top img {
    top: 0;
    transform: translate(-50%, 0); }

}



@media (max-width: 800px) {
  
  .feature-slider__slide {
    flex-wrap: wrap; }
  
  .feature-slider__slide__content,
  .feature-slider__slide__image {
    width: 100%; }
  
  .feature-slider__slide__content .footer {
      text-align: center; }
   
   .feature-slider__slide__image img {
      position: relative;
      top: 0;
      left: 0;
      transform: none;  }
   
}