/*=============== VARIABLES CSS ===============*/


/*=============== BASE ===============*/
#repuestos {
  overflow: hidden;
  max-width: 100%;
  margin: auto;
	background: #fff;
}

/*=============== CARD ===============*/
.container-tarjetas {
/*
  display: flex;
  justify-content: center;
*/
}

.card__container {
  padding-block: 4rem;
}

.card__content {
  margin-inline: 1.75rem;
  overflow: hidden;
}

.card__article {
/*  width: 280px;  Remove after adding swiper js */
  overflow: hidden;
	background: #F0F3FA;
	padding: 20px;
}

.card__image {
/*
  position: relative;
  background-color: #eee;
  padding-top: 10px;
  margin-bottom: -.75rem;
*/
}

.card__data {
  padding: 10px 0;
  text-align: center;
}

.card__img {

}

.card__name {
  font-size: 1.2em;
	line-height: 24px;
  color: #003566;
	margin-bottom: 20px;
}

.card__description {
	font-size: 0.9em;
	text-align: left;
}

/* Swiper class */
.swiper-button-prev:after,
.swiper-button-next:after {
  content: "";
}

.swiper-button-prev,
.swiper-button-next {
  width: initial;
  height: initial;
  font-size: 3rem;
  color: #999;
  display: none;
}

.swiper-button-prev {
  left: 0;
}

.swiper-button-next {
  right: 0;
}

.swiper-pagination-bullet {
  background-color: #D5EBED;
  opacity: 1;
}

.swiper-pagination-bullet-active {
  background-color: #0F4395;
}

/*=============== BREAKPOINTS ===============*/
/* For small devices */
@media screen and (max-width: 320px) {
  .card__data {
  }
}

/* For medium devices */
@media screen and (min-width: 768px) {
  .card__content {
    margin-inline: 3rem;
  }

  .swiper-button-next,
  .swiper-button-prev {
    display: block;
  }
}

/* For large devices */
@media screen and (min-width: 1120px) {
  .card__container {
    max-width: 1300px;
  }

  .swiper-button-prev {
    left: -1rem;
  }
  .swiper-button-next {
    right: -1rem;
  }
}