/* Struktura */
.cta-about-wrapp{
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: auto;
	grid-template-areas: 
		"cta-header"
		"cta-about"
		"cta-advantages"
		"cta-hook"
		"cta-column";
	background-color: var(--text-color-light); }

@media (min-width: 768px){
	.cta-about-wrapp{
		grid-template-columns: repeat(2, 1fr); 
		grid-template-rows: repeat(3, 1fr); 
		grid-template-areas: 
			"cta-header cta-about"
			"cta-advantages cta-advantages"
			"cta-column cta-hook"; }
	.stick03,
	.stick04{
		display: none; }
}

@media (min-width: 1200px){
/*	.cta-about-wrapp{
		grid-template-columns: repeat(2, 1fr); 
		grid-template-rows: repeat(3, 1fr); 
		grid-template-areas: 
			"cta-header cta-about"
			"cta-header cta-advantages"
			"cta-column cta-hook"; }
	.stick03,
	.stick04{
		display: inherit; }*/
}

@media (min-width: 1400px){
	.cta-about-wrapp{
		grid-template-columns: repeat(9, 1fr); 
		grid-template-rows: repeat(3, 1fr); 
		grid-template-areas: 
			". cta-header cta-header cta-about cta-about cta-about cta-about cta-about ."
			"cta-bg-1 cta-header cta-header cta-advantages cta-advantages cta-advantages cta-advantages cta-advantages cta-bg-2"
			". cta-column cta-column cta-hook cta-hook cta-hook cta-hook cta-hook ."; }
	.stick03,
	.stick04{
		display: inherit; }
}
@media (min-width: 1921px){
	.cta-about-wrapp{
		grid-template-columns: repeat(7, 1fr); 
		grid-template-rows: repeat(3, 1fr); 
		grid-template-areas: 
			". cta-header cta-about cta-about cta-about cta-about ."
			"cta-bg-1 cta-header cta-advantages cta-advantages cta-advantages cta-advantages cta-bg-2"
			". cta-column cta-hook cta-hook cta-hook cta-hook ."; }
	.stick03,
	.stick04{
		display: inherit; }
}

/* Zawartość  */
.cta-about-wrapp > header{
	grid-area: cta-header; }
#cta-about .cta-about-content{
	grid-area: cta-about; }
#cta-about .cta-boxes{
	grid-area: cta-advantages; 
	background-color: var(--link-color); 
	background-image: url('https://kingafil.fr/wp-content/uploads/2026/02/banner-3.jpg');
	background-position: center;
	background-size: cover; }
#cta-about .cta-boxes.ld-f{
	flex-direction: column;
	gap: 1rem; 
	width: 100%; 
	text-align: center; }
#cta-about .cta-boxes.ld-f .cta-box:first-child{
	padding-left: 1rem; }
#cta-about .cta-boxes.ld-f .cta-box:last-child{
	padding-right: 1rem; }
#cta-about .cta-boxes .cta-box p strong{
	font-size: 1.4rem; }
#cta-about .cta-info{
	grid-area: cta-hook; 
	display: flex;
	flex-direction: column;
	justify-content: center; }
#cta-about .cta-info a{
	max-width: 88px;
	max-height: 38px; 
	padding: 0.3rem 0;
	border: 0;
	margin-top: 2rem;
	background: linear-gradient( var(--text-color-dark) 50%, var(--link-color) 50% );
	background-size: 100% 200%;
	background-position-y: 0%; }
#cta-about .cta-info a:hover{
	background-position-y: 101%; }
#cta-about .cta-column{
	grid-area: cta-column; 
	align-content: center;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-template-rows: 1fr;
	grid-template-areas:
	"stick1 column column stick2"; }
@media (min-width: 1920px){
	#cta-about .cta-column{
		grid-template-columns: repeat(3, 1fr);
		grid-template-areas:
		"column column stick2"; } 
}
#cta-about .cta-bg-1{
	grid-area: cta-bg-1; 
	background-color: var(--link-color); }
