/* 基本樣式 */
.team-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 兩欄 */
    gap: 1.25rem; /* 20px */
    justify-items: stretch;
}

.team-member {
    background-color: #f9f9f9;
    padding: 1.25rem; /* 20px */
    border-radius: 0.5rem; /* 8px */
    box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    transition: all 0.3s ease;
}

.team-member:hover {
    box-shadow: 0 0.375rem 0.75rem rgba(0, 0, 0, 0.15);
    transform: translateY(-0.1875rem); /* -3px */
}

.profile-pic {
    width: 7.5rem; /* 120px */
    height: 7.5rem; /* 120px */
    border-radius: 50%;
    margin-right: 0.9375rem; /* 15px */
    object-fit: cover;
}

.info {
    font-size: 0.875rem; /* 14px */
    color: #2c3e50;
}

.info a {
    color: #2980b9;
    text-decoration: none;
}

.info a:hover {
    text-decoration: underline;
}

/* 響應式設計 */

/* 大型桌面設備 (1200px 以上) */
/* 無需額外調整，保留默認樣式 */

/* 中型桌面和平板設備 (992px - 1199px) */
/* 無需額外調整，保留默認樣式 */

/* 小型桌面和大型平板設備 (768px - 991px) */
/* 保持單欄佈局 */
@media screen and (max-width: 991px) and (min-width: 768px) {
    .team-grid {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    }

    .profile-pic {
        width: 7rem; /* 80px */
        height: 7rem; /* 80px */
    }

    .info {
        font-size: 0.8rem; /* 12.8px */
    }
}

/* 小螢幕設備 (小於 768px) */
@media screen and (max-width: 767px) {
    .team-grid {
        grid-template-columns: 1fr; /* 單欄 */
        gap: 1rem; /* 16px */
    }

    .team-member {
        flex-direction: row; /* 水平排列 */
        text-align: left;
        padding: 1rem; /* 16px */
    }

    .profile-pic {
        width: 7rem; /* 80px */
        height: 7rem; /* 80px */

    }

    .info {
        font-size: 0.8rem; /* 12.8px */
    }

    .info a {
        font-size: 0.8rem; /* 12.8px */
    }

    /* 調整標題大小 */
    h3 {
        font-size: 1.25rem; /* 20px */
    }

    /* 調整主內容區域的內邊距 */
    .main-content {
        padding: 0.875rem; /* 14px */
    }
}

/* 超小螢幕設備 (小於 576px) */
@media screen and (max-width: 575px) {
    .team-grid {
        grid-template-columns: 1fr; /* 單欄 */
        gap: 0.75rem; /* 12px */
    }

    .team-member {
        padding: 0.75rem; /* 12px */
    }

    .profile-pic {
        width: 7rem; /* 72px */
        height: 7rem; /* 72px */
        margin-bottom: 0.5rem; /* 8px */
    }

    .info {
        font-size: 0.75rem; /* 12px */
    }

    .info a {
        font-size: 0.75rem; /* 12px */
    }

    h3 {
        font-size: 1.125rem; /* 18px */
    }

    .main-content {
        padding: 0.75rem; /* 12px */
    }
}