:root {
  --bg-blue-100: #020617;
  --bg-blue-80: #0f172a;
  --bg-blue-60: #1e293b;
  --bg-blue-50: #334155;
  --bg-blue-40: #475569;
  --bg-blue-30: #64748b;
  --bg-blue-20: #94a3b8;
  --bg-blue-10: #cbd5e1;
  --white: #ffffff;
  --highlight-green: #dcf836;
  --highlight-pink: #de2239;

  /* Others */
  --text-color: #4280bf;
  --bg-gradient: linear-gradient(to bottom, #25afe1, #0093d2);
}

body {
  color: var(--bg-blue-10);
}

/* Main */

.main-shows {
  width: 100%;
  min-height: 4634px;
  /* display: grid;
  grid-template-rows: 100%; */

  position: relative;
}

/* .main-shows::after {
  content: "";
  display: table;
  clear: both;
} */

.background {
  /* width: 100vw; */
  aspect-ratio: 16/9;
}

.bg-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.main-shows h2 {
  width: 100%;
  text-align: center;
  position: absolute;
  top: 8px;
  /* padding: 20px; */
  color: var(--white);
}

.main-shows__container {
  width: 100%;
  max-width: 1160px;

  display: grid;
  grid-template-columns: repeat(
    auto-fit,
    minmax(min(400px, 100%), 1fr)
  );

  padding: 0 14px;
  /* margin-bottom: 20px; */
  gap: 14px;
  position: absolute;
  top: 48px;
  right: 0;
  left: 0;
  justify-self: center;
}

/* .main-shows__container > * {
  max-height: 240px;
} */

.section__tv-show {
  /* aspect-ratio: 16/9; */
  /* width: 100%;

  max-height: 350px; */
  display: grid;
  grid-template-columns: 0.5fr 1fr;
  /* grid-template-rows: ; */

  /* height: 152px;
  max-height: 242px; */

  background-color: var(--bg-blue-80);
  cursor: pointer;
}

.section__tv-show:hover {
  box-shadow: inset 0 0 24px 4px var(--bg-blue-50);
  filter: drop-shadow(0 0 2px var(--bg-blue-20));
  transition: filter 0.2s ease;
}

.section__tv-show img {
  width: 100%;
  height: 100%;
  max-height: 350px;
  padding: 10px 0 10px 10px;
  object-fit: cover;
}

.tv-show__details {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: repeat(2, 18px) minmax(60px, 140px);
  /* justify-content: flex-start; */
  gap: 10px;
  padding: 10px;
  position: relative;
}

.tv-show__details h6 {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-color);
  text-transform: uppercase;
}

.tv-show__details h5 {
  font-weight: 700;
  font-size: 14px;
  color: var(--white);
}

.tv-show__details p {
  font-size: 16px;

  overflow: hidden;
  text-overflow: ellipsis;
  /* white-space: nowrap; */
}

.tv-show__details time {
  width: 38px;
  display: flex;
  flex-direction: column;

  align-items: center;
  color: var(--white);
  background: var(--bg-gradient);
  margin: 10px 10px 0 0;
  font-size: 13px;
  position: absolute;
  top: 0;
  right: 0;
}

.tv-show__details time strong {
  font-weight: 500;
  text-align: center;
  width: 100%;
  border-bottom: 1px dashed var(--white);
}

.tv-show__details time span {
  text-align: center;
  width: 100%;
  font-size: 16px;
  color: var(--bg-blue-100);
  background-color: var(--white);
  font-weight: 600;
  padding: 2px 0;
}

.tv-show__details time em {
  font-style: normal;
}

/* @media screen and(min-width: 640px){

} */

/* .footer {
  clear: both;
} */

.section__links .section__link.section__link--movies {
  color: var(--bg-blue-10);
  border-bottom: none;
}

@media screen and (min-width: 842px) {
  .main-shows {
    width: 100%;
    min-height: 2340px;
  }
}

/* @media screen and (min-width: 500px) {
  .main-shows {
    width: 100%;
    min-height: 5130px;
  }
} */