/* 布局容器 - 使用 Flexbox */
.container {
  display: flex;
  flex-wrap: wrap;
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

/* PC端：左右分栏，各占50% */
.image-section,
.content-section {
  flex: 1;
  min-width: 300px;
  background: #fff;
  padding: 20px;
  border-radius: 8px;
}

/* 左侧栏：30%宽度，有范围限制 */
.image-section {
  flex: 0 0 30%;
  min-width: 100px;   /* 最小宽度 */
  max-width: 300px;  /* 最大宽度 */
  padding-right: 40px;
}

/* 分割线样式 */
.divider {
  width: 2px;                    /* 分割线宽度 */
  background: #e0e0e0;           /* 分割线颜色 */
  margin: 0 20px;                /* 左右间距 */
  border-radius: 1px;           /* 圆角（可选） */
}

/* 移动端：隐藏分割线，改为单栏布局 */
@media (max-width: 768px) {
  .divider {
    display: none;
  }
}

/* 移动端：小于768px时改为单栏 */
@media (max-width: 768px) {
  .image-section {
    padding-right: 0;
    padding-bottom: 20px;
  }
}

/* 图标链接样式 - 文字隐藏，只显示图标 */
.icon-link {
  display: inline-block;
  width: 40px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  text-decoration: none;
  font-size: 0; /* 把文字大小设为0 */
  border: 1px solid #ddd;
  border-radius: 4px;
}

/* 让图标正常显示 */
.icon-link .fa-blog,
.icon-link .fa-github {
  font-size: 20px;
  color: #333;
}