/* 
 * CSS: Video Grid
 * @desc: Video Grid custom styles.
 */

/* Video grid : shape */
.jpf-grid-videos {
	display: grid;
	grid-template-columns: repeat(8, 1fr);
	gap: 1rem;
}

/* Video grid : one item */
.jpf-grid-videos .jpf-grid-videos__item {
 grid-column: span 2;
}

/* Video grid : Hide single orphan */
.jpf-grid-videos__item[page="dcs-vfx-corp"]:last-child:nth-child(4n-1) {
    display: none;
}

/* Video grid : favorite item order */
.jpf-grid-videos__item[page="movie-trailers"][project-of-the-year="true"],
.jpf-grid-videos__item[page="dcs-vfx-corp"][project-of-the-category="true"] {
	order: -1;
}

/* Custom styles under 1330px */
@media (max-width: 1330px) {
    
    /* Video grid : global shape */    
    .jpf-grid-videos {
    	grid-template-columns: repeat(6, 1fr);
    }
    
    /* Video grid : Hide 2 orphan (second last one) */
	.jpf-grid-videos__item[page="dcs-vfx-corp"]:nth-last-child(3):nth-child(4n) {
	    display: none;
	}
	
    /* Video grid : Hide 2 orphan (last one) */
	.jpf-grid-videos__item[page="dcs-vfx-corp"]:nth-last-child(2):nth-child(4n + 1) {
		display: none;
	}
}

/* Custom styles under 975px */
@media (max-width: 974px) {
    
    /* Video grid : global shape */ 
    .jpf-grid-videos {
    	grid-template-columns: repeat(4, 1fr);
    }	
    
    /* Video grid : Hide 2 orphan (second last one) */
	.jpf-grid-videos__item[page="dcs-vfx-corp"]:nth-last-child(3):nth-child(4n) {
	    display: block;
	}
	
    /* Video grid : Hide 2 orphan (last one) */
	.jpf-grid-videos__item[page="dcs-vfx-corp"]:nth-last-child(2):nth-child(4n + 1) {
		display: block;
	}
	
}

/* Custom styles under 975px */
@media (max-width: 674px) {

    /* Video grid : global shape */ 
    .jpf-grid-videos {
    	grid-template-columns: repeat(1, 1fr);
    }
}

/* Custom styles above 675px */
@media (min-width: 674px) {
    
	/* Video grid : favorite item size */
    .jpf-grid-videos__item[page="movie-trailers"][project-of-the-year="true"],
    .jpf-grid-videos__item[page="dcs-vfx-corp"][project-of-the-category="true"] {
		grid-column: span 4!important;
		grid-row: span 2;
	}
	
	/* Video grid : favorite item height */
    .jpf-grid-videos__item[page="movie-trailers"][project-of-the-year="true"] .jpf-comp-video-preview,
    .jpf-grid-videos__item[page="dcs-vfx-corp"][project-of-the-category="true"] .jpf-comp-video-preview {
		height: 100%;
	}
  
}