/* 響應式設計 */

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

/* 中型桌面和平板設備 (992px - 1199px) */
/* 無需額外調整，保留默認樣式 */
.team-grid {
    display: grid;
    grid-template-columns:repeat(3, 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 */
}

.course-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 每行顯示兩列 */
    gap: 20px; /* 卡片之間的間距 */
    justify-items: stretch;
}

.course-card {
    background-color: #f9f9f9;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    transition: all 0.3s ease;
}

.course-card:hover {
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
    transform: translateY(-3px);
}

.course-card img {
    width: 100%;
    border-radius: 8px;
    margin-bottom: 15px;
    object-fit: cover;
}

.course-card h3 {
    font-size: 22px;
    color: #2c3e50;
    margin-bottom: 10px;
}

.course-card p {
    font-size: 14px;
    color: #555;
    line-height: 1.6;
}
/* 小型桌面和大型平板設備 (768px - 991px) */
@media screen and (max-width: 991px) and (min-width: 768px) {
    /* 調整 course-grid 為單欄 */
    .course-grid {
        grid-template-columns: 1fr;
    }

    /* 調整 course-card 的內邊距和字體大小 */
    .course-card {
        padding: 1rem; /* 16px */
    }

    .course-card h3 {
        font-size: 1.2rem; /* 19.2px */
    }

    .course-card p {
        font-size: 0.9rem; /* 14.4px */
    }

    /* 調整 about-grid 和 team-grid 為單欄 */
    .about-grid,
    .team-grid {
        grid-template-columns: 1fr;
    }

    /* 調整 team-member 的布局 */
    .team-member {
        flex-direction: row;
        text-align: left;
        padding: 1rem; /* 16px */
    }

    .profile-pic {

        width: 7rem; /* 96px */
        height: 7rem; /* 96px */
    }

    .info {
        font-size: 0.85rem; /* 13.6px */
    }

    .info a {
        font-size: 0.85rem; /* 13.6px */
    }

    /* 調整 course-card 圖片 */
    .course-card img {
        margin-bottom: 10px;
    }
}

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

    /* 調整 course-card 的內邊距和字體大小 */
    .course-card {
        padding: 0.75rem; /* 12px */
    }

    .course-card h3 {
        font-size: 1rem; /* 16px */
    }

    .course-card p {
        font-size: 0.85rem; /* 13.6px */
    }

    /* 調整 about-grid 和 team-grid 為單欄 */
    .about-grid,
    .team-grid {
        grid-template-columns: 1fr;
        gap: 1rem; /* 16px */
    }

    /* 調整 team-member 的布局 */
    .team-member {
        flex-direction: row;
        text-align: left;
        padding: 0.75rem; /* 12px */
    }

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

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

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

    /* 調整 course-card 圖片 */
    .course-card img {
        margin-bottom: 8px;
    }

    /* 調整 h3 和 h4 字體大小 */
    h3 {
        font-size: 1.2rem; /* 19.2px */
    }

    h4 {
        font-size: 1rem; /* 16px */
    }

    /* 調整 course-card 標題的間距 */
    .course-card h3 a {
        display: block;
        margin-top: 0.5rem; /* 8px */
    }
}

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

    /* 調整 course-card 的內邊距和字體大小 */
    .course-card {
        padding: 0.5rem; /* 8px */
    }

    .course-card h3 {
        font-size: 0.9rem; /* 14.4px */
    }

    .course-card p {
        font-size: 0.75rem; /* 12px */
    }

    /* 調整 about-grid 和 team-grid 為單欄 */
    .about-grid,
    .team-grid {
        grid-template-columns: 1fr;
        gap: 0.75rem; /* 12px */
    }

    /* 調整 team-member 的布局 */
    .team-member {
        flex-direction: row;
        text-align: left;
        padding: 0.5rem; /* 8px */
    }

    .profile-pic {
        width: 6rem; /* 72px */
        height: 6rem; /* 72px */
    }

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

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

    /* 調整 course-card 圖片 */
    .course-card img {
        margin-bottom: 6px;
    }

    /* 調整 h3 和 h4 字體大小 */
    h3 {
        font-size: 1rem; /* 16px */
    }

    h4 {
        font-size: 0.875rem; /* 14px */
    }

    /* 調整 course-card 標題的間距 */
    .course-card h3 a {
        display: block;
        margin-top: 0.25rem; /* 4px */
    }
}