:root {
    --text-color: #322C28;
    --code-text-color: #FCFAF2;
    --bg-color: #EBF4F4;
    --bg-blur-color: rgba(235, 244, 244, 0.8);
    --card-color: #FFFFFF;
    --card-content-color: #F6F7F8;
    --card-content-hv-color: #E6E6E6;
    --main-color: #11659A;
    --main-intext-color: #FFFFFF;
    --accent-color: #51A8DD;
    --hl-color: #373C38;
    --menu-color: #D8E3E7;
    --menu-at-top-color: rgba(235, 244, 244, 0.95);
    --menu-hv-color: #D0DFE6;
    --menu-button-color: #322C28;
    --main-header-right-content-color: linear-gradient(to bottom, rgba(255, 255, 255, 0.8) 25%, #ffffff 75%);
    --image-tag-color: rgba(27, 27, 27, 0.4);
}

@media (prefers-color-scheme: dark) {
    :root {
        --text-color: #FCFAF2;
        --code-text-color: #FCFAF2;
        --bg-color: #121212;
        --bg-blur-color: rgba(18, 18, 18, 0.8);
        --card-color: #1B1B1B;
        --card-content-color: #212121;
        --card-content-hv-color: #3C3C3C;
        --main-color: #51A8DD;
        --main-intext-color: #FCFAF2;
        --accent-color: #11659A;
        --hl-color: #373C38;
        --menu-color: #242424;
        --menu-at-top-color: rgba(18, 18, 18, 0.95);
        --menu-hv-color: #3C3C3C;
        --menu-button-color: #FCFAF2;
        --main-header-right-content-color: linear-gradient(to bottom, rgba(27, 27, 27, 0.8) 25%, #1B1B1B 75%);
        --image-tag-color: rgba(27, 27, 27, 0.4);
    }
}

@font-face {
    font-family: 'Overpass';
    src: url('../font/Overpass-Regular.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Overpass';
    src: url('../font/Overpass-Bold.woff2') format('woff2');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Overpass Mono';
    src: url('../font/OverpassMono-Regular.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

::-webkit-scrollbar {
    width: 0.8rem; /* 滚动条宽度 */
}

::-webkit-scrollbar-track {
    background-color: var(--card-color) /* 滚动条背景颜色 */
}

::-webkit-scrollbar-thumb {
    background-color: var(--main-color) /* 滚动条滑块颜色 */
}

::-webkit-scrollbar-thumb:hover {
    background-color: var(--accent-color); /* 滚动条滑块悬停颜色 */
}

body {
    font-family: -apple-system, BlinkMacSystemFont, PingFang SC, Microsoft YaHei, Source Han Sans SC, Noto Sans CJK SC, WenQuanYi Micro Hei, Helvetica Neue, sans-serif;
    margin: 0;
    padding: 0;
    overflow-y: overlay;
    color: var(--text-color);
    background-color: var(--bg-color);
}

a {
    text-decoration: none;
    color: var(--main-color);
}

@media (hover: hover) and (pointer: fine) {
    a:hover {
        text-decoration: underline;
        text-decoration-color: var(--main-color);
    }
}

img {
    aspect-ratio: attr(width) / attr(height);
}

/* 引用标签 */
blockquote {
    font-style: italic;
    padding: 0.5rem 1.2rem;
    margin: 1rem;
    border-left: 0.35rem solid var(--main-color);
    background-color: var(--bg-color);
}

/* 代码块样式 */
.highlight {
    width:fit-content;
    width:-webkit-fit-content;
    width:-moz-fit-content;
    padding: 0.5rem;
    color: var(--code-text-color);
    background-color: var(--hl-color);
}

pre {
    white-space: pre-wrap;
    word-wrap: break-word;
    margin: 0;
}

code {
    font-family: 'Overpass Mono';
    font-weight: normal;
    font-style: normal;
}

/* 页首、页尾通用设定 */
header, footer {
    margin: 2rem;
    text-align: center;
    font-family: 'Overpass';
    font-weight: normal;
    font-style: normal;
}

/* 页首 */
header {
    position: sticky;
    z-index: -1;
    top: 2rem;
}

/* 页首网站头像 */
.header-avatar {
    width: 6rem;
    height: 6rem;
    border-radius: 50%;
}

/* 页首标题 */
.header-title {
    margin: 0.8rem auto;
    font-family: 'Overpass';
    font-weight: bold;
    font-style: normal;
}

/* 页首描述 */
.header-description {
    margin: 0;
}

/* 主容器 */
main {
    display: grid;
    grid-template-columns: 1fr;
    max-width: 80%;
    margin: 0 auto;
    background-color: var(--bg-color);
}

/* 卡片 */
.card {
    padding: 1.5rem;
    background-color: var(--card-color);
}

.center-card {
    text-align: center;
}

.card-title {
    position: relative;
    line-height: 1.5;
    padding-left: 0.65rem;
    margin-top: 0;
    transition: 0.25s padding ease-out;
}

.card-title-h3 {
    line-height: 1.35rem;
}

.card-title-h3-icon {
    fill: var(--text-color);
    height: 1.35rem;
    vertical-align: middle;
    margin-right: 0.2rem;
}

.card-title::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 0.3rem;
    height: 1.5rem;
    transform: translateY(-45%);
    z-index: 1;
    transition: 0.1s width ease-out;
    background-color: var(--main-color);
}

.list-text {
    margin: 1rem 0;
}

.text-icon {
    fill: var(--text-color);
    height: 1.35rem;
    vertical-align: top;
}

.main-header {
    display: grid;
    grid-template-columns: 1fr 3fr;
    grid-gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.main-header-left-a-description {
    margin: 0.8rem 0;
}

.main-header-right {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 0;
    background: url(../img/background.webp?v=1.1) center center no-repeat
    var(--card-content-color);
    background-size: cover;
    overflow: hidden;
    position: relative;
}

.main-header-right-window {
    height: 11.5rem;
}

@media (hover: hover) and (pointer: fine) {
    .main-header-right-window:hover + .main-header-right-content {
        transform: translateY(100%);
    }
}

.main-header-right-content {
    flex: 1;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: 1.5rem;
    background: var(--main-header-right-content-color);
    transform: translateY(0);
    transition: transform 0.5s;
    z-index: 1;
}

.main-header-right-info {
    display: flex;
    align-items: center;
    color: var(--main-intext-color);
    background-color: var(--image-tag-color);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    position: absolute;
    left: 0.5rem;
    bottom: 0.5rem;
    padding: 0.5rem 2rem 0.5rem 0.5rem;
    border-radius: 0.5rem;
}

.main-header-right-info-avatar {
    flex-shrink: 0;
    margin-right: 0.5rem;
}

.main-header-right-info-avatar img {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
}

.main-header-right-info-content-title,
.main-header-right-info-content-description {
    font-size: 1rem;
    margin: 0;
}

/* 菜单 */
.menu {
    display: flex;
    position: sticky;
    top: -1px; /* 损失一点高度，来避免采用 JS scroll 方式判断 .menu 是否到顶，感谢垃圾 Safari 独特的滚动判断机制 */
    z-index: 2;
    margin-bottom: 0.5rem;
    background-color: var(--menu-color);
    transition: 0.5s background-color;
    height: calc(3rem + 1px); /* 菜单吸顶预留 1px */
}

.menu-a {
    display: inline-flex;
    align-items: flex-end;
    justify-content: center;
    width: 100%;
}

/* 移动端抽屉菜单不展示 */
.menu-b {
    display: none;
}

.menu-b-drawer-container {
    display: none;
}

.menu.at-top {
    background-color: var(--menu-at-top-color);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* 菜单按钮 */
.menu-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border: none;
    width: 5rem;
    height: 3rem;
    vertical-align: middle;
    font-size: 1rem;
    line-height: 2rem;
    box-sizing: content-box;
    padding: 0;
    color: var(--menu-button-color);
    background-color: transparent;
    transition: 0.5s background-color;
    position: relative;
}

@media (hover: hover) and (pointer: fine) {
    .menu-button:hover {
        background-color: var(--menu-hv-color);
    }
}

.menu-button-active {
    font-weight: bold;
    color: var(--main-color);
}

.menu-icon {
    width: 1.5rem;
    height: 1.5rem;
    padding-right: 0.2rem;
    fill: var(--menu-button-color);
}

.menu-button-active .menu-icon {
    fill: var(--main-color);
}

/* 个人头像 */
.personal-avatar {
    width: 5.5rem;
    height: 5.5rem;
    border-radius: 50%;
}

/* 子标题 */
.subtitle {
    margin: 0.5rem;
}

/* 社交图标 */
.social-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border-radius: 50%;
    width: 2.5rem;
    height: 2.5rem;
    box-sizing: content-box;
    padding: 0;
    border: 0.1rem solid var(--text-color);
    background-color: var(--card-color);
    transition: 0.5s background-color, 0.5s border;
}

@media (hover: hover) and (pointer: fine) {
    .social-button:hover {
        background-color: var(--main-color);
        border: 0.1rem solid var(--main-color);
    }
}

.social-im-button {
    display: inline-block;
    line-height: 2rem;
    height: 2rem;
    width: 5.8rem;
    border-radius: 0.5rem;
    text-align: center;
    color: var(--text-color);
    background-color: var(--card-color);
    border: 0.1rem solid var(--text-color);
    transition: 0.5s background-color, 0.25s color, 0.5s border;
}

@media (hover: hover) and (pointer: fine) {
    .social-im-button:hover {
        color: var(--card-color);
        background-color: var(--main-color);
        border: 0.1rem solid var(--main-color);
    }
}

.social-icon {
    width: 1.5rem;
    height: 1.5rem;
    fill: var(--text-color);
    transition: 0.25s fill;
}

@media (hover: hover) and (pointer: fine) {
    .social-button:hover .social-icon {
        fill: var(--card-color);
    }
}

/* 首页 */
.index-gallery-content {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 0.5rem;
}

.index-gallery-content img {
    object-fit: cover; /* 使用 cover 填满整个 grid 单元格 */
    width: 100%;
    height: 100%;
}

.index-gallery-photo {
    position: relative;
    border-radius: 0.5rem;
    background-color: var(--card-content-color);
    overflow: hidden;
}

.index-gallery-photo-info {
    display: inline-flex;
    align-items: center;
    position: absolute;
    bottom: 0.5rem;
    left: 0.5rem;
    padding: 0.5rem;
    border-radius: 0.5rem;
    color: var(--main-intext-color);
    background-color: var(--image-tag-color);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.index-gallery-photo-info-icon {
    width: 1rem;
    height: 1rem;
    padding-right: 0.2rem;
    fill: var(--main-intext-color);
}

.index-gallery-photo1 { grid-area: 1 / 1 / 3 / 2; }
.index-gallery-photo2 { grid-area: 1 / 2 / 2 / 3; }
.index-gallery-photo3 { grid-area: 1 / 3 / 2 / 4; }
.index-gallery-photo4 { grid-area: 2 / 2 / 3 / 3; }
.index-gallery-photo5 { grid-area: 2 / 3 / 3 / 4; }

/* 关于页 */
.about-color-span {
    display: inline-block;
    vertical-align: middle;
    height: 1.2rem;
    width: 3.5rem;
}

/* 文章页 */
.post-index {
    display: grid;
    grid-template-columns: 1fr 3fr;
    grid-gap: 0.5rem;
    align-items: start;
}

.post-index .main-content .card {
    padding: 0;
}

.post-index-content a {
    text-decoration: none;
}

.post-index-title {
    margin-top: 0;
}

.post-link {
    display: block;
    padding: 1.5rem;
    color: var(--text-color);
    background-color: var(--card-color);
    transition: background-color 0.5s, color 0.25s;
}

@media (hover: hover) and (pointer: fine) {
    .post-link:hover {
        color: var(--card-color);
        background-color: var(--main-color);
    }

    .post-link:hover .post-category {
        color: var(--main-color);
        background-color: var(--card-color);
    }
}

.post-left-menu {
    position: sticky;
    top: 3rem;
}

.post-article-main {
    max-width: 65%;
}

.post-article-title {
    text-align: center;
}

.post-article {
    margin-bottom: 0.5rem;
}

.post-article img {
    max-height: 35rem;
    max-width: 80%; 
}

.post-article-footer {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.post-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border-radius: 50%;
    width: 2.5rem;
    height: 2.5rem;
    box-sizing: content-box;
    padding: 0;
    border: 0.1rem solid var(--text-color);
    background-color: var(--card-color);
    transition: 0.5s background-color, 0.5s border;
}

@media (hover: hover) and (pointer: fine) {
    .post-button:hover {
        background-color: var(--main-color);
        border: 0.1rem solid var(--main-color);
    }
}

.post-icon {
    width: 1.5rem;
    height: 1.5rem;
    fill: var(--text-color);
    transition: 0.25s fill;
}

@media (hover: hover) and (pointer: fine) {
    .post-button:hover .post-icon {
        fill: var(--card-color);
    }
}

.post-article-copyright-icon {
    width: 2rem;
    fill: var(--text-color);
}

.post-category {
    padding: 0 0.5rem;
    border-radius: 0.25rem;
    color: var(--card-color);
    background-color: var(--main-color);
    transition: background-color 0.5s, color 0.25s;
}

.post-left-menu-category {
    display: inline-block;
    line-height: 2rem;
    height: 2rem;
    width: 3.75rem;
    border-radius: 0.5rem;
    text-align: center;
    color: var(--text-color);
    background-color: var(--card-color);
    border: 0.1rem solid var(--text-color);
    transition: 0.5s background-color, 0.25s color, 0.5s border;
}

@media (hover: hover) and (pointer: fine) {
    .post-left-menu-category:hover {
        color: var(--card-color);
        background-color: var(--main-color);
        border: 0.1rem solid var(--main-color);
    }
}

.post-left-menu-a-description {
    margin: 0.8rem 0;
}

.p-link {
    word-break: break-all;
}

.main-content {
    display: grid;
    grid-template-columns: 1fr;
    grid-gap: 0.5rem;
}

/* 技能列表 */
.skill-list-card {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-gap: 0.5rem;
}

.skill-list-content {
    border-radius: 0.5rem;
    padding-top: 1rem;
    padding-left: 1rem;
    background-color: var(--card-content-color);
    transition: 0.5s background-color;
}

.skill-icon {
    width: 3rem;
    pointer-events: none;
    fill: var(--text-color);
}

/* 设备列表 */
.device-list-card {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 0.5rem;
}

.device-list-content {
    border-radius: 0.5rem;
    padding-top: 1rem;
    padding-left: 1rem;
    background-color: var(--card-content-color);
    transition: 0.5s background-color;
}

.device-icon {
    width: 3rem;
    pointer-events: none;
    fill: var(--text-color);
}

@media (hover: hover) and (pointer: fine) {
    .skill-list-content:hover,
    .device-list-content:hover {
        background-color: var(--card-content-hv-color);
    }
}

/* 友链列表 */
.friends-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 0.5rem;
}

.friends-card-info {
    grid-column: 1 / 4;
}

.friends-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    text-align: left;
}

.friends-card-info {
    grid-column: 1 / 4;
}

.friends-card-content {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.friends-card-title {
    margin-bottom: 0.5rem;
}

.friends-card-description {
    display: inline;
}

.friends-img {
    width: 5rem;
    height: 5rem;
    border-radius: 0.75rem;
}

/* 卡片悬停点击效果 */
.friends-card-link {
    padding: 1.2rem;
    text-decoration: none;
    color: var(--text-color);
    background-color: var(--card-color);
    transition: background-color 0.5s, color 0.25s;
}

@media (hover: hover) and (pointer: fine) {
    .friends-card-link:hover {
        text-decoration: none;
        color: var(--card-color);
        background-color: var(--main-color);
    }
}

@media (hover: hover) and (pointer: fine) {
    .friends-card-link:hover .card-title {
        padding-left: 0;
        transition: 0.25s padding ease-out;
    }
    
    .friends-card-link:hover .card-title::before {
        width: 0;
        transition: 0.1s width ease-out;
    }
}

/* 按钮 */
.button {
    border: none;
    padding: 0.5rem 1.5rem;
    text-align: center;
    text-decoration: none;
    display: block;
    font-size: 1rem;
    color: var(--main-intext-color);
    background-color: var(--main-color);
}

.page-center {
    text-align: center;
}

@media screen and (min-width: 1800px) {
    main {
        max-width: 65%;
    }

    .post-article-main {
        max-width: 55%;
    }
}

@media screen and (max-width: 1280px) {
    main {
        max-width: 85%;
    }

    .post-article-main {
        max-width: 75%;
    }

    .main-header {
        grid-template-columns: 1fr 2fr;
    }

    .friends-list {
        grid-template-columns: repeat(2, 1fr);
    }

    .friends-card-info {
        grid-column: 1 / 3;
    }

    /* 文章侧栏收缩 */
    .post-index {
        grid-template-columns: 1fr;
    }

    .post-left-menu {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        position: static;
    }

    /* 单独设置左右的样式 */
    .post-left-menu-a,
    .post-left-menu-b {
        text-align: left;
    }

    .post-left-menu-a-title {
        margin: 1.2rem 0 0;
    }

    .post-left-menu-a-description {
        margin: 0.15rem 0;
    }

    /* 缩小个人头像 */
    .post-avatar {
        width: 5rem;
        height: 5rem;
        border-radius: 1rem;
    }

    .post-left-menu-b-title {
        position: relative;
        padding-left: 0.65rem;
        margin: 0 0 0.5rem;
    }
    
    .post-left-menu-b-title::before {
        content: "";
        position: absolute;
        top: 50%;
        left: 0;
        transform: translateY(-45%);
        width: 0.3rem;
        height: 75%;
        background-color: var(--main-color);
    }

    .post-left-menu-b-space {
        padding: 0.5rem 0;
    }

    .post-button {
        border-radius: 0.5rem;
    }

    .post-left-menu-category {
        border-radius: 0.5rem;
    }
}

/* for iPad */
@media screen and (max-width: 1024px) {
    .post-article-main {
        max-width: 85%;
    }

    .menu {
        margin-bottom: 0;
    }

    .main-header {
        grid-template-columns: 1fr;
    }

    .main-header-left {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }

    /* 单独设置左右的样式 */
    .main-header-left-a,
    .main-header-left-b {
        text-align: left;
    }

    .main-header-left-a-title {
        margin: 1.2rem 0 0;
    }

    .main-header-left-a-description {
        margin: 0.15rem 0;
    }

    /* 将个人头像转换为圆角矩形样式 */
    .personal-avatar {
        width: 5rem;
        height: 5rem;
        border-radius: 1rem;
    }

    .main-header-left-b-title {
        position: relative;
        padding-left: 0.65rem;
        margin: 0 0 0.5rem;
    }
    
    .main-header-left-b-title::before {
        content: "";
        position: absolute;
        top: 50%;
        left: 0;
        transform: translateY(-45%);
        width: 0.3rem;
        height: 75%;
        background-color: var(--main-color);
    }

    .main-header-left-b-space {
        padding: 0.5rem 0;
    }

    /* 首页 */
    .index-gallery-content {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(6, 1fr);
        gap: 0.5rem;
    }

    .index-gallery-photo1 { grid-area: 1 / 1 / 5 / 2; }
    .index-gallery-photo2 { grid-area: 1 / 2 / 3 / 3; }
    .index-gallery-photo3 { grid-area: 3 / 2 / 5 / 3; }
    .index-gallery-photo4 { grid-area: 5 / 1 / 7 / 2; }
    .index-gallery-photo5 { grid-area: 5 / 2 / 7 / 3; }

    .social-button {
        border-radius: 0.5rem;
    }

    .social-im-button {
        border-radius: 0.5rem;
    }

    .skill-list-card {
        grid-template-columns: repeat(3, 1fr);
    }

    .device-list-card {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media screen and (max-width:680px) {
    .skill-list-card {
        grid-template-columns: repeat(2, 1fr);
    }

    .device-list-card {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media screen and (max-width:576px) {
    main {
        max-width: 100%;
    }

    .post-article-main {
        max-width: 100%;
    }

    /* 卡片 */
    .card {
        padding: 1.2rem;
    }

    .main-header-right-content {
        padding: 1.2rem;
    }

    header {
        margin: 0;
        padding: 2rem;
        top: 0.5rem;
    }

    .menu-a {
        justify-content: left;
    }

    .menu-b {
        display: inline-flex;
        align-items: flex-end;
        justify-content: right;
    }

    .menu-b-drawer-container {
        display: block;
        position: fixed;
        top: 0;
        right: -100%; /* 初始时隐藏在屏幕右侧 */
        width: 100%;
        height: 100%;
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        transition: right 0.3s ease; /* 在right属性上应用过渡，动画时长为0.3秒，采用ease缓动函数 */
        z-index: 3;
        background-color: var(--bg-blur-color);
    }

    /* 打开抽屉菜单时调整左边距 */
    .menu-b-drawer-container.open {
        right: 0;
    }

    .menu-b-drawer-content {
        padding: 2rem 1.2rem;
        text-align: center;
        position: relative;
    }

    .menu-b-description {
        margin-top: 0;
    }

    .menu-b-drawer-container hr {
        border: 1px dashed #566C73;
    }

    .menu-b-personal-avatar {
        width: 6rem;
        height: 6rem;
        border-radius: 50%;
    }

    .menu-b-button {
        background-color: transparent;
    }

    .menu-b-close-div {
        position: absolute;
        top: 0;
        right: 0;
    }

    .menu-b-close-div button {
        background-color: transparent;
    }

    .menu-button {
        width: 3rem;
        height: 3rem;
    }

    /* 不显示菜单文字 */
    .menu-button-text,
    .menu-button-text-active {
        display: none;
    }

    /* 首页简介栏 */
    .main-header-left {
        display: none;
    }

    .main-header-right {
        padding: 0;
    }

    .post-left-menu {
        display: none;
        grid-template-columns: 1fr;
    }

    .post-left-menu-a {
        display: none;
    }

    /* 单独设置左右的样式 */
    .main-header-left-a,
    .main-header-left-b,
    .post-left-menu-b {
        text-align: center;
    }

    .main-header-left-a-title,
    .main-header-left-b-title,
    .post-left-menu-b-title {
        margin: 0.5rem;
    }

    .main-header-left-b-title,
    .post-left-menu-b-title {
        padding-left: 0;
    }
    
    .main-header-left-b-title::before,
    .post-left-menu-b-title::before {
        width: 0;
    }

    .main-header-left-b-space,
    .post-left-menu-b-space {
        padding: 0;
    }

    .friends-list {
        grid-template-columns: 1fr;
    }

    .friends-card-info {
        grid-column: 1;
    }

    .skill-list-card {
        grid-template-columns: repeat(2, 1fr);
    }

    .device-list-card {
        grid-template-columns: repeat(2, 1fr);
    }

    /* 首页 */
    .index-gallery-content {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: repeat(6, 1fr);
        gap: 0.5rem;
    }

    .index-gallery-photo1 { grid-area: 1 / 1 / 3 / 2; }
    .index-gallery-photo2 { grid-area: 3 / 1 / 4 / 2; }
    .index-gallery-photo3 { grid-area: 4 / 1 / 5 / 2; }
    .index-gallery-photo4 { grid-area: 5 / 1 / 6 / 2; }
    .index-gallery-photo5 { grid-area: 6 / 1 / 7 / 2; }

    .post-article img {
        max-width: 100%; 
    }

    .post-article-footer {
        grid-template-columns: 1fr;
    }
}

/* 超小屏幕 */
@media screen and (max-width:320px) {
    .skill-list-card {
        grid-template-columns: 1fr;
    }

    .device-list-card {
        grid-template-columns: 1fr;
    }
}