.COLUMNS::before,
.COLUMNS::after {
	content: "";
	display: block;
	overflow: hidden;
}

.COLUMNS {
	position: relative;
}

.COLUMNS .heading {
	text-align: center;
	margin-bottom: 30rem;
}

.COLUMNS .bottom-content {
	text-align: center;
	margin-top: 30rem;
}

.COLUMNS .b-columns {
	justify-content: center;
}

.COLUMNS .container {
	position: relative;
	padding-bottom: 20rem;
	height: 100%;
}

.COLUMNS .icon {
	height: 120rem;
	width: auto;
	margin: 0 0 25rem 0;
}

.COLUMNS .icon .b-img,
.COLUMNS .icon .b-img-fallback {
    height: 100%;
    width: auto;
    object-position: left;
}

.COLUMNS .button-space {
	margin-bottom: 30rem;
}

.COLUMNS .button-space p:last-child {
	width: 100%;
	position: absolute;
	bottom: 0;
}

@media screen and (max-width: 960px) {
	.COLUMNS .button-space {margin-bottom: 0;}
	.COLUMNS .button-space p {position: relative;}
}

/* has bg image */

.COLUMNS.has-bg {
	padding: 30rem 40rem;
}

.COLUMNS .background {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	width: 100%;
	height: 100%;
	z-index: -1;
	border-radius: var(--border-radius-big);
	background-size: cover;
}

.COLUMNS.has-bg .b-columns {
	justify-content: flex-end;
}

@media screen and (max-width: 960px) {
	.COLUMNS.has-bg {padding: 20rem;}
}



/* card */

.COLUMNS[data-style="card"] .container {
	padding: 40rem;
	background: var(--white);
	box-sizing: border-box;
	border: var(--border);
	border-radius: var(--border-radius-big);
	height: 100%;
}

.b-section[data-bg="light-blue"] .COLUMNS[data-style="card"] .container,
.b-section[data-bg="dark-blue"] .COLUMNS[data-style="card"] .container {
	color: var(--black);
}

.COLUMNS[data-style="card"] .button-space {
	margin-bottom: 90rem !important;
}

.COLUMNS[data-style="card"] .button-space p:last-child {
	bottom: 40rem;
}

@media screen and (max-width: 960px) {
	.COLUMNS[data-style="card"] .container {padding: 20rem 20rem 30rem;}
}



/* light-blue card */

.COLUMNS[data-style="card-light-blue"] .container {
	padding: 40rem;
	background: var(--light-blue);
	box-sizing: border-box;
	border: var(--border);
	border-radius: var(--border-radius-big);
	height: 100%;
}

.b-section[data-bg="light-blue"] .COLUMNS[data-style="card-light-blue"] .container,
.b-section[data-bg="dark-blue"] .COLUMNS[data-style="card-light-blue"] .container {
	color: var(--black);
}

.COLUMNS[data-style="card-light-blue"] .button-space {
	margin-bottom: 90rem !important;
}

.COLUMNS[data-style="card-light-blue"] .button-space p {
	bottom: 40rem;
}

@media screen and (max-width: 960px) {
	.COLUMNS[data-style="card-light-blue"] .container {padding: 20rem 20rem 30rem;}
}



/* cards-numbered */

.COLUMNS[data-style="card"] .cards-numbered .container,
.COLUMNS[data-style="card-light-blue"] .cards-numbered .container {
	position: relative;
}

.COLUMNS[data-style="card"] .cards-numbered .content,
.COLUMNS[data-style="card-light-blue"] .cards-numbered .content {
	margin-bottom: 146rem;
}

.COLUMNS[data-style="card"] .card-number,
.COLUMNS[data-style="card-light-blue"] .card-number {
	position: absolute;
	left: 40rem;
	bottom: 40rem;
	z-index: 0;
}

.COLUMNS[data-style="card"] .card-number span,
.COLUMNS[data-style="card-light-blue"] .card-number span {
	font-family: 'Rubik', sans-serif;
	font-size: 62rem;
	font-weight: 600;
	color: var(--dark-blue);
}

.COLUMNS[data-style="card"] .card-number::before,
.COLUMNS[data-style="card-light-blue"] .card-number::before {
	content: '';
	display: block;
	width: 64rem;
	height: 64rem;
	border-radius: 100%;
	position: absolute;
	top: 28rem;
	z-index: -1;
}

.COLUMNS[data-style="card"] .b-column:nth-child(3n+1) .card-number::before,
.COLUMNS[data-style="card-light-blue"] .b-column:nth-child(3n+1) .card-number::before {background-color: var(--yellow);}

.COLUMNS[data-style="card"] .b-column:nth-child(3n+2) .card-number::before,
.COLUMNS[data-style="card-light-blue"] .b-column:nth-child(3n+2) .card-number::before {background-color: var(--green);}

.COLUMNS[data-style="card"] .b-column:nth-child(3n+3) .card-number::before,
.COLUMNS[data-style="card-light-blue"] .b-column:nth-child(3n+3) .card-number::before {background-color: var(--bright-blue);}

