diff --git a/index.html b/index.html
index 84e71c4..66ae504 100644
--- a/index.html
+++ b/index.html
@@ -101,14 +101,33 @@
.container {
width: 100%;
- max-width: 800px;
+ max-width: 1400px;
+ }
+
+ .main-layout {
+ display: grid;
+ grid-template-columns: 1fr 1fr;
+ gap: 20px;
+ align-items: start;
+ }
+
+ .main-layout > .left-column,
+ .main-layout > .right-column {
+ display: flex;
+ flex-direction: column;
+ gap: 20px;
+ }
+
+ @media (max-width: 1024px) {
+ .main-layout {
+ grid-template-columns: 1fr;
+ }
}
.card {
background-color: var(--bg-card);
border: 2px solid var(--border);
padding: 28px;
- margin-bottom: 20px;
}
.header {
@@ -773,10 +792,11 @@
.emergency-grid {
display: grid;
- grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
- gap: 12px;
+ grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
+ gap: 16px;
}
+
.emergency-card {
display: flex;
align-items: center;
@@ -840,6 +860,7 @@
.emergency-section {
margin-top: 20px;
border: 2px solid var(--border);
+ height: fit-content;
}
.emergency-section summary {
@@ -863,16 +884,20 @@
}
.emergency-section summary::after {
- content: 'expand_more';
- font-family: 'Material Icons';
- font-size: 24px;
+ content: '▼';
+ font-size: 12px;
transition: transform 0.2s ease;
+ opacity: 0.5;
}
.emergency-section[open] summary::after {
transform: rotate(180deg);
}
+ .emergency-section summary:hover::after {
+ opacity: 1;
+ }
+
.emergency-section summary:hover {
color: var(--orange);
background-color: var(--bg-card);
@@ -885,18 +910,20 @@