-.logo {
- float: left;
- margin: 10px;
+body {
+ margin: 1rem;
+ margin-top: 2rem;
+ font-family: system-ui;
}
-.details {
- float: left;
+main {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ gap: 1rem 2rem;
+ max-width: 960px;
+
+ .logo {
+ flex-shrink: 0;
+
+ img {
+ display: block;
+ max-width: 100%;
+ height: auto;
+ }
+ }
+
+ .details {
+ h1 {
+ margin-top: 0;
+ }
+ }
+}
+
+@media (min-width: 640px) {
+ body {
+ margin: 2rem;
+ }
+
+ main {
+ flex-direction: row;
+
+ .logo {
+ align-self: start;
+ }
+ }
}