/* ===================================================
grid-02
=================================================== */


.grid-02-wrapper {
	position:relative;
	margin:0;
	padding:0;
}
.grid-02 {
    margin: 0 auto;
    padding: 20px 0 20px;
}
.heb .grid-02 {
    /*justify-content: flex-end;*/
   	flex-direction: row-reverse;
}
.grid-02 .item {
	position:relative;
	margin:0;
	padding:0;
    overflow:hidden;
    background-color:inherit;
}
.grid-02 .item:after {
    clear: both;
    content: "";
    display: table;
}
.grid-02 .item a.box-link {
    position: absolute;
	height: 100%;
    top: 0;
    left: 0;
	right:0;    
    bottom:0;
    width: 100%;
    z-index:5;
    display:block;
}
.grid-02 .item .content {
	margin:0 27px 27px 0;
	padding:0;
	display:block;
}
.grid-02 .item .content .image-wrapper {
    position: relative;
    margin: 0;
    padding: 0;
    width: 100%;
    overflow:hidden;
}
.grid-02 .item .content .image-wrapper::after {
    display: block;
    height: 0;
    width: 100%;
    padding-bottom: 56.25%;
    content: "";
}
.grid-02 .item .content .image {
    position: absolute;
	top:0;
	left:0;
	right:0;
	bottom:0;    
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: cover;

    /*transition: all 0s ease-in-out 0s;*/
	/*webkit-transition: background-size 500ms linear;
    -moz-transition: background-size 500 linear;
    -o-transition: background-size 500 linear;
    -ms-transition: background-size 500ms linear;
    transition: background-size 500ms linear;*/

	transition: transform 0.2s cubic-bezier(0.785, 0.135, 0.15, 0.86);
    z-index:1;
    overflow:hidden;
}
.grid-02 .item:hover .content .image2 {
    /*transform: scale(1.05);*/
	-webkit-transform:scale(1.2);
	-moz-transform:scale(1.2);
	-ms-transform:scale(1.2);
	-o-transform:scale(1.2);
	transform:scale(1.2)
}

.grid-02 .item .content .image::before {
    background-color: rgba(0,0,0, 0.25);
    bottom: 0;
    content: "";
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 2;
    /*transition: background-color 0.4s cubic-bezier(0.785, 0.135, 0.15, 0.86);*/
    transition: background-color .2s ease-out 0s;
}
.grid-02 .item:hover .content .image::before {background-color: rgba(0,0,0, 0.55);}



/* ===================================================
Teaser
=================================================== */

.grid-02 .item .teaser {
	color:rgb(182,171,157);
	position:relative;
	margin:0;
	padding:0;
	width:100%;
    z-index:3;
    background-color:transparent;
    text-align:left;
}
.heb .grid-02 .item .teaser {
    text-align:right;
}

/* ********************************************** */
/* Artist */

.grid-02 .teaser .artist {
	margin:0;
	padding:0;
	font-size:36px;
	font-size: calc(20px + (36 - 20) * (100vw - 400px) / (1440 - 400));
	font-weight:700;
	line-height:1.2;
}
.grid-02 .item .artist a:hover{text-decoration: underline;}

#section-artists .grid-02 .item .artist {margin-top:10px;}


/* ********************************************** */
/* Title */

.grid-02 .teaser .title {
	margin:10px 0 0;
	padding:0;
	font-size:20px;
	font-weight:400;
	line-height:1.2;
	color: rgba(163, 153, 141, 0.6);
}

/* ********************************************** */
/* Duration */

.grid-02 .teaser .duration {
	margin: 5px 0 0;
	padding:0;
	font-size:12px;
	font-weight:300;
	line-height:1;
}

/* ********************************************** */
/* Episode */
.grid-02 .teaser .episode {
    display: inline-block;
    margin-bottom: 5px;
    padding:3px 0 0;
	font-size:16px;
    line-height: 1.1;

}
/* ********************************************** */
/* Category */

.grid-02 .teaser .category {
    display: inline-block;
    margin: 10px 0 0;
    padding:5px 10px;
	font-size:16px;
    line-height: 1.1;
    border-radius:18px; 
}
.grid-02 .teaser .artist-nation {
    display: inline-block;
    margin: 10px 0 0;
    padding:0px;
	font-size:24px;
	font-size: calc(20px + (24 - 20) * (100vw - 400px) / (1440 - 400));
    line-height: 1.1;
    border-radius:20px; 
}
.grid-02 .teaser .description {
    display: inline-block;
    margin: 20px 0 0;
    padding:0;
	font-size:16px;
    line-height: 1.1;
    overflow:hidden;
   
}

@media all and (max-width: 1000px) {
	.grid-02 .teaser .artist {font-size:42px;}
}
@media only screen and (max-width: 800px) {
	.grid-02 .teaser .artist {font-size:36px;}
	.grid-02 .teaser .artist-nation {font-size:24px;}
}
@media only screen and (max-width: 600px) {
	.grid-02 .item {width: 100%;}
	.grid-02 .item .teaser {padding: 30px 20px 50px 20px;}
	.grid-02 .teaser .artist {font-size:24px;}
	.grid-02 .teaser .artist-nation {font-size:18px;}
}