Fix : 그리드 격자 업데이트
This commit is contained in:
parent
803774af43
commit
c82e332c41
@ -241,7 +241,7 @@
|
|||||||
|
|
||||||
.values-grid {
|
.values-grid {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
grid-template-columns: repeat(2, 1fr);
|
||||||
gap: var(--spacing-xl);
|
gap: var(--spacing-xl);
|
||||||
margin-top: var(--spacing-2xl);
|
margin-top: var(--spacing-2xl);
|
||||||
}
|
}
|
||||||
@ -313,6 +313,6 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.values-grid {
|
.values-grid {
|
||||||
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
grid-template-columns: 1fr;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -154,7 +154,7 @@
|
|||||||
|
|
||||||
.features-grid {
|
.features-grid {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
grid-template-columns: repeat(2, 1fr);
|
||||||
gap: var(--spacing-xl);
|
gap: var(--spacing-xl);
|
||||||
margin-top: var(--spacing-2xl);
|
margin-top: var(--spacing-2xl);
|
||||||
max-width: 1200px;
|
max-width: 1200px;
|
||||||
|
|||||||
@ -615,9 +615,15 @@
|
|||||||
/* 추가 옵션 */
|
/* 추가 옵션 */
|
||||||
.options-grid {
|
.options-grid {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: repeat(3, 1fr);
|
grid-template-columns: repeat(2, 1fr);
|
||||||
gap: var(--spacing-xl);
|
gap: var(--spacing-xl);
|
||||||
margin-bottom: var(--spacing-2xl);
|
margin-bottom: var(--spacing-2xl);
|
||||||
|
justify-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.options-grid .option-card:nth-child(3) {
|
||||||
|
grid-column: 1 / -1;
|
||||||
|
max-width: 500px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.option-card {
|
.option-card {
|
||||||
@ -902,7 +908,7 @@
|
|||||||
|
|
||||||
.specs-list {
|
.specs-list {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: repeat(3, 1fr);
|
grid-template-columns: repeat(2, 1fr);
|
||||||
gap: var(--spacing-sm);
|
gap: var(--spacing-sm);
|
||||||
justify-items: center;
|
justify-items: center;
|
||||||
}
|
}
|
||||||
@ -1420,7 +1426,21 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.grid-3 {
|
.grid-3 {
|
||||||
grid-template-columns: repeat(3, 1fr);
|
grid-template-columns: repeat(2, 1fr);
|
||||||
|
}
|
||||||
|
|
||||||
|
.grid-4 {
|
||||||
|
grid-template-columns: repeat(4, 1fr);
|
||||||
|
}
|
||||||
|
|
||||||
|
.grid-2-1 {
|
||||||
|
grid-template-columns: repeat(2, 1fr);
|
||||||
|
}
|
||||||
|
|
||||||
|
.grid-2-1 .card:nth-child(3) {
|
||||||
|
grid-column: 1 / -1;
|
||||||
|
max-width: 600px;
|
||||||
|
margin: 0 auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
.card {
|
.card {
|
||||||
@ -1515,11 +1535,17 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.grid-2,
|
.grid-2,
|
||||||
.grid-3 {
|
.grid-3,
|
||||||
|
.grid-4,
|
||||||
|
.grid-2-1 {
|
||||||
grid-template-columns: 1fr;
|
grid-template-columns: 1fr;
|
||||||
gap: var(--spacing-lg);
|
gap: var(--spacing-lg);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.grid-2-1 .card:nth-child(3) {
|
||||||
|
max-width: none;
|
||||||
|
}
|
||||||
|
|
||||||
.card {
|
.card {
|
||||||
margin-bottom: var(--spacing-lg);
|
margin-bottom: var(--spacing-lg);
|
||||||
padding: var(--spacing-xl);
|
padding: var(--spacing-xl);
|
||||||
|
|||||||
@ -61,7 +61,7 @@
|
|||||||
<h2>왜 밍글 스튜디오인가?</h2>
|
<h2>왜 밍글 스튜디오인가?</h2>
|
||||||
<p>최고의 장비와 전문성으로 여러분의 프로젝트를 지원합니다</p>
|
<p>최고의 장비와 전문성으로 여러분의 프로젝트를 지원합니다</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="features-grid grid grid-3">
|
<div class="features-grid grid grid-2-1">
|
||||||
<div class="feature-card card">
|
<div class="feature-card card">
|
||||||
<div class="feature-icon">🎬</div>
|
<div class="feature-icon">🎬</div>
|
||||||
<h3>최첨단 OptiTrack 시스템</h3>
|
<h3>최첨단 OptiTrack 시스템</h3>
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user