/*
Theme Name: MH Magazine lite - Nippongaku Child
Theme URI: https://nippongaku.com
Description: Child theme for MH Magazine lite with optional 2 or 3 column grid layouts on the homepage.
Author: Nippongaku
Author URI: https://nippongaku.com
Template: mh-magazine-lite
Version: 1.0.4
Text Domain: mh-magazine-lite-child
*/

/***** Home Layout: Grid Common *****/

.mh-child-layout-grid-2 #main-content,
.mh-child-layout-grid-3 #main-content {
    display: block;
}

.mh-child-layout-grid-2 #main-content .mh-loop-item,
.mh-child-layout-grid-3 #main-content .mh-loop-item {
    float: left;
    border-bottom: none;
    padding-bottom: 20px;
    margin-bottom: 20px;
}

.mh-child-layout-grid-2 #main-content .mh-loop-item:nth-child(2n),
.mh-child-layout-grid-3 #main-content .mh-loop-item:nth-child(3n) {
    margin-right: 0;
}

.mh-child-layout-grid-2 #main-content .mh-loop-item:nth-child(2n+1),
.mh-child-layout-grid-3 #main-content .mh-loop-item:nth-child(3n+1) {
    clear: left;
}

/* Grid 2 columns */
.mh-child-layout-grid-2 #main-content .mh-loop-item {
    width: 48.75%;
    margin-right: 2.5%;
}

/* Grid 3 columns */
.mh-child-layout-grid-3 #main-content .mh-loop-item {
    width: 31.66%;
    margin-right: 2.5%;
}

/* Image on top for grid */
.mh-child-layout-grid-2 #main-content .mh-loop-thumb,
.mh-child-layout-grid-3 #main-content .mh-loop-thumb {
    float: none;
    margin: 0 0 10px;
    width: 100%;
    max-width: 100%;
}

.mh-child-layout-grid-2 #main-content .mh-loop-thumb img,
.mh-child-layout-grid-3 #main-content .mh-loop-thumb img {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

/* Hide excerpt in all child layouts */
.mh-loop-excerpt {
    display: none;
}

/***** Responsive Grid *****/

@media screen and (max-width: 900px) {
    .mh-child-layout-grid-3 #main-content .mh-loop-item {
        width: 48.75%;
        margin-right: 2.5%;
    }

    .mh-child-layout-grid-3 #main-content .mh-loop-item:nth-child(3n) {
        margin-right: 2.5%;
    }

    .mh-child-layout-grid-3 #main-content .mh-loop-item:nth-child(2n) {
        margin-right: 0;
    }

    .mh-child-layout-grid-3 #main-content .mh-loop-item:nth-child(3n+1) {
        clear: none;
    }

    .mh-child-layout-grid-3 #main-content .mh-loop-item:nth-child(2n+1) {
        clear: left;
    }
}

@media screen and (max-width: 620px) {
    .mh-child-layout-grid-2 #main-content .mh-loop-item,
    .mh-child-layout-grid-3 #main-content .mh-loop-item {
        width: 100%;
        margin-right: 0;
        float: none;
    }
}