#cta-about .cta-bg-2{
	grid-area: cta-bg-2; 
	background-color: var(--link-color); }

@media (min-width: 640px){
	#cta-about .cta-boxes.ld-f{
		flex-direction: row; }
}
/*
@media (min-width: 1200px){
	#cta-about .cta-boxes.ld-f{
		flex-wrap: wrap; }
	#cta-about .cta-boxes.ld-f .cta-box{
		flex: 1 1 42%; }
}
@media (min-width: 1400px){
	#cta-about .cta-boxes.ld-f{
		flex-wrap: nowrap; }
	#cta-about .cta-boxes.ld-f .cta-box{
		flex: 1 1 30%; }
}*/

/* Formatowanie */
.cta-about-wrapp figure,
.cta-column figure{
	grid-area: column;
	display: grid;
	grid-template-columns: 1fr;
	padding: 2rem 0;
	justify-items: center;
	line-height: 0;
	background-color: var(--link-color); }
.cta-column figure{
	align-items: center; }
.cta-about-content{
	padding: 1rem; }
.cta-box{
	padding: 2rem 1rem 0 1rem; }
.cta-box img{
	max-width: 80px; }
.cta-info{
	padding: 1rem; }
.cta-info p{
	margin: 0;
	font-size: 2rem; }
.cta-info p:first-child{
	color: var(--text-color-dark); }

/* header */
.header-box{
	display: grid;
	grid-template-columns: repeat(4, 1fr); 
	grid-template-rows: 1fr 1fr; 
	grid-template-areas: 
	". portrait-name portrait-name ."
	"stick3 portrait portrait stick4";
	height: 100%; 
	min-height: 500px; }

@media (min-width: 1920px){
	.header-box{
		grid-template-columns: repeat(3, 1fr); 
		grid-template-areas: 
		"portrait-name portrait-name ."
		"portrait portrait stick4";}
}

.header-box h2{
	grid-area: portrait-name;
	margin: 0;
	font-size: 1.4rem;
	padding-left: 1rem;
	color: var(--text-color-light);
	background-color: var(--text-color-dark); }
@media (min-width: 640px){
	.header-box h2 span.color-lk{
	font-size: 1.8rem; }
}
@media (min-width: 768px){
	.header-box h2 span.color-lk{
	font-size: 2.2rem; }
}
@media (min-width: 1024px){
	.header-box h2 span.color-lk{
	font-size: 2.5rem; }
}
@media (min-width: 1400px){
	.header-box h2 span.color-lk{
	font-size: 1.8rem; }
}
@media (min-width: 1600px){
	.header-box h2 span.color-lk{
	font-size: 2rem; }
}
@media (min-width: 1800px){
	.header-box h2 span.color-lk{
	font-size: 2.2rem; }
}
@media (min-width: 1920px){
	.header-box h2 span.color-lk{
	font-size: 2.5rem; }
}

.header-box figure{
	grid-area: portrait;
	position: relative; 
	background-color: var(--text-color-dark); }
.header-box figure img {
	position: absolute;
	right: -1.8rem;
  	bottom: 0; 
	max-height: 400px; }
@media (min-width: 1200px){
	.header-box figure img {
	max-height: 430px; 
	right: -2.4rem; }
}
@media (min-width: 1400px){
	.header-box figure img {
	max-height: 430px; 
	right: -1.4rem; }
}
@media (min-width: 1920px){
	.header-box figure img {
	max-height: 430px; 
	right: -1.6rem; }
}
.stick01{
	grid-area: stick1;
	background-color: var(--link-color); }
.stick02{
	grid-area: stick2;
	background-color: var(--link-color); }
@media (min-width: 768px){
	.stick01,
	.stick02{
		background-color: inherit; }
}
.stick03{
	grid-area: stick3;
	background-color: var(--link-color); }
.stick04{
	grid-area: stick4;
	background-color: var(--link-color); }
h2 span.color-lk{
	font-size: 2.5rem; }
h2 span.color-lk,
.cta-info p:nth-child(2){
	color: var(--link-color); }