Update layout

src/static/css/main.css

@@ -1,4 +1,5 @@
 @import "../fonts/inter/inter.css";
+@import "../fonts/remix/remixicon.css";
 
 *, *::before, *::after {
 	box-sizing: border-box;
@@ -17,9 +18,10 @@
 
 	--link: #0066ffde;
 
-	--colw: 20rem;
+	--colw: 18rem;
+	--colgap: 2rem;
 	--gap: 1rem;
-	--maxw: 90rem;
+	--maxw: 60rem;
 	--lh: 1.3rem;
 
 	--bl-lh: 2rem;
@@ -37,13 +39,13 @@ body {
 	font-feature-settings: "ss01", "ss02", "ss03", "cv05", "cv08";
 	max-width: var(--maxw);
 	display: grid;
-	grid-template-columns: repeat(auto-fill, minmax(var(--colw), 1fr));
-	grid-gap: var(--gap);
+	grid-template-columns: var(--colw) 1fr;
+	grid-gap: var(--colgap);
 }
-body > div {
+/* body > div {
 	column-width: var(--colw);
 	column-gap: var(--gap);
-}
+} */
 body > div.info {grid-column: 1}
 body > div.cv {grid-column: 2 / -1}
 @media (max-width: 40rem) {
@@ -111,30 +113,36 @@ li {padding-left: calc(var(--gap) / 2)}
 .block {
 	display: grid;
 	grid-template-columns: repeat(3, 1fr);
+	grid-template-columns: 1fr;
 	grid-gap: .2rem;
 	grid-auto-rows: auto;
 }
 .img-block > img {
 	width: 100%;
-	aspect-ratio: 1;
+	height: 6rem;
 	object-fit: cover;
 }
 .link-block > a {
 	background: var(--bg-01);
 	color: inherit;
 	padding: var(--gap);
-	aspect-ratio: 1;
+	height: 6rem;
 	display: grid;
 	grid-template-columns: 1fr;
 	grid-template-rows: 1fr auto;
 }
 .link-block > a:hover {
 	background: var(--bg-02);
+	text-decoration: none;
 }
-.link-block > a > img {
-	width: 2rem;
+.link-block > a:hover > span.desc {
+	text-decoration: underline;
 }
-.link-block > a > span {
+.link-block > a > span.i {
+	font-size: 2rem;
+	text-align: right;
+}
+.link-block > a > span.desc {
 	grid-row: 2;
 	overflow: hidden;
 	text-overflow: ellipsis;