.card-section {
  --card-row-alignment: center;
  --card-alignment: flex-start;
  --card-column-count: 1;
  --card-gap: clamp(1rem, 4vw, 2rem);
  --card-media-aspect-ratio: 4 / 3;
  --card-padding: clamp(1rem, 3vw, 1.6rem);
  --card-section-heading-color: rgb(var(--color-foreground));
  --card-shadow: none;
  --card-shadow-hover: 0 4px 35px -5px rgb(0, 0, 0, .1);
}

.card-section__heading {
  color: var(--card-section-heading-color);
  flex: 1 100%;
  margin-bottom: .5em;
}

.cards {
  --card-gap-clear: calc(var(--card-gap) * (var(--card-column-count) - 1));
  display: flex;
  flex-flow: row wrap;
  gap: var(--card-gap);
  justify-content: var(--card-row-alignment);
}
/*
@media (min-width: 650px) {
  .cards {
    --card-column-count: 2;
  }
}

@media (min-width: 990px) {
  .cards {
    --card-column-count: 3;
  }
}

@media (min-width: 1500px) {
  .cards {
    --card-column-count: 5;
  }
}
*/
.card {
  border: var(--card-border);
  border-radius: var(--card-radius);
  box-shadow: var(--card-shadow);
  display: flex;
  flex-basis: calc((100% - var(--card-gap-clear)) / var(--card-column-count));
  flex-flow: column;
  /* overflow: hidden; */
  position: relative;
  transition: .2s all; 
}

.card:hover {
   box-shadow: var(--card-shadow-hover);
}

.card:before {
  border-radius: var(--card-radius);
  content: '';
  height: 100%;
  left: 0;
  opacity: 0;
  position: absolute;
  top: 0;
  transition: .2s opacity;
  width: 100%;
}

.card:hover::before {
  opacity: 1;
}

.js .cards[data-mh-animation] {
  will-change: auto!important;
}

.js .cards[data-mh-animation] .card {
  opacity: 0;
}

.cards.animated .card {
  animation: var(--card-animation) 1s cubic-bezier(0.46, 0.52, 0.09, 1.01) forwards;
  animation-delay: calc(var(--card-animation-delay));
}

.card a:not(.button) {
  color: inherit;
}

.card--has-link:hover {
  box-shadow: var(--card-shadow-hover);
  transition: all .2s ease;
}

.card .bg, 
.card .bg__img {
  border-radius: var(--card-radius);
}

.card__image {
  aspect-ratio: var(--card-media-aspect-ratio);
  border-radius: var(--card-radius);
  display: block;
  object-fit: cover;
  transition: filter .2s, transform .2s;
}

{#.card__image:not(.card__image--padded) {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  margin: 10px auto;
  max-width: calc(100% + var(--card-padding) * 2);
}#}

.card__link {
  color: inherit;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}

.card__link:hover,
.card__link:focus {
  opacity: 1;
}

.card--has-link img {
  transition: .1s transform ease;
}

.card--has-link:hover img,
.card--has-link:focus-within img {
  transform: scale(1.1) rotate(3deg);
  transition: .6s transform ease;
}

.card__content {
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: var(--card-alignment);
  padding: var(--card-padding);
  position: relative;
  width: 100%;
}

.card__link:focus .card__content {
  transform: scale(.9);
  outline: none;
  box-shadow: 0 0 0 6px rgba(var(--rgb-secondary), 1);
}

.card__sub-title {
  display: block;
  font-size: .9em;
  opacity: .8;
}

.card__title {
  display: block;
  line-height: 1;
  text-decoration: none;
}

.card__title:not(.jumbo):not(.h1):not(.h2):not(.h3):not(.h4):not(.h5) {
  font-size: 1.5em;
  font-weight: inherit;
}

.card__text {
  margin: 1em 0;
}

.card__text p {
  line-height: inherit;
}

.card__text p:first-child,
.card__text p:last-child {
  margin: 0;
}

.card__icon {
  align-self: var(--card-icon-alignment);
  background: var(--card-icon-background);
  border-radius: var(--card-icon-border_radius);
  height: var(--card-icon-size);
  margin-bottom: 1em;
  object-fit: contain;
  padding: var(--card-icon-padding);
  transition: all .2s;
  width: var(--card-icon-size);
}

.card__ctas {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.text-center .card__ctas {
  margin-left: auto;
  margin-right: auto;
}

.text-right .card__ctas {
  margin-left: auto;
}

/**************iPad Landscape***************/
@media only screen and ( max-width: 1024px ) and (min-width: 986px){
 
}

/********************************************//**************iPad Portrait***************/
@media only screen and (max-width: 985px) and (min-width: 768px){

}
/**********************************//***************iPhone Landscape*************/
@media only screen and (max-width: 767px) and (min-width: 480px){


}
/*******************************************/
/***************iPhone Portrait**************/
@media only screen and (max-width: 479px) and (min-width: 220px){
.card {
    flex-basis: 45% !important;
  }
}