@charset "utf-8";
/* CSS Document */

html {
    height:100%;
}

body {
	height: 100%;
	margin: 0;
	font-family: inter_regular;
	font-size: 18px;
	color: #000000;
	background: url('images/body_bg_2.png') no-repeat center top;
  min-height: 20904px;
}

.episodes{
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(6, 1fr); /* makes centering row 2 easy */
  gap: 28px;
  padding: 24px;
}

.ep{
  margin: 0;
  text-align: center;
}

.ep img{
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
}

/* Top row: 3 items, each takes 2 of 6 columns */
.ep1, .ep2, .ep3 { grid-column: span 2; }

/* Bottom row: 2 items centered (each spans 2 cols, start at col 2 and 4) */
.ep4 { grid-column: 2 / span 2; }
.ep5 { grid-column: 4 / span 2; }

.ep figcaption{
  margin-top: 10px;
  font-size: 14px;
}

/* Optional: simple responsive fallback */
@media (max-width: 900px){
  .episodes{ grid-template-columns: repeat(2, 1fr); }
  .ep1,.ep2,.ep3,.ep4,.ep5{ grid-column: auto; }
}

.showcase{
  max-width: 900px;
  margin: 0 auto;
  padding: 24px;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 28px;
}

.img img{
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
}

/* big image centered */
.img.big{
  grid-column: 2 / span 4;
}

/* bottom row images */
.img.left{
  grid-column: 1 / span 3;
}

.img.right{
  grid-column: 4 / span 3;
}

/* mobile */
@media (max-width: 750px){
  .showcase{
    grid-template-columns: 1fr;
  }

  .img.big,
  .img.left,
  .img.right{
    grid-column: auto;
  }
}


.face_link a {
  position: absolute;
  width: 100px;
  height: 40px;
  right: 115px;
  top: 118px;
}

.insta_link a {
  position: absolute;
  width: 100px;
  height: 40px;
  right: 3px;
  top: 118px;
}

.face_link_btm a {
  position: absolute;
  width: 100px;
  height: 40px;
  right: 115px;
  margin-top: 20780px;
}

.insta_link_btm a {
  position: absolute;
  width: 100px;
  height: 40px;
  right: 3px;
  margin-top: 20780px;
}