@media screen and (max-width: 960px) {
	.COLUMNS[data-style="card"] .cards-numbered .content,
	.COLUMNS[data-style="card-light-blue"] .cards-numbered .content {margin-bottom: 72rem;}

	.COLUMNS[data-style="card"] .card-number,
	.COLUMNS[data-style="card-light-blue"] .card-number {left: 20rem; bottom: 30rem;}

	.COLUMNS[data-style="card"] .card-number span,
	.COLUMNS[data-style="card-light-blue"] .card-number span {font-size: 42rem;}

	.COLUMNS[data-style="card"] .card-number::before,
	.COLUMNS[data-style="card-light-blue"] .card-number::before {width: 44rem; height: 44rem; top: 20rem;}
}



/* blue card */

.COLUMNS[data-style="card-blue"] .container {
	padding: 40rem 30rem;
	box-sizing: border-box;
	background: var(--dark-blue);
	background-repeat: no-repeat;
	background-position: right bottom;
	color: var(--white);
	border-radius: var(--border-radius);
	height: 100%;
}

.COLUMNS[data-style="card-blue"] .b-column:nth-child(n) .container {
	background-image: url(/wp-content/themes/wp-parchment/blocks/columns/images/columns-bg1.svg);
}

.COLUMNS[data-style="card-blue"] .b-column:nth-child(2n) .container {
	background-image: url(/wp-content/themes/wp-parchment/blocks/columns/images/columns-bg2.svg);
}

.COLUMNS[data-style="card-blue"] .button-space {
	margin-bottom: 0 !important;
}

.COLUMNS[data-style="card-blue"] .button-space p {
	position: relative;
	bottom: auto;
}


@media screen and (max-width: 960px) {

}



/* left-border */

.COLUMNS[data-style="left-border"] .container {
	height: 100%;
	border-left: 10rem solid var(--bright-blue);
	padding-left: 20rem;
}

.COLUMNS[data-style="left-border"] .content p {
	margin: 0.5em 0 0 0;
}



/* left-icons */

.COLUMNS[data-style="left-icons"] .content p {
	margin: 0;
}

@media screen and (min-width: 961px) {
	.COLUMNS[data-style="left-icons"] .container {display: flex; align-items: center;}
	.COLUMNS[data-style="left-icons"] .icon {width: 60rem; margin-bottom: 0;}
	.COLUMNS[data-style="left-icons"] .content {width: auto; margin-left: 30rem;}
}

@media screen and (max-width: 960px) {
	.COLUMNS[data-style="left-icons"] .container {margin: 25rem 0;}
}



/* left-icons */

.COLUMNS[data-style="icons-title"] .container {
	position: relative;
}

.COLUMNS[data-style="icons-title"] .container .image {
	position: absolute;
	top: 4rem;
	left: 0;
	width: 32rem;
	height: auto;
}

.COLUMNS[data-style="icons-title"] .container .image img {
	aspect-ratio: 1 !important;
}

.COLUMNS[data-style="icons-title"] .content h3 {
	padding-left: 42rem;
}

.COLUMNS[data-style="icons-title"] .content p {
	margin-top: 24rem;
}


/* centered-icons */

.COLUMNS[data-style="center-icons"] .icon img {
	aspect-ratio: 1/1 !important;
	margin: 0 auto;
}

.COLUMNS[data-style="center-icons"] .content {
	margin: 0 auto 30rem;
	text-align: center;
}

.COLUMNS[data-style="center-icons"] .b-button {
	margin: 0 auto;
}

@media screen and (max-width: 960px){
	.COLUMNS[data-style="center-icons"] .content {margin: 0 auto 0;}
}



/* numbered */

.COLUMNS[data-style="numbered"] .container {
	padding: 0 10rem;
}

.COLUMNS[data-style="numbered"] .number {
	padding-bottom: 20rem;
	margin-bottom: 30rem;
	color: var(--dark-blue);
	position: relative;
}

.COLUMNS[data-style="numbered"] .number::after {
  content:'';
  position:absolute;
  bottom:0;
  left:0;
  right:0;
  height: 4px;
  border-radius: var(--border-radius);
}

.COLUMNS[data-style="numbered"] .b-column:nth-child(4n+1) .number::after {background: var(--orange);}
.COLUMNS[data-style="numbered"] .b-column:nth-child(4n+2) .number::after {background: var(--yellow);}
.COLUMNS[data-style="numbered"] .b-column:nth-child(4n+3) .number::after {background: var(--green);}
.COLUMNS[data-style="numbered"] .b-column:nth-child(4n+4) .number::after {background: var(--bright-blue);}

@media screen and (max-width: 960px){
	.COLUMNS[data-style="numbered"] .number {font-size: 40rem;}
}


/* alt-pon */

@media screen and (min-width: 961px) {
	.COLUMNS.alt-pon-cards .b-column:nth-child(n+4){width: 50%;}
	.COLUMNS.alt-pon-cards .b-column:nth-child(n+5){width: 50%;}
}



/* animation */

@media screen and (min-width: 961px) {
	.COLUMNS .b-column:nth-child(8n + 2) {transition-delay: 0.4s;}
	.COLUMNS .b-column:nth-child(8n + 3) {transition-delay: 0.6s;}
	.COLUMNS .b-column:nth-child(8n + 4) {transition-delay: 0.8s;}
	.COLUMNS .b-column:nth-child(8n + 5) {transition-delay: 1.2s;}
	.COLUMNS .b-column:nth-child(8n + 6) {transition-delay: 1.4s;}
	.COLUMNS .b-column:nth-child(8n + 7) {transition-delay: 1.6s;}
	.COLUMNS .b-column:nth-child(8n + 8) {transition-delay: 1.8s;}
}