/* cards */
.card-listing--layout {
  --item-per-col: 3;
  --grid-gap: var(--sp6);
  --card-padding: var(--sp9) var(--sp8);
  --card-img-width: 170px;
  --card-content-gap: var(--sp6);
  display: grid;
  grid-template-columns: repeat(var(--item-per-col), 1fr);
  grid-gap: var(--grid-gap);
  position: relative;
  z-index: 1;
}

.item-count-2,
.item-count-1 {
  --item-per-col: 2;
}

.card--title {
  margin-bottom: var(--sp6);
}

.card-listing--layout .card--content {
  display: grid;
  grid-template-columns: var(--card-img-width) 1fr;
  grid-gap: var(--card-content-gap);
}

.card-listing--layout .card--content:not(:has(.card--image-wrap)) {
  grid-template-columns: 1fr;
}

.card--image {
  max-width: 100%;
  border: 1px solid var(--border-clr3);
}

.card--details {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--sp5);
}

.card--links {
  display: flex;
}

.doc--link {
  line-height: 1;
}

.card--downloads {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  margin-top: 12px;
}

.card--description .body-text-field {
  color: var(--section-card-body-clr, var(--clr-gray-dark));
}

.card--item .text-icon-clr1 {
  --text-color: var(--section-icon-text-clr2, var(--clr-gray-dark));
}

.card--item a[href="#"],
.card--item a[href=""] {
  pointer-events: none;
}

.card-with-boxshadow .card--item {
  box-shadow: 0 0 13px 2px rgba(0, 0, 0, 0.075);
}

/* card--style2 (keythemes resources)  */
.card--style2 {
  --card-padding: var(--sp8) var(--sp8);
}

.card--style2 .card--right {
  justify-content: flex-start;
}

.card--style2 .card--title {
  margin-bottom: calc(var(--sp3) - 3px);
}

.card--style2 .card--item>.card--title {
  margin-bottom: calc(var(--sp4) + 1px);
}


/* list */
.card-listing--layout.list-style {
  --item-per-col: 1;
  gap: 30px;
}

.card-listing--layout.list-style .card--details {
  justify-content: flex-start;
  gap: 0;
}

.card-listing--layout.list-style .card--title {
  margin-bottom: calc(var(--sp3) + 2px);
}

.card-listing--layout.list-style .card--downloads {
  margin-top: var(--sp9);
}

/* card--style3 comes in between the body content(adlab page) */
.card--style3 {
  --card-content-gap: var(--sp8);
}

.card--style3 .card--item {
  --card-img-width: 155px;
  padding: 0;
  background: linear-gradient(to bottom,
      rgba(0, 0, 0, 0.4) 0%,
      rgba(0, 0, 0, 0.05) 100%);
  border-radius: 0;
}

.card--style3 .card--image {
  border: none;
  min-width: 100%;
}

.card--style3 .card--title {
  margin-bottom: calc(var(--sp6) + 3px);
}

.card--style3 .card--content .card--title {
  color: var(--clr-primary);
}

.card--style3 a.card--title:hover {
  text-decoration: underline;
}

.card--style3 .card--details {
  justify-content: center;
  gap: 0;
}

.card--style3 .card--item .card--link {
  color: var(--clr-white);
  font-size: 12px;
}

.card--style3 .card--link:not(:hover):before {
  --border-color: var(--clr-white);
}

.card--style3 .card--link:not(:hover):after {
  filter: brightness(100);
}

/* .card--style4 (webinars) */
.card--style4 {
  --image-h: 214px;
  --card-padding: var(--sp8);
}

.card--style4 .card--content {
  grid-template-columns: 1fr;
}

.card--style4 .card--image {
  height: var(--image-h);
  object-fit: cover;
  object-position: left center;
  min-width: 100%;
}

.card--style4 .card--title {
  --icon-width: 34px;
  --icon-height: 34px;
  --icon-text-gap: 20px;
  margin-bottom: 0;
}

.card--style4 .card--title:after {
  background-size: var(--icon-width) auto;
}