/* ============================================================
   EXTRA SERVICES
   ============================================================ */
.extra-services {

	padding: 100px 0;
}

.extra-services__head {
	display: flex;
	flex-direction: column;
	gap: 20px;
	align-items: center;
	text-align: center;
	margin-bottom: 60px;
}

.extra-services__title {
	font-size: var(--h2-size);
	line-height: var(--h2-line-height);
	font-weight: var(--h2-weight);
	color: var(--dark);
	max-width: 782px;
}

.extra-services__subtitle {
	font-size: var(--text-size);
	line-height: var(--text-line-height);
	color: var(--dark);
}

/* Grid — 3 колонки */
.extra-services__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
}

/* Card */
.extra-services__card {
	background: var(--fon);
	border-radius: 20px;
	padding: 25px 20px;
	display: flex;
	flex-direction: row;
	gap: 25px;
	align-items: center;
	box-shadow: var(--shadow-card);
}



.extra-services__card-img {
    flex-shrink: 0;
    max-width: 198px;
    height: 100%;
    min-height: 140px;
    object-fit: cover;
    border-radius: 20px;
    align-self: stretch;
    width: 40%;
}

.extra-services__card-body {
	display: flex;
	flex-direction: column;
	gap: 18px;
	flex: 1;
}

.extra-services__card-name {
	font-size: 32px;
	line-height: 110%;
	font-weight: 700;
	color: var(--dark);
}

.extra-services__card-price {
	font-size: 32px;
	line-height: 130%;
	font-weight: 700;
	color: var(--main);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
   
   @media (max-width: 1440px) {
.extra-services__card-name {font-size: 26px;}
.extra-services__card-price { font-size: 24px; }
}
   
   
   @media (max-width: 1280px) {
.extra-services__card-name {font-size: 24px;}

}   
   
   
@media (max-width: 1200px) {
	.extra-services__grid { grid-template-columns: repeat(2, 1fr); }
	.extra-services__card-name,
	.extra-services__card-price { font-size: 24px; }

}

@media (max-width: 768px) {
	.extra-services { padding: 60px 0; }
	.extra-services__grid { grid-template-columns: 1fr; }
	
	.extra-services__card-name,
	.extra-services__card-price { font-size: 20px; }
	
	
	
}




@media (max-width: 480px) {
.extra-services__card-img { min-height: 100px; width: 30%;}
.extra-services__card {	padding: 20px 12px;}
	
}