:root {
  --radius_image: 16px;
}

.cards {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 24px;
}
.card {
	grid-column: span 2;
  padding: 24px;
	display: flex;
	flex-direction: column;
	gap: 16px;
	justify-content: flex-start;
	align-items: flex-start;
	border-radius: 16px;
	background-color: var(--black50);
}
.card.card_taller {
  padding: 32px 24px;
}
.card_moreround {
	border-radius: 24px !important;
}
.cards_12col {
	grid-template-columns: repeat(4, 1fr);
}
.cards_12col .card {
	grid-column: span 4;
}
.card_uncover {
	min-height: 200px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
  border: 1px solid var(--black50);
	transition: background-color 0.25s ease, border-color 0.25s ease;
}
.card__content {
	position: relative;
	width: 100%;
	height: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.card__icon svg {
  display: block;
}

.card_cta {
  -webkit-transition: background-color 0.2s ease-in-out;
  -moz-transition: background-color 0.2s ease-in-out;
  -o-transition: background-color 0.2s ease-in-out;
  transition: background-color 0.2s ease-in-out;
}
.card_cta:not(.no_hover):hover {
  background-color: var(--blue400);
}
.card_cta:not(.no_hover):hover * {
  color: var(--white0);
}
.card_cta:not(.no_hover):hover svg path {
  fill: currentColor;
}

.card_uncover:hover {
  gap: 2px;
  border-color: var(--black200);
  background: var(--white0);
}
.card_uncover:hover .card__icon {
  /* display: none; */
	opacity: 0;
}
.card_uncover:hover .card__title {
	top: 0;
	/* transform: translateY(-103px); */
}
.card_uncover:hover .card__description {
  /* display: block; */
	opacity: 1;
	transition-delay: 0.25s;
}
.card_uncover .card__icon {
	position: absolute;
	top: 0;
	left: 0;
	opacity: 1;
	transition: opacity 0.25s ease;
}
.card_uncover .card__title {
  font-size: 24px;
	position: absolute;
	top: calc(100% - 31px);
	left: 0;
	transition: top 0.5s ease, opacity 0.5s ease;
}
.card_uncover .card__description {
	/* display: none; */
	position: absolute;
	bottom: 0;
	left: 0;
	opacity: 0;
	transition: opacity 0.5s ease;
}
a.card_uncover, a:visited.card_uncover {
  color: inherit;
}

.card_benefit {
  gap: 24px;
}
.card_benefit .card__icon {
  width: 64px;
  height: 64px;
}
.card_benefit .card__title {
  font-size: 24px;
}
.card_highlight {
	background-color: #FFF2E5;
}
.card_white {
  background-color: var(--white0);
}

.cards_stretch-bottom_lg .card:last-child:nth-child(3n - 2) .card__title {
	margin-bottom: 24px;
}
.card .button {
	margin-top: auto;
	margin-bottom: 0;
}
.card .button.button_ghost {
	padding-left: 0;
	padding-right: 0;
}

.cards_pic {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 28px;
}
.cards_pic .card {
  justify-content: space-between;
  overflow: hidden;
}
.cards_var .card {
  padding: 0;
  display: grid;
	grid-template-columns: 1fr;
	gap: 32px;
  overflow: hidden;
  position: relative;
}
.cards_var .card .card__content {
  padding: 24px;
}
.cards_var .card .card__leftcol {
  padding: 24px 24px 0 24px;
}
.cards_var .card .card__adaptimg {
  padding: 0;
  display: grid;
  height: 100%;
}
.cards_var .card .card__adaptimg picture {
  display: grid;
  height: 100%;
}
.cards_var .card .card__adaptimg img {
  justify-self: end;
  align-self: end;
}
.cards_border_bg .card {
  border: 1px solid var(--black100);
	background-color: var(--black50);
}
.cards_moreround .card {
  border-radius: 24px !important;
}
.cards_transparent .card {
  background-color: inherit;
}
.cards_border .card {
  padding: 24px;
  border-radius: 12px;
  border: 1px solid var(--black200);
}
.cards_border .card.card_taller {
  padding: 32px 24px;
}
.cards_liteblue .card {
  background-color: var(--blue50);
}
.card.snap_bottom {
  padding-bottom: 0 !important;
}
.card.snap_bottom .card__content {
  padding-bottom: 24px;
}
.card.snap_right {
  padding-right: 0 !important;
}
.card.snap_bottom.snap_right .card__content{
  padding-bottom: 0;
}
.card.snap_right .card__content {
  padding-right: 24px;
}
.card.snap_right .card__image {
  align-items: flex-end;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.card__image {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-radius: var(--radius_image);
  object-fit: cover;
  overflow: hidden;
}
.card__image_rect {
  border-radius: 0;
}
.card.snap_bottom .card__image {
  justify-content: flex-end;
}
.card__absimg {
  object-fit: cover;
  overflow: hidden;
  position: absolute;
  bottom: 0;
  right: 0;
}
.card__image img,
.card__absimg img {
  display: block;
}
.card.snap_bottom .card__image {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.cards_pic .card {
  gap: 28px;
}
.cards_pic .card_big {
  display: -ms-grid;
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
}
.cards_pic .card_flip {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

.cards_minibanner {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 24px;
}
.cards_minibanner .card {
  padding: 24px;
  padding-bottom: 240px;
  background-position: bottom center;
  background-repeat: no-repeat;
  background-size: auto;
}

.cards_plain .card {
  padding: 0;
  background-color: inherit;
}

.cards_shadow_small .card {
  -webkit-box-shadow: 0px 4px 4px rgba(0, 6, 26, 0.1);
          box-shadow: 0px 4px 4px rgba(0, 6, 26, 0.1);
}
.cards_shadow_normal .card {
  -webkit-box-shadow: 0px 8px 8px rgba(0, 6, 26, 0.1);
          box-shadow: 0px 8px 8px rgba(0, 6, 26, 0.1);
}
.cards_shadow_large .card {
  -webkit-box-shadow: 0px 32px 32px rgba(0, 6, 26, 0.1);
  box-shadow: 0px 32px 32px rgba(0, 6, 26, 0.1);
}
.cards_shadow_extralarge .card {
  -webkit-box-shadow: 0px 32px 32px rgba(0, 6, 26, 0.1);
  box-shadow: 0px 32px 32px rgba(0, 6, 26, 0.1);
}

.card__items {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.card__list {
  padding-left: 28px;
  list-style-type: disc;
}
.card__list > li + li {
  margin-top: 8px;
}
.card__list.card__list_y_spaced > li + li {
  margin-top: 16px;
}
.card__list li {
  padding-left: 12px;
}
.card__list li::marker {
  color: var(--blue400);
}

.card__maxfill {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
}

@media (max-width: 575px) { 
  .cards_pic .card_flip {
    padding-bottom: 24px !important;
  }
  .cards_pic .card_flip .card__image {
    border-radius: var(--radius_image);
  }
}

@media (min-width: 576px) and (max-width: 991px) { 
	/* .cards {
		grid-template-columns: repeat(4, 1fr);
		gap: 32px;
	}
	.card {
		padding: 32px;
		border-radius: 24px;
	}
	.card.card_benefit {
		padding: 48px 32px;
	}
	.card_benefit .card__icon {
    width: 96px;
    height: 96px;
    margin-bottom: 8px;
  }
  .card_benefit .card__title {
    font-size: 32px;
  } */
  
	/* 1 в ряду для 2 */
	.cards_center .card:last-child:nth-child(2n - 1) {
		grid-column-end: 4;
	}

	.cards_stretch-bottom_lg .card:last-child:nth-child(3n - 2) .card__title {
		margin-bottom: 24px;
	}

	.cards_stretch-top_sm .card:first-child {
    grid-column-start: 1;
    grid-column-end: 5;
	}
	.cards_stretch-bottom_sm .card:last-child:nth-child(2n - 1) {
    grid-column-start: 1;
    grid-column-end: 5;
	}

  .cards_pic .card_flip {
    padding-bottom: 32px !important;
    grid-column: span 4;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
  }
  .cards_pic .card_flip .card__image {
    border-radius: var(--radius_image);
  }
}

@media (min-width: 576px) { 
  :root {
    --radius_image: 24px;
  }

  .cards {
		grid-template-columns: repeat(4, 1fr);
		gap: 32px;
	}
  .cards_12col {
		grid-template-columns: repeat(8, 1fr);
		gap: 32px;
	}
  .cards_wide {
		grid-template-columns: repeat(2, 1fr);
		gap: 32px;
	}
	.card {
		padding: 32px;
		border-radius: 24px;
	}
  .card.card_taller {
    padding: 32px 24px;
  }
  .card.card_lower {
    padding: 24px 32px;
  }
  .card.snap_bottom .card__content {
    padding-bottom: 32px;
  }
  .card.snap_right .card__content {
    padding-right: 32px;
  }
	.card.card_benefit {
		padding: 48px 32px;
	}
	.card_benefit .card__icon {
    width: 96px;
    height: 96px;
    margin-bottom: 8px;
  }
  .card_benefit .card__title {
    font-size: 32px;
  }

  .cards_border .card {
    padding: 32px;
    border-radius: 24px;
  }
  .cards_border .card.card_taller {
    padding: 32px;
  }
	.cards_pic {
		gap: 32px;
	}
  .cards_pic.cards_narrow {
		grid-template-columns: repeat(4, 1fr);
	}
  .cards_pic .card {
    gap: 32px;
  }
  .cards_org .card_big {
    grid-column: span 4;
  }
  .cards_var {
    gap: 32px;
  }
  .cards_var .card .card__content {
    padding: 32px;
  }
  .cards_var .card .card__leftcol {
    padding: 32px 0 32px 32px;
  }
  .cards_var .card_size2 {
    grid-column: span 4;
    grid-template-columns: 1fr 1fr;
    gap: 0;
  }
  .cards_var .card_size3 {
    grid-column: span 4;
    grid-template-columns: 1fr 1fr;
    gap: 0;
  }
  .cards_var .card_size2.cols_single,
  .cards_var .card_size3.cols_single {
      grid-template-columns: 1fr;
  }

	/* 1 в ряду для 2 */
	.cards_center .card:last-child:nth-child(2n - 1) {
		grid-column-end: 4;
	}

  .cards_minibanner {
    grid-template-columns: repeat(2, 1fr);
  }
  .cards_minibanner .card {
    min-height: 280px;
    padding: 32px;
    padding-right: 230px;
    background-position: right center;
  }
}

@media (max-width: 991px) { 
  .card.snap_bottom_xs_sm {
    padding-bottom: 0;
  }
  .card.snap_bottom_xs_sm .card__image {
    justify-content: flex-end;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
  }
  .card.snap_right_xs_sm {
    padding-right: 0;
  }
  .card.snap_right_xs_sm .card__image {
    align-items: flex-end;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }
}

@media (min-width: 992px) { 
	.cards {
		grid-template-columns: repeat(6, 1fr);
	}
	.cards_12col {
		grid-template-columns: repeat(12, 1fr);
    grid-auto-rows: 1fr;
	}
	/* 2 в ряду для 3 */
	.cards_center .card:last-child:nth-child(3n - 1) {
		grid-column-end: -2;
	}
	.cards_center .card:nth-last-child(2):nth-child(3n + 1) {
		grid-column-end: 4;
	}
	/* 1 в ряду для 3 */
	.cards_center .card:last-child:nth-child(3n - 2) {
		grid-column-end: 5;
	}
	/* 1 в ряду для 2 */
	.cards_stretch-bottom_lg .card:last-child:nth-child(3n - 2) {
		flex-direction: row;
		gap: 32px;
		grid-column-start: 1;
    grid-column-end: 7;
	}

  .cards_pic {
		grid-template-columns: repeat(4, 1fr);
	}
  .cards_pic.cards_narrow {
		grid-template-columns: repeat(6, 1fr);
	}
  .cards_pic .card_big {
    grid-column: span 4;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
  }
  .cards_pic .card_flip {
    grid-column: span 2;
    grid-row: span 2;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr auto;
    gap: 32px;
  }

  .cards_var .card_size3 {
    grid-column: span 6;
  }

  .cards_wide {
		grid-template-columns: repeat(4, 1fr);
	}

  .cards_minibanner {
		grid-template-columns: repeat(4, 1fr);
    gap: 32px;
  }

  .card.snap_right_lg {
    padding-right: 0;
  }
  .card.snap_right_lg .card__image {
    align-items: flex-end;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }

  .card_tall {
    grid-row: span 2;
  }

  .cards_text {
		grid-template-columns: repeat(4, 1fr);
	}
}