feat: Refactor package card header and price styling for improved layout and responsiveness

This commit is contained in:
2026-05-06 17:38:08 +02:00
parent 1632a51c18
commit 36aab2c95a
+15 -21
View File
@@ -69,18 +69,15 @@
.package-card__header {
display: flex;
justify-content: space-between;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
gap: 1rem;
flex-wrap: wrap;
gap: 1.2rem;
}
.package-card__header > div {
min-width: 0;
}
.package-card__header > div:first-child {
flex: 1 1 0;
width: 100%;
}
.package-card__tag {
@@ -94,13 +91,15 @@
font-size: 0.9rem;
font-weight: 700;
letter-spacing: 0.01em;
margin-bottom: 0.6rem;
}
.package-card__name {
margin: 0;
color: #143f46;
font-size: clamp(1.4rem, 2.5vw, 2rem);
line-height: 1.08;
font-size: clamp(1.4rem, 2.5vw, 1.8rem);
line-height: 1.2;
word-wrap: break-word;
}
.package-card__price {
@@ -109,12 +108,14 @@
gap: 0.35rem;
font-weight: 700;
color: #102d37;
white-space: nowrap;
white-space: normal;
margin-top: 0.2rem;
}
.package-card__price span {
font-size: clamp(2rem, 3vw, 2.75rem);
font-size: clamp(1.8rem, 3vw, 2.4rem);
letter-spacing: -0.04em;
line-height: 1.1;
}
.package-card__price small {
@@ -200,10 +201,6 @@
color: #15444c;
}
.package-card__tag + .package-card__name {
margin-top: 0.4rem;
}
@media (max-width: 760px) {
.booking-hero {
padding: 1.5rem 1.2rem;
@@ -226,18 +223,15 @@
}
.package-card__header {
flex-direction: column;
align-items: flex-start;
gap: 0.6rem;
gap: 0.8rem;
}
.package-card__price {
justify-content: flex-start;
margin-top: 0.2rem;
margin-top: 0;
}
.package-card__price span {
font-size: 2.2rem;
font-size: 2rem;
}
.btn {