/******************************************************************

Stylesheet: Block Style
Block: Cards

******************************************************************/
/******************************************************************

Stylesheet: Variables

Here is where we declare all our variables like colors, fonts,
base values, and defaults. We want to make sure this file ONLY
contains variables that way our files don't get all messy.
No one likes a mess.

******************************************************************/
/*********************
WRAPS
*********************/
/*********************
MEDIA QUERIES
*********************/
/*********************
COLORS
*********************/
/*********************
FONT FAMILY
*********************/
/*********************
FONT SIZES
*********************/
/*********************
PADDINGS
*********************/
/*********************
TRANSITIONS
*********************/
.sp-cards__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--wp--preset--spacing--16);
  padding: var(--wp--preset--spacing--64) var(--wp--preset--spacing--32);
  border: 2px dashed var(--wp--preset--color--gray);
  border-radius: 0.5em;
  color: #7b7b7b;
  text-align: center;
}
.sp-cards__empty svg {
  opacity: 0.5;
}
.sp-cards__empty p {
  margin: 0;
  font-weight: 600;
}
.sp-cards__empty span {
  margin: 0;
  font-size: var(--wp--preset--font-size--sp-small);
  opacity: 0.75;
}

.sp-cards-grid {
  display: grid;
  gap: var(--wp--preset--spacing--32);
}

.sp-card {
  display: flex;
  flex-direction: column;
  border-radius: 0.3em;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  background: var(--wp--preset--color--white);
  border-radius: 7px;
  box-shadow: 0 0 0 1px var(--wp--preset--color--gray);
  padding: 1em;
}
.sp-card.sp-card--linked,
.sp-card a.sp-card {
  cursor: pointer;
}
.sp-card.sp-card--linked:hover .sp-card__media img,
.sp-card a.sp-card:hover .sp-card__media img {
  transform: scale(1.03);
  filter: brightness(0.85);
}
.sp-card.sp-card--linked:hover .sp-card__body,
.sp-card a.sp-card:hover .sp-card__body {
  background: var(--wp--preset--color--light-blue);
}
.sp-card.sp-card--linked:focus-visible,
.sp-card a.sp-card:focus-visible {
  outline: 2px solid var(--wp--preset--color--accon-blue);
  outline-offset: 2px;
}
.sp-card a {
  cursor: pointer;
}
.sp-card a:hover .sp-card__media img {
  transform: scale(1.03);
  filter: brightness(0.85);
}
.sp-card a:hover .sp-card__body {
  background: var(--wp--preset--color--light-blue);
}
.sp-card a:focus-visible {
  outline: 2px solid var(--wp--preset--color--accon-blue);
  outline-offset: 2px;
}
.sp-card .sp-card__media {
  width: 100%;
  line-height: 0;
  overflow: hidden;
  aspect-ratio: 1/1;
  margin-bottom: 1em;
}
.sp-card .sp-card__media img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain;
  display: block;
  transition: all 0.25s ease-in-out;
}
.sp-card .sp-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--wp--preset--spacing--16);
  flex: 1;
  transition: all 0.25s ease-in-out;
}
.sp-card .sp-card__title {
  margin: 0;
  font-size: var(--wp--preset--font-size--sp-medium);
}
.sp-card .sp-card__description {
  margin: 0;
  font-size: var(--wp--preset--font-size--sp-small);
}