@charset "utf-8";

/* Multi Videos */
.youtube{
  /*display: grid;
  margin-inline: auto;
  */
	/*width: 80%;
    grid-template-columns: repeat(2, 1fr);
    gap: 50px 30px;*/
}
.youtube__container{
  position: relative;
}
.youtube__container img,
.youtube__container iframe{
	display: block;
	width: 90%;/*100%*/
	height: auto;
	aspect-ratio: 16/9;
	margin-right: auto;
	margin-left: auto;
}
.youtube__container::before{
  content: "";
  display: inline-block;
  background: #fff;
  aspect-ratio: 197/150;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.youtube__container::after{
  content: '';
  display: inline-block;
  --MASK: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDI2LjEuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IuODrOOCpOODpOODvF8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiCgkgeT0iMHB4IiB2aWV3Qm94PSIwIDAgNTEyIDM5MCIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNTEyIDM5MDsiIHhtbDpzcGFjZT0icHJlc2VydmUiPgo8c3R5bGUgdHlwZT0idGV4dC9jc3MiPgoJLnN0MHtmaWxsOiNGRjAwMDA7fQo8L3N0eWxlPgo8ZyBpZD0i44Os44Kk44Ok44O8XzFfMDAwMDAwNzQ0MDA4NzMyNzkxMzU5NDUyNDAwMDAwMDY2OTQ1NTcxMzQ4ODYzMzkyMjNfIj4KCTxnIGlkPSJfMiI+CgkJPHBhdGggY2xhc3M9InN0MCIgZD0iTTQ4Mi43LDM3LjhDNDU2LjUsMTYuNiwzNjQsMCwyNTYsMFM1NS41LDE2LjYsMjkuMywzNy44QzUuMiw1Ny4yLDAsMTQ1LjEsMCwxOTVzNS4yLDEzNy44LDI5LjMsMTU3LjIKCQkJQzU1LjUsMzczLjQsMTQ4LDM5MCwyNTYsMzkwczIwMC41LTE2LjYsMjI2LjctMzcuOEM1MDYuOCwzMzIuOCw1MTIsMjQ0LjksNTEyLDE5NVM1MDYuOCw1Ny4yLDQ4Mi43LDM3Ljh6IE0zMzIuOCwxOTcuNEwyMTQsMjY4LjMKCQkJYy0wLjksMC41LTEuOSwwLjUtMi44LDBjLTAuOS0wLjUtMS40LTEuNC0xLjQtMi40VjEyNC4xYzAtMSwwLjUtMS45LDEuNC0yLjRjMC45LTAuNSwxLjktMC41LDIuOCwwbDExOC44LDcwLjkKCQkJYzAuOCwwLjUsMS40LDEuNCwxLjQsMi40QzMzNC4yLDE5NiwzMzMuNywxOTYuOSwzMzIuOCwxOTcuNHoiLz4KCTwvZz4KPC9nPgo8L3N2Zz4K) no-repeat center center / 100%;
  mask: var(--MASK);
  -webkit-mask: var(--MASK);
  background-color: #FF0000;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  aspect-ratio: 197/150;
}
.youtube__container.is-play::before,
.youtube__container.is-play::after{
  display: none;
}

.releaseDate {
	font-size: 1.3vw;
	line-height: 130%;
	padding-bottom: 0.6em;
	padding-left: 1.5em;
}

@media (hover: hover) {
  .youtube__container:hover{
    cursor: pointer;
  }
  .youtube__container::after{
    transition: .3s;
  }
  .youtube__container:hover::after{
    background-color: #4B4B4B;
  }
}
/*
@media screen and (min-width: 768px){
  .youtube{
    width: 80%;
    grid-template-columns: repeat(2, 1fr);
    gap: 50px 30px;
  }
  .youtube__container::before {
    width: 50px;
  }
  .youtube__container::after {
    width: 90px;
  }
}
@media screen and (max-width: 767px){
  .youtube{
    width: 90%;
    gap: 25px;
  }
  .youtube__container::before {
    width: 30px;
  }
  .youtube__container::after {
    width: 60px;
  }
}
*/

@media screen and (max-width: 767.98px){ /*768-992*/

.youtube{
    width: 80%;
    grid-template-columns: repeat(2, 1fr);
    gap: 50px 30px;
  }
  /*.youtube__container::before {
    width: 50px;
  }
  .youtube__container::after {
    width: 90px;
  }
  */

.releaseDate {
	font-size: 4.6vw;
	line-height: 130%;
	padding-bottom: 0.6em;
	padding-left: 1.2em;
}


}