.cards {
  display: grid;
  grid-template-columns: 1fr;
}
.card {
  width: 100%;
  display: flex;
  border-radius: 12px;
}
.card__text {
  display: flex;
  flex-flow: column;
  gap: calc(var(--spacing-base) * 3);
}

{# BACKGROUND COLOR #}
.card.card-bg-first { background-color: var(--first-color); }
.card.card-bg-second { background-color: var(--second-color); }
.card.card-bg-third { background-color: var(--third-color); }
.card.card-bg-fourth { background-color: var(--fourth-color); }
.card.card-bg-fifth { background-color: var(--fifth-color); }
.card.card-bg-first-accent { background-color: var(--first-accent-color); }
.card.card-bg-second-accent { background-color: var(--second-accent-color); }
.card.card-bg-third-accent { background-color: var(--third-accent-color); }
.card.card-bg-fourth-accent { background-color: var(--fourth-accent-color); }
.card.card-bg-fifth-accent { background-color: var(--fifth-accent-color); }
.card.card-bg-dark-gray { background-color: var(--dark-gray-color); }
.card.card-bg-medium-gray { background-color: var(--medium-gray-color); }
.card.card-bg-light-gray { background-color: var(--light-gray-color); }
.card.card-bg-white { background-color: var(--white-color); }

{# COLUMNS #}
@media screen and (min-width: 1200px) {
  .cards-col-4 { grid-template-columns: repeat(4, 1fr); }
  .cards-col-3 { grid-template-columns: repeat(3, 1fr); }
  .cards-col-2 { grid-template-columns: repeat(2, 1fr); }
  .cards-gap-extrasmall { gap: 8px; }
  .cards-gap-small { gap: 12px; }
  .cards-gap-medium { gap: 20px; }
  .cards-gap-large { gap: 28px; }
  .cards-gap-extralarge { gap: 40px; }
}
@media screen and (min-width: 992px) and (max-width: 1200px) {
  .cards-col-4, .cards-col-3 { grid-template-columns: repeat(3, 1fr); }
  .cards-col-2 { grid-template-columns: repeat(2, 1fr); }
  .cards-gap-extrasmall { gap: 8px; }
  .cards-gap-small { gap: 12px; }
  .cards-gap-medium { gap: 20px; }
  .cards-gap-large { gap: 28px; }
  .cards-gap-extralarge { gap: 40px; }
}
@media screen and (min-width: 700px) and (max-width: 992px) {
  .cards-col-4, .cards-col-3, .cards-col-2 { grid-template-columns: repeat(2, 1fr); }
  .cards-gap-extrasmall { gap: 4px; }
  .cards-gap-small { gap: 8px; }
  .cards-gap-medium { gap: 16px; }
  .cards-gap-large { gap: 24px; }
  .cards-gap-extralarge { gap: 32px; }
}
@media screen and (max-width: 700px) {
  .cards-gap-small { gap: 8px; }
  .cards-gap-medium { gap: 16px; }
  .cards-gap-large { gap: 24px; }
  .cards-gap-extralarge { gap: 32px; }
}

{# FLOW #}
@media screen and (min-width: 1200px) {
  .card.card-flow-xl-column { flex-direction: column; }
  .card.card-flow-xl-column-reverse { flex-direction: column-reverse; }
  .card.card-flow-xl-row { flex-direction: row; }
  .card.card-flow-xl-row-reverse { flex-direction: row-reverse; }
  .card.card-flow-xl-row .card__img, .card.card-flow-xl-row-reverse .card__img { max-width: 50%; }
}
@media screen and (min-width: 992px) and (max-width: 1200px) {
  .card.card-flow-md-column { flex-direction: column; }
  .card.card-flow-md-column-reverse { flex-direction: column-reverse; }
  .card.card-flow-md-row { flex-direction: row; }
  .card.card-flow-md-row-reverse { flex-direction: row-reverse; }
  .card.card-flow-md-row .card__img, .card.card-flow-md-row-reverse .card__img { max-width: 50%; }
}
@media screen and (max-width: 992px) {
  .card.card-flow-xs-column { flex-direction: column; }
  .card.card-flow-xs-column-reverse { flex-direction: column-reverse; }
  .card.card-flow-xs-row { flex-direction: row; }
  .card.card-flow-xs-row-reverse { flex-direction: row-reverse; }
  .card.card-flow-xs-row .card__img, .card.card-flow-xs-row-reverse .card__img { max-width: 50%; }
}

{# ALIGN #}
.card-flow-xl-row,
.card-flow-xl-row-reverse { 
  align-items: center; 
}

@media screen and (min-width: 1200px) {
  .card-align-xl-left { text-align: left; }
  .card-align-xl-center { text-align: center; }
  .card-align-xl-right { text-align: right; }
  .card-flow-xl-column.card-align-xl-left, .card-flow-xl-column-reverse.card-align-xl-left { align-items: start; }
  .card-flow-xl-column.card-align-xl-center, .card-flow-xl-column-reverse.card-align-xl-center { align-items: center; }
  .card-flow-xl-column.card-align-xl-right, .card-flow-xl-column-reverse.card-align-xl-right { align-items: end; }
}
@media screen and (min-width: 992px) and (max-width: 1200px) {
  .card-align-md-left { text-align: left; }
  .card-align-md-center { text-align: center; }
  .card-align-md-right { text-align: right; }
  .card-flow-md-column.card-align-md-left, .card-flow-md-column-reverse.card-align-md-left { align-items: start; }
  .card-flow-md-column.card-align-md-center, .card-flow-md-column-reverse.card-align-md-center { align-items: center; }
  .card-flow-md-column.card-align-md-right, .card-flow-md-column-reverse.card-align-md-right { align-items: end; }
}
@media screen and (max-width: 992px) {
  .card-align-xs-left { text-align: left; }
  .card-align-xs-center { text-align: center; }
  .card-align-xs-right { text-align: right; }
  .card-flow-xs-column.card-align-xs-left, .card-flow-xs-column-reverse.card-align-xs-left { align-items: start; }
  .card-flow-xs-column.card-align-xs-center, .card-flow-xs-column-reverse.card-align-xs-center { align-items: center; }
  .card-flow-xs-column.card-align-xs-right, .card-flow-xs-column-reverse.card-align-xs-right { align-items: end; }
}

{# IMAGE #}
.card__icon {
  flex: none;
  width: 60px;
  height: 60px;
  object-fit: cover;
  object-position: center;
}
.card__photo {
  width: 100%;
  height: auto;
  object-fit: cover;
  object-position: center;
  border-radius: 12px;
}

@media screen and (min-width: 1200px) {
  .card__photo.card__img-ratio-xl-16-9 { aspect-ratio: 16 / 9; }
  .card__photo.card__img-ratio-xl-9-16 { aspect-ratio: 9 / 16; }
  .card__photo.card__img-ratio-xl-4-3 { aspect-ratio: 4 / 3; }
  .card__photo.card__img-ratio-xl-3-4 { aspect-ratio: 3 / 4; }
  .card__photo.card__img-ratio-xl-1-1 { aspect-ratio: 1 / 1; }
}
@media screen and (min-width: 992px) and (max-width: 1200px) {
  .card__photo.card__img-ratio-md-16-9 { aspect-ratio: 16 / 9; }
  .card__photo.card__img-ratio-md-9-16 { aspect-ratio: 9 / 16; }
  .card__photo.card__img-ratio-md-4-3 { aspect-ratio: 4 / 3; }
  .card__photo.card__img-ratio-md-3-4 { aspect-ratio: 3 / 4; }
  .card__photo.card__img-ratio-md-1-1 { aspect-ratio: 1 / 1; }
}
@media screen and (max-width: 992px) {
  .card__photo { border-radius: 8px; }
  .card__photo.card__img-ratio-xs-16-9 { aspect-ratio: 16 / 9; }
  .card__photo.card__img-ratio-xs-9-16 { aspect-ratio: 9 / 16; }
  .card__photo.card__img-ratio-xs-4-3 { aspect-ratio: 4 / 3; }
  .card__photo.card__img-ratio-xs-3-4 { aspect-ratio: 3 / 4; }
  .card__photo.card__img-ratio-xs-1-1 { aspect-ratio: 1 / 1; }
}

{# SPACING #}
@media screen and (min-width: 992px) {
  .card-sp-extrasmall { padding: 8px; border-radius: 16px; }
  .card-sp-small { padding: 12px; border-radius: 20px; }
  .card-sp-medium { padding: 16px; border-radius: 20px; }
  .card-sp-large { padding: 20px; border-radius: 24px; }
  .card-sp-extralarge { padding: 24px; border-radius: 24px; }
  
  .card-gap-extrasmall { gap: 8px; }
  .card-gap-small { gap: 12px; }
  .card-gap-medium { gap: 16px; }
  .card-gap-large { gap: 20px; }
  .card-gap-extralarge { gap: 24px; }
  
  .card__text-sp-extrasmall { padding: 8px; }
  .card__text-sp-small { padding: 12px; }
  .card__text-sp-medium { padding: 16px; }
  .card__text-sp-large { padding: 20px; }
  .card__text-sp-extralarge { padding: 24px; }
}
@media screen and (max-width: 992px) {
  .card-sp-extrasmall { padding: 4px; border-radius: 12px; }
  .card-sp-small { padding: 8px; border-radius: 16px; }
  .card-sp-medium { padding: 12px; border-radius: 16px; }
  .card-sp-large { padding: 16px; border-radius: 20px; }
  .card-sp-extralarge { padding: 20px; border-radius: 20px; }
  
  .card-gap-extrasmall { gap: 4px; }
  .card-gap-small { gap: 8px; }
  .card-gap-medium { gap: 12px; }
  .card-gap-large { gap: 16px; }
  .card-gap-extralarge { gap: 20px; }
  
  .card__text-sp-extrasmall { padding: 4px; }
  .card__text-sp-small { padding: 8px; }
  .card__text-sp-medium { padding: 12px; }
  .card__text-sp-large { padding: 16px; }
  .card__text-sp-extralarge { padding: 20px; }
}