Use mobile-style poster on desktop

This commit is contained in:
DESKTOP-KSVGT20\shkim
2026-05-10 23:14:52 +09:00
parent 6943e6ef3e
commit 4525476945
+13 -13
View File
@@ -31,10 +31,10 @@ body {
}
.wedding-card {
width: min(100%, 720px);
width: min(100%, 430px);
min-height: 100vh;
margin: 0 auto;
padding: 0 clamp(12px, 3.6vw, 34px) 38px;
padding: 0 0 38px;
background:
radial-gradient(ellipse at 50% 30%, rgba(218, 218, 212, 0.28), transparent 58%),
radial-gradient(circle at 50% 35%, rgba(255, 255, 255, 0.7), transparent 48%),
@@ -44,9 +44,9 @@ body {
.poster {
position: relative;
width: min(100%, 900px);
width: 100%;
margin: 0 auto;
aspect-ratio: 3 / 2;
aspect-ratio: 390 / 545;
overflow: hidden;
padding: 0;
}
@@ -74,7 +74,7 @@ body {
position: absolute;
inset: 0 50% 0 auto;
z-index: 3;
width: 100%;
width: 212%;
height: 100%;
max-width: none;
object-fit: cover;
@@ -87,10 +87,10 @@ body {
.poster__portrait {
position: absolute;
z-index: 2;
left: 34%;
right: 34%;
left: 18%;
right: 18%;
top: 13%;
bottom: 16.5%;
bottom: 24.8%;
overflow: hidden;
background: #ffffff;
border-radius: 50% 50% 4px 4px / 14% 14% 4px 4px;
@@ -99,8 +99,8 @@ body {
.poster__couple {
position: absolute;
left: 51.5%;
top: 13%;
width: 148%;
top: 14%;
width: 145%;
height: auto;
max-width: none;
transform: translateX(-50%);
@@ -123,7 +123,7 @@ body {
h1 {
margin: 0;
color: #565656;
font-size: clamp(32px, 7.5vw, 50px);
font-size: clamp(32px, 7.5vw, 43px);
line-height: 1.1;
font-weight: 400;
letter-spacing: 0.12em;
@@ -140,13 +140,13 @@ h1 {
.poster__date {
margin-top: clamp(12px, 2.8vw, 20px);
font-size: clamp(16px, 3.3vw, 24px);
font-size: clamp(15px, 3.3vw, 19px);
font-weight: 700;
}
.poster__subtitle {
margin-top: clamp(14px, 3vw, 22px);
font-size: clamp(15px, 3.3vw, 24px);
font-size: clamp(14px, 3.3vw, 19px);
font-weight: 700;
}