.media-center-title {
    font-size: 36px;
    font-weight: 600;
    margin-bottom: 8px;
    color: #222; /* 深灰色文字 */
    text-align: center; /* 居中 */
}
.media-type-buttons {
    width: 100vw;
    display: flex;
    justify-content: center;  /* 居中按钮 */
    gap: 12px;
    padding: 12px 0;
    margin-left: calc(-50vw + 50%);
}
/* 默认按钮样式 */
.media-type-buttons .media-type-btn {
    background-color: #ffffff00 !important;  /* 白底 */
    color: #333 !important;             /* 黑字 */
    border: none;
    padding: 8px 16px;
    margin-right: 8px;
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 16px;
    font-weight: 700 !important;
}

/* 鼠标悬停 */
.media-type-buttons .media-type-btn:hover {
    background-color: #f0f0f0 !important;  /* 浅灰底 */
    color: #000000 !important;             /* 黑字不变 */
    border-color: #333333;      /* 深灰框 */
}

/* 点击 / 激活状态 */
.media-type-buttons .media-type-btn.active {
    background-color: #000000 !important;  /* 黑底 */
    color: #ffffff !important;             /* 白字 */
    border-color: #000000;      /* 黑框 */
}
#media-result-container {
  padding: 20px;
}
.media-grid {
  display: grid;
  padding: 20px clamp(10px, 4vw, 50px);
  gap:25px;
}

.media-grid .media-year {
  font-size: 36px;
  font-weight: 600;
  margin:0 ;
}

#media-pagination {
    display: flex;
    justify-content: center; /* 水平居中 */
    width: 100%;
}

#media-pagination .pagination {
    display: flex;
    gap: 10px; /* 按钮之间间距，可调 */
    align-items: center; /* 垂直居中 */
}



/* 响应式：屏幕小于 500px 时 */
@media (max-width: 500px) {
  .media-type{
    width: 100%;
  }
}