:root {

}
/*content*/
.contentBlock, .content {
    min-height: inherit;
}
.contentBlock {
    overflow: hidden;
}
.blockCollection {
    width: 100%;
    overflow: hidden;
}
.contentCollection {
    overflow: hidden;
    position: relative;
}
/*-----------collection---------*/
.blockThumbnails {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    border-top: 1px solid #999;
}
.thumbnail {
    border-right: 1px solid #999;
    border-bottom: 1px solid #999;
    background-color: #fff;
    display: flex;
    flex-flow: column;
}

.thumbnail:nth-child(4n) {
		border-right: none;
	}
/*.thumbnail > .thumbName {
        margin-top: auto;
    }*/
a.thumbImg {
    display: block;
    line-height: 0;
}
.thumbnail img {
    width: 100%;
    aspect-ratio: 4/3;
    object-fit: cover;
}
.thumbnail:nth-child(4n) img {
    width: calc(100% - 1px);
}
.thumbName {
    text-align: left;
    background-repeat: no-repeat;
    background-position: center left;
    display: inline-block;
    width:100%;
}

/*--------Font-size--------*/
/*maxWidth 600px*/
.thumbName {
    font-size: calc((12.1 / var(--width3)) * 100vw); 
}

/*-----600px------ */
@media (min-width: 37.5em) {
    .thumbName {
        font-size: calc((15 / var(--width2)) * 100vw);
    }
}
/*--------1110x---------*/
@media (min-width: 69.375em) {
    .thumbName {
        font-size: calc((32 / var(--width1)) * 100vw);
    }
}
/*--------1920px---------*/
@media (min-width: 120.063em) {
    .thumbName {
        font-size: 2rem;
    }
}

/*width, margin, padding*/
.thumbName {
    padding: 6px 8px 8px var(--padding);
}
/*--------1920px---------*/
@media (max-width: 120em) {
	.thumbName {
		padding: calc((6 / var(--width1))* 100vw) calc((8 / var(--width1))* 100vw) calc((8 / var(--width1))* 100vw) var(--padding);
	}
}
/*--------1110px---------*/
@media (max-width: 69.375em) {
    .thumbName {
        padding: calc((6 / var(--width2))* 100vw) calc((8 / var(--width2))* 100vw) calc((8 / var(--width2))* 100vw) var(--padding2);
    }
    .blockThumbnails {
        grid-template-columns: 1fr 1fr 1fr;
    }
	.thumbnail:nth-child(4n) {
		border-right: 1px solid #999;
	}
	.thumbnail:nth-child(3n) {
		border-right: none;
	}
	.thumbnail:nth-child(4n) img {
		width: 100%;
	}
	.thumbnail:nth-child(3n) img {
		width: calc(100% - 1px);
	}
}
/*-----600px------ */
@media (max-width: 37.5em) {
    .thumbName {
        padding: calc((6 / var(--width3))* 100vw) calc((8 / var(--width3))* 100vw) calc((8 / var(--width3))* 100vw) var(--padding3);
    }
    .blockThumbnails {
        display: grid;
        grid-template-columns: 1fr 1fr;
        border-top: none;
    }
	.thumbnail:nth-child(3n) {
		border-right: 1px solid #999;
	}
	.thumbnail:nth-child(2n) {
		border-right: none;
	}
	.thumbnail:nth-child(3n) img {
		width: 100%;
	}
	.thumbnail:nth-child(2n) img {
		width: calc(100% - 1px);
	}
    .infos {
        display: none;
    }
}