/*---------------------- graphic cards start ----------------------*/

.graphic-cards-header {
  text-align: center;
  margin-bottom: 4rem;
}

.graphic-cards-header .title {
  color: #9c3587;
  color: var(--purple-brite);
}

.graphic-cards-wrap {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.graphic-cards-wrap .graphic-card {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 2.5rem;
  padding: 3.5rem 2rem;
}

.graphic-cards-wrap .graphic-card * {
  color: white;
}

.graphic-cards-wrap .graphic-card .card-title {
  margin-bottom: 1rem;
}

.graphic-cards-wrap .card-graphic {
  flex: 0 0 10rem;
}

.graphic-cards-wrap .card-graphic img {
  width: 100%;
}

.graphic-cards-wrap .card-info {
  flex: 0 1 100%;
}

/*** square ***/

.graphic-cards-header.square {
  text-align: left;
}

.graphic-cards-wrap.square {
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  row-gap: 1rem;
  -moz-column-gap: 1.6%;
  column-gap: 1.6%;
}

.graphic-cards-wrap.square .graphic-card {
  gap: 1rem;
  padding: 3rem;
  flex: 0 100%;
}

.graphic-cards-wrap.square .card-info {
  flex: 0 1 100%;
  text-align: center;
}

.graphic-cards-wrap.square .card-info .card-text {
  font-weight: 500;
}

.graphic-cards-wrap .lottie {
  transform: scale(1.2);
}

@media only screen and (min-width: 576px) {
  .graphic-cards-wrap .graphic-card {
    padding: 2.5rem;
  }
}

@media only screen and (min-width: 768px) {
  .graphic-cards-wrap .card-info {
    flex: 1 0;
  }
}

@media only screen and (min-width: 992px) {
  .graphic-cards-wrap.square .card-graphic {
    flex: 0 0 10vw;
    max-width: 10rem;
    justify-self: center;
  }

  .graphic-cards-wrap.square .graphic-card {
    grid-gap: 1rem;
    gap: 1rem;
    flex: 0 32.23%;
    display: grid;
    grid-template-rows: 65% 35%;
    padding: 2rem 2rem 3rem;
  }
}
/*---------------------- graphic cards end ----------------------*/