Use sass instead of pure css

src/sass/profile/_base.scss

@@ -0,0 +1,61 @@
+@import '_variables';
+@import '_mixins';
+
+@import 'card';
+@import 'photo-rail';
+
+.profile-timeline, .profile-tabs {
+    @include panel(auto, 900px);
+}
+
+.profile-tabs {
+    > .timeline-tab {
+        width: 68% !important;
+    }
+}
+
+.profile-banner {
+    padding-bottom: 4px;
+
+    a {
+        display: inherit;
+        line-height: 0;
+    }
+
+    img {
+        width: 100%;
+    }
+}
+
+.profile-banner-color {
+    width: 100%;
+    padding-bottom: 25%;
+}
+
+.profile-tab {
+    padding: 0 4px 0 0;
+    box-sizing: border-box;
+    display: inline-block;
+    font-size: 14px;
+    text-align: left;
+    vertical-align: top;
+    max-width: 32%;
+    top: 50px;
+}
+
+@media(max-width: 600px) {
+    .profile-tabs {
+        width: 100vw;
+
+        .timeline-tab {
+            width: 100% !important;
+        }
+    }
+
+    .profile-tab {
+        width: 100%;
+        max-width: unset;
+        position: initial !important;
+        padding: 0;
+    }
+}

src/sass/profile/card.scss

@@ -0,0 +1,120 @@
+@import '_variables';
+@import '_mixins';
+
+.profile-card {
+    flex-wrap: wrap;
+    background: $bg_panel;
+    padding: 12px;
+    display: flex;
+}
+
+.profile-card-info {
+    @include breakable;
+    width: 100%;
+}
+
+.profile-card-tabs-name {
+    @include breakable;
+    max-width: 100%;
+}
+
+.profile-card-username {
+    @include breakable;
+    color: $fg_color;
+    font-size: 14px;
+    display: block;
+}
+
+.profile-card-fullname {
+    @include breakable;
+    color: $fg_color;
+    font-size: 16px;
+    font-weight: bold;
+    text-shadow: none;
+    max-width: 100%;
+}
+
+.profile-card-avatar {
+    display: block;
+    width: 100%;
+    padding-bottom: 6px;
+    margin-right: 4px;
+
+    img {
+        display: block;
+        width: calc(100% - 8px);
+        height: 100%;
+        margin: 0;
+        border: 4px solid $darker_grey;
+        background: $bg_color;
+    }
+}
+
+.profile-card-extra {
+    display: contents;
+    flex: 100%;
+    margin-top: 7px;
+
+    .profile-bio {
+        @include breakable;
+        width: 100%;
+        margin: 4px -6px 6px 0;
+
+        p {
+            margin: 0;
+        }
+    }
+
+    .profile-joindate, .profile-location, profile-website {
+        color: $fg_faded;
+        margin: 2px 0;
+        width: 100%;
+    }
+}
+
+.profile-card-extra-links {
+    margin-top: 8px;
+    font-size: 14px;
+    width: 100%;
+}
+
+.profile-statlist {
+    display: flex;
+    flex-wrap: wrap;
+    padding: 0;
+    width: 100%;
+    justify-content: space-between;
+
+    li {
+        display: table-cell;
+        text-align: center;
+    }
+}
+
+.profile-stat-header {
+    font-weight: bold;
+}
+
+.profile-stat-num {
+    display: block;
+}
+
+@media(max-width: 600px) {
+    .profile-card-info {
+        display: flex;
+    }
+
+    .profile-card-tabs-name {
+        @include breakable;
+    }
+
+    .profile-card-avatar {
+        height: 60px;
+        width: unset;
+
+        img {
+            border-width: 2px;
+            width: unset;
+        }
+    }
+}

src/sass/profile/photo-rail.scss

@@ -0,0 +1,84 @@
+@import '_variables';
+
+.photo-rail {
+    &-card {
+        float: left;
+        background: $bg_panel;
+        border-radius: 0 0 4px 4px;
+        width: 100%;
+        margin: 5px 0;
+    }
+
+    &-header {
+        padding: 5px 12px 0;
+    }
+
+    &-header-mobile {
+        padding: 5px 12px 0;
+        display: none;
+    }
+
+    &-label {
+        width: 100%;
+        float: unset;
+        color: $accent;
+        display: flex;
+        justify-content: space-between;
+    }
+
+    &-grid {
+        display: grid;
+        grid-template-columns: repeat(4, 1fr);
+        grid-gap: 3px 3px;
+        padding: 5px 12px 12px;
+
+        a {
+            position: relative;
+            border-radius: 5px;
+
+            &:before {
+                content: "";
+                display: block;
+                padding-top: 100%;
+            }
+        }
+
+        img {
+            height: 100%;
+            width: 100%;
+            border-radius: 4px;
+            object-fit: cover;
+            position: absolute;
+            top: 0;
+            left: 0;
+            bottom: 0;
+            right: 0;
+        }
+    }
+}
+
+#photo-rail-toggle {
+    display: none;
+
+    &:checked ~ .photo-rail-grid {
+        max-height: 600px;
+        padding-bottom: 12px;
+    }
+}
+
+@media(max-width: 600px) {
+    .photo-rail-header {
+        display: none;
+    }
+
+    .photo-rail-header-mobile {
+        display: block;
+    }
+
+    .photo-rail-grid {
+        max-height: 0;
+        padding-bottom: 0;
+        overflow: hidden;
+        transition: max-height 0.4s;
+    }
+}