/* Navigating Card */

.nav_card_item {
    width: 100%;
    height: auto;
    padding: 0.6rem 1rem;
    box-sizing: border-box;
    line-height: 1.5;
    color: #393939;
}
.nav_card a {
    display: block;
    color: #393939;
}
.nav_card a:hover {
    color: #005cc9;
}

.category_item .date {
    font-weight: 500;
}
.category_item .title {
    width: 100%;
    font-weight: 300;
}

.small_gallery {
    width: 80%;
    height: auto;
}
.small_gallery_item a {
    display: block;
    color: #393939;
}
.small_gallery_item .photo {
    width: 100%;
    height: 0;
    padding-bottom: calc(2/3 * 100%);
    margin-top: 9.5%;
    overflow: hidden;
}

.custom_content {
    width: 80%;
}
.custom_content img {
    max-width: 100%;
    height: auto;
}

/* Mobile Style */
@media only screen and (max-width: 768px) {

    .nav_card {
        position: relative;
        width: 100%;
    }

    .nav_card_content {
        width: 100%;
        margin-top: 0.7rem;
        padding-bottom: 0.5rem;
        background-color: #e1e2e3;
        border-radius: 0.3rem;
    }
    .nav_card_content a {
        color: #393939;
    }

    .nav_card_content {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .nav_card_content .nav_card_tab {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        width: 90%;
        padding: 0.3rem 0.8rem;
        margin-top: 0.2rem;
        border-radius: 0.7rem;
        background-color: #484848;
        color: white;
        box-shadow: 1.5px 1.5px 3px 0 rgba(0, 0, 0, 0.16);
        font-size: 1.1rem;
    }
    .nav_card_content .nav_card_tab a {
        color: white;
    }
    .nav_card_content .nav_card_tab a::after {
        content: ' ▸';
    }

    .category_item .date {
        display: flex;
        flex-direction: row;
        align-items: center;
    }
    .category_item .date::before {
        content: '●';
        margin-right: 0.3rem;
        font-size: 0.5rem;
    }

    .small_gallery {
        margin-bottom: 1rem;
    }

    .nav_card_bg,
    .nav_card_tab_bar,
    .nav_card_tab img,
    .nav_card_more,
    .small_gallery_item .info,
    .small_gallery_control {
        display: none;
    }

}

/* Desktop Style */
@media screen and (min-width: 769px) {

    .nav_card {
        position: relative;
        width: 100%;
        height: calc(78vw * 0.3213);  /* same as its width: 78vw (container width) * 32.13% (portion of each card's width) */
        color: #393939;
    }

    .nav_card_bg {
        position: absolute;
        top: 0;
        width: 100%;
        height: 100%;
        background-color: #e1e2e3;
    }

    .nav_card_tab_bar {
        position: relative;
        z-index: 1;
        display: flex;
        flex-direction: row;
        width: 100%;
        height: 3.5rem;
        background-color: #e1e2e3;
    }
    .nav_card_tab {
        display: flex;
        flex-direction: row;
        align-items: center;
        min-width: 50%;
        padding: 0.3125rem 0.625rem;
        box-sizing: border-box;
        font-size: 1.1rem;
        background-color: #e1e2e3;
        cursor: default;
    }
    .nav_card_tab img {
        margin-left: 0.3125rem;
        width: 2rem;
        height: 2rem;
    }
    .nav_card_tab.disabled {
        background-color: #cccccc;
    }

    .nav_card_content {
        position: relative;
        z-index: 1;
        width: 100%;
        height: calc(100% - 3.5rem);
        display: flex;
        flex-direction: column;
        align-items: center;
        overflow: scroll;
    }
    .nav_card_content.disabled {
        display: none;
    }

    .nav_card_more {
        position: absolute;
        right: 1.2rem;
        bottom: 0.96rem;
        opacity: 1;
    }
    .nav_card_more:hover {
        opacity: 0.7;
    }
    .nav_card_more a {
        font-size: 0.84rem;
        color: #393939;
        text-decoration: underline;
    }

    .small_gallery_item .info {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 70%;
        /* margin: 13% auto 0 auto; */
        margin: calc(100% - 3.5rem - 9.5% - 2/3 * 100%) auto 0 auto;
    }
    .small_gallery_item .info .title {
        max-width: 90%;
        font-weight: 300;
    }
    .small_gallery_item .info .date {
        font-weight: 500;
    }
    .small_gallery_control {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        position: absolute;
        top: 80%;
        transform: translateY(-50%);
        width: 90%;
        height: 8%;
    }
    .small_gallery_prev,
    .small_gallery_next {
        z-index: 1;
        cursor: pointer;
    }
    .small_gallery_control img {
        height: 100%;
    }

}