|
|
@@ -134,7 +134,8 @@ body.free-ticket-result-open {
|
|
|
.free-ticket-error-45__panel {
|
|
|
position: relative;
|
|
|
z-index: 1;
|
|
|
- width: min(380px, 100%, calc((100dvh - 32px) * 508 / 406));
|
|
|
+ container-type: inline-size;
|
|
|
+ width: min(460px, 100%, calc((100dvh - 32px) * 508 / 406));
|
|
|
aspect-ratio: 508 / 406;
|
|
|
overflow: hidden;
|
|
|
border-radius: clamp(12px, 3vw, 18px);
|
|
|
@@ -166,7 +167,7 @@ body.free-ticket-result-open {
|
|
|
left: 38%;
|
|
|
width: 24%;
|
|
|
color: #fff;
|
|
|
- font-size: 18px;
|
|
|
+ font-size: clamp(18px, 4.57cqw, 21px);
|
|
|
font-weight: 900;
|
|
|
text-transform: uppercase;
|
|
|
transform: rotate(-8deg);
|
|
|
@@ -177,14 +178,14 @@ body.free-ticket-result-open {
|
|
|
.free-ticket-error-45__copy--ticket-sold-out {
|
|
|
top: 26.2%;
|
|
|
color: #0a358b;
|
|
|
- font-size: 14px;
|
|
|
+ font-size: clamp(14px, 3.7cqw, 17px);
|
|
|
}
|
|
|
|
|
|
.free-ticket-error-45__copy--title {
|
|
|
top: 44.8%;
|
|
|
left: 18%;
|
|
|
width: 64%;
|
|
|
- font-size: 16px;
|
|
|
+ font-size: clamp(16px, 4.13cqw, 19px);
|
|
|
font-weight: 900;
|
|
|
white-space: nowrap;
|
|
|
}
|
|
|
@@ -196,7 +197,7 @@ body.free-ticket-result-open {
|
|
|
left: 20%;
|
|
|
width: 60%;
|
|
|
color: #4d5876;
|
|
|
- font-size: 8px;
|
|
|
+ font-size: clamp(11px, 2.61cqw, 12px);
|
|
|
font-weight: 400;
|
|
|
line-height: 1.3;
|
|
|
}
|
|
|
@@ -206,7 +207,7 @@ body.free-ticket-result-open {
|
|
|
.free-ticket-error-45__copy--next-secondary {
|
|
|
left: 39%;
|
|
|
width: 40%;
|
|
|
- font-size: 8px;
|
|
|
+ font-size: clamp(10px, 2.61cqw, 12px);
|
|
|
text-align: left;
|
|
|
}
|
|
|
|
|
|
@@ -227,7 +228,7 @@ body.free-ticket-result-open {
|
|
|
height: 7.5%;
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
|
- font-size: 10px;
|
|
|
+ font-size: clamp(10px, 2.83cqw, 13px);
|
|
|
font-weight: 900;
|
|
|
}
|
|
|
|
|
|
@@ -243,11 +244,12 @@ body.free-ticket-result-open {
|
|
|
}
|
|
|
|
|
|
.free-ticket-error-45__copy--footer {
|
|
|
- top: 93.1%;
|
|
|
- left: 22%;
|
|
|
- width: 67%;
|
|
|
- font-size: 7px;
|
|
|
+ top: 90.3%;
|
|
|
+ left: 30%;
|
|
|
+ width: 59%;
|
|
|
+ font-size: clamp(10px, 2.61cqw, 12px);
|
|
|
font-weight: 400;
|
|
|
+ line-height: 1.05;
|
|
|
}
|
|
|
|
|
|
.free-ticket-error-45__action {
|
|
|
@@ -322,7 +324,8 @@ body.free-ticket-result-open {
|
|
|
.free-ticket-error-44__panel {
|
|
|
position: relative;
|
|
|
z-index: 1;
|
|
|
- width: min(380px, 100%, calc((100dvh - 32px) * 547 / 437));
|
|
|
+ container-type: inline-size;
|
|
|
+ width: min(460px, 100%, calc((100dvh - 32px) * 547 / 437));
|
|
|
aspect-ratio: 547 / 437;
|
|
|
overflow: hidden;
|
|
|
border-radius: clamp(12px, 3vw, 18px);
|
|
|
@@ -353,7 +356,7 @@ body.free-ticket-result-open {
|
|
|
left: 29%;
|
|
|
width: 34%;
|
|
|
color: #0a358b;
|
|
|
- font-size: 12px;
|
|
|
+ font-size: clamp(12px, 3.26cqw, 15px);
|
|
|
font-weight: 900;
|
|
|
line-height: 1.05;
|
|
|
text-transform: uppercase;
|
|
|
@@ -366,7 +369,7 @@ body.free-ticket-result-open {
|
|
|
left: 10%;
|
|
|
width: 80%;
|
|
|
color: #082d7d;
|
|
|
- font-size: 19px;
|
|
|
+ font-size: clamp(19px, 4.78cqw, 22px);
|
|
|
font-weight: 900;
|
|
|
line-height: 1;
|
|
|
text-wrap: balance;
|
|
|
@@ -374,7 +377,7 @@ body.free-ticket-result-open {
|
|
|
|
|
|
.free-ticket-error-44__copy--title {
|
|
|
top: 43.7%;
|
|
|
- font-size: 18px;
|
|
|
+ font-size: clamp(18px, 4.57cqw, 21px);
|
|
|
}
|
|
|
|
|
|
.free-ticket-error-43__copy--description,
|
|
|
@@ -383,7 +386,7 @@ body.free-ticket-result-open {
|
|
|
left: 16%;
|
|
|
width: 68%;
|
|
|
color: #4d5876;
|
|
|
- font-size: 9px;
|
|
|
+ font-size: clamp(9px, 2.61cqw, 12px);
|
|
|
line-height: 1.25;
|
|
|
text-wrap: balance;
|
|
|
}
|
|
|
@@ -392,6 +395,11 @@ body.free-ticket-result-open {
|
|
|
top: 55.2%;
|
|
|
left: 17%;
|
|
|
width: 66%;
|
|
|
+ font-size: clamp(11px, 2.83cqw, 13px);
|
|
|
+}
|
|
|
+
|
|
|
+.free-ticket-error-43__copy--description {
|
|
|
+ font-size: clamp(11px, 3.04cqw, 14px);
|
|
|
}
|
|
|
|
|
|
.free-ticket-error-43__copy--daily-title {
|
|
|
@@ -399,7 +407,7 @@ body.free-ticket-result-open {
|
|
|
left: 36%;
|
|
|
width: 47%;
|
|
|
color: #074dc7;
|
|
|
- font-size: 10px;
|
|
|
+ font-size: clamp(12px, 3.26cqw, 15px);
|
|
|
font-weight: 900;
|
|
|
line-height: 1.05;
|
|
|
text-align: left;
|
|
|
@@ -410,7 +418,7 @@ body.free-ticket-result-open {
|
|
|
left: 36%;
|
|
|
width: 47%;
|
|
|
color: #44516e;
|
|
|
- font-size: 7px;
|
|
|
+ font-size: clamp(10px, 2.83cqw, 13px);
|
|
|
line-height: 1.15;
|
|
|
text-align: left;
|
|
|
}
|
|
|
@@ -424,7 +432,7 @@ body.free-ticket-result-open {
|
|
|
height: 9.4%;
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
|
- font-size: 13px;
|
|
|
+ font-size: clamp(13px, 3.48cqw, 16px);
|
|
|
font-weight: 900;
|
|
|
line-height: 1;
|
|
|
}
|
|
|
@@ -455,12 +463,21 @@ body.free-ticket-result-open {
|
|
|
|
|
|
.free-ticket-error-43__copy--footer,
|
|
|
.free-ticket-error-44__copy--footer {
|
|
|
- top: 92.2%;
|
|
|
+ top: 90.3%;
|
|
|
left: 23%;
|
|
|
width: 65%;
|
|
|
color: #133b7f;
|
|
|
- font-size: 8px;
|
|
|
- line-height: 1.2;
|
|
|
+ font-size: clamp(10px, 2.61cqw, 12px);
|
|
|
+ line-height: 1.05;
|
|
|
+}
|
|
|
+
|
|
|
+.free-ticket-error-43__copy--footer {
|
|
|
+ font-size: clamp(10px, 2.61cqw, 12px);
|
|
|
+}
|
|
|
+
|
|
|
+.free-ticket-error-44__copy--footer {
|
|
|
+ left: 27%;
|
|
|
+ width: 61%;
|
|
|
}
|
|
|
|
|
|
.free-ticket-error-44__copy--badge {
|
|
|
@@ -468,7 +485,7 @@ body.free-ticket-result-open {
|
|
|
left: 30%;
|
|
|
width: 30%;
|
|
|
color: #fff;
|
|
|
- font-size: 18px;
|
|
|
+ font-size: clamp(18px, 4.57cqw, 21px);
|
|
|
font-weight: 900;
|
|
|
line-height: 1.05;
|
|
|
text-transform: uppercase;
|
|
|
@@ -476,21 +493,21 @@ body.free-ticket-result-open {
|
|
|
}
|
|
|
|
|
|
.free-ticket-error-44__copy--chance {
|
|
|
- top: 67.2%;
|
|
|
+ top: 65.8%;
|
|
|
left: 34%;
|
|
|
width: 46%;
|
|
|
color: #44516e;
|
|
|
- font-size: 8px;
|
|
|
+ font-size: clamp(10px, 2.61cqw, 12px);
|
|
|
line-height: 1.15;
|
|
|
text-wrap: balance;
|
|
|
}
|
|
|
|
|
|
.free-ticket-error-44__copy--prize {
|
|
|
- top: 71.8%;
|
|
|
+ top: 72.2%;
|
|
|
left: 34%;
|
|
|
width: 46%;
|
|
|
color: #1353c7;
|
|
|
- font-size: 15px;
|
|
|
+ font-size: clamp(15px, 3.91cqw, 18px);
|
|
|
font-weight: 900;
|
|
|
white-space: nowrap;
|
|
|
}
|
|
|
@@ -578,7 +595,8 @@ body.free-ticket-result-open {
|
|
|
.free-ticket-result__panel {
|
|
|
position: relative;
|
|
|
z-index: 1;
|
|
|
- width: min(380px, 100%, calc((100dvh - 32px) * 520 / 412));
|
|
|
+ container-type: inline-size;
|
|
|
+ width: min(460px, 100%, calc((100dvh - 32px) * 520 / 412));
|
|
|
aspect-ratio: 520 / 412;
|
|
|
overflow: hidden;
|
|
|
border-radius: clamp(12px, 3vw, 18px);
|
|
|
@@ -597,7 +615,7 @@ body.free-ticket-result-open {
|
|
|
left: 34%;
|
|
|
width: 32%;
|
|
|
color: #fff4a1;
|
|
|
- font-size: 20px;
|
|
|
+ font-size: clamp(20px, 5cqw, 23px);
|
|
|
font-weight: 900;
|
|
|
line-height: .95;
|
|
|
text-transform: uppercase;
|
|
|
@@ -609,7 +627,7 @@ body.free-ticket-result-open {
|
|
|
left: 16%;
|
|
|
width: 68%;
|
|
|
color: #061f69;
|
|
|
- font-size: 22px;
|
|
|
+ font-size: clamp(22px, 5.43cqw, 25px);
|
|
|
font-weight: 900;
|
|
|
line-height: 1.05;
|
|
|
}
|
|
|
@@ -619,7 +637,7 @@ body.free-ticket-result-open {
|
|
|
left: 25%;
|
|
|
width: 50%;
|
|
|
color: #4d5876;
|
|
|
- font-size: 9px;
|
|
|
+ font-size: clamp(11px, 2.83cqw, 13px);
|
|
|
}
|
|
|
|
|
|
.free-ticket-result__copy--ticket {
|
|
|
@@ -627,7 +645,7 @@ body.free-ticket-result-open {
|
|
|
left: 18%;
|
|
|
width: 64%;
|
|
|
color: #d60021;
|
|
|
- font-size: 15px;
|
|
|
+ font-size: clamp(15px, 3.91cqw, 18px);
|
|
|
font-weight: 900;
|
|
|
}
|
|
|
|
|
|
@@ -636,7 +654,7 @@ body.free-ticket-result-open {
|
|
|
left: 31%;
|
|
|
width: 52%;
|
|
|
color: #4d5876;
|
|
|
- font-size: 7.5px;
|
|
|
+ font-size: clamp(10px, 2.5cqw, 11.5px);
|
|
|
line-height: 1.1;
|
|
|
}
|
|
|
|
|
|
@@ -645,7 +663,7 @@ body.free-ticket-result-open {
|
|
|
left: 31%;
|
|
|
width: 52%;
|
|
|
color: #d00020;
|
|
|
- font-size: 15px;
|
|
|
+ font-size: clamp(15px, 3.91cqw, 18px);
|
|
|
font-weight: 900;
|
|
|
white-space: nowrap;
|
|
|
}
|
|
|
@@ -657,7 +675,7 @@ body.free-ticket-result-open {
|
|
|
height: 10.1%;
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
|
- font-size: 13px;
|
|
|
+ font-size: clamp(13px, 3.48cqw, 16px);
|
|
|
font-weight: 900;
|
|
|
line-height: 1;
|
|
|
}
|
|
|
@@ -675,11 +693,12 @@ body.free-ticket-result-open {
|
|
|
}
|
|
|
|
|
|
.free-ticket-result__copy--validity {
|
|
|
- top: 93.3%;
|
|
|
- left: 25%;
|
|
|
- width: 65%;
|
|
|
+ top: 89.8%;
|
|
|
+ left: 34%;
|
|
|
+ width: 56%;
|
|
|
color: #133b7f;
|
|
|
- font-size: 8px;
|
|
|
+ font-size: clamp(10px, 2.61cqw, 12px);
|
|
|
+ line-height: 1.05;
|
|
|
}
|
|
|
|
|
|
.free-ticket-result__action {
|
|
|
@@ -724,21 +743,14 @@ body.free-ticket-result-open {
|
|
|
right: 10px;
|
|
|
}
|
|
|
|
|
|
- .free-ticket-error-43__copy--title {
|
|
|
- font-size: 14px;
|
|
|
- }
|
|
|
-
|
|
|
- .free-ticket-error-44__copy--title {
|
|
|
- font-size: 16px;
|
|
|
- }
|
|
|
-
|
|
|
- .free-ticket-result__copy--title {
|
|
|
- font-size: 20px;
|
|
|
- }
|
|
|
+}
|
|
|
|
|
|
- .free-ticket-error-44__copy--badge,
|
|
|
- .free-ticket-result__copy--badge {
|
|
|
- font-size: 16px;
|
|
|
+@media (max-width: 600px) {
|
|
|
+ .free-ticket-error-43,
|
|
|
+ .free-ticket-error-44,
|
|
|
+ .free-ticket-error-45,
|
|
|
+ .free-ticket-result {
|
|
|
+ padding: 6px;
|
|
|
}
|
|
|
}
|
|
|
|