/* Programmes page */

.programmes-main {
  width: 980px;
  margin: 0 auto;
  padding-top: 21px;
  padding-bottom: 49px;
}

.programmes-heading {
  margin-left: 30px;
}

.programmes-heading h1 {
  margin: 0 0 2px;
  font-family: Avenir;
  font-size: 40px;
  font-weight: 700;
  line-height: 1.2;
}

.programmes-rule {
  width: 918px;
  height: 1px;
  margin-bottom: 14px;
  background: #c9c9c9;
}

.programme-list {
  width: 100%;
}

.programme-row {
  display: grid;
  align-items: start;
}

.programme-row-one {
  grid-template-columns: 382px 378px;
  column-gap: 51px;
  margin-left: 34px;
  margin-bottom: 16px;
}

.programme-row-two {
  grid-template-columns: 385px 381px;
  column-gap: 51px;
  margin-left: 32px;
  margin-bottom: 22px;
}

.programme-row-three {
  grid-template-columns: 385px 382px;
  column-gap: 52px;
  margin-left: 31px;
  margin-bottom: 29px;
}

.programme-row-four {
  grid-template-columns: 378px 378px;
  column-gap: 59px;
  margin-left: 35px;
  margin-bottom: 49px;
}

.programme-row-five {
  grid-template-columns: 381px;
  margin-left: 34px;
}

.programme-tile {
  position: relative;
  display: block;
  overflow: hidden;
  background: #f2f2f2;
  border: 0;
  text-decoration: none;
  transform: translateZ(0);
  transition:
    transform 180ms ease,
    box-shadow 180ms ease;
}

.programme-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition:
    transform 220ms ease,
    filter 220ms ease;
}

.history-cabin-tile,
.science-moment-tile,
.big-cooking-challenge-tile,
.cooking-show-tile,
.talkshow-tile {
  height: 218px;
}

.hello-world-tile {
  height: 221px;
}

.mystery-moment-tile,
.song-of-the-week-tile,
.waiter-waiter-tile {
  height: 219px;
}

.programme-tile:hover,
.programme-tile:focus-visible {
  z-index: 2;
  outline: none;
  transform: translateY(-2px);
  box-shadow: 0 5px 12px rgb(0 0 0 / 22%);
}

.programme-tile:hover img,
.programme-tile:focus-visible img {
  filter: brightness(1.04) contrast(1.03);
  transform: scale(1.015);
}

@media (max-width: 980px) {
  .programmes-main {
    width: calc(100% - 32px);
  }

  .programmes-heading {
    margin-left: 0;
  }

  .programmes-rule {
    width: 100%;
  }

  .programme-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 24px;
    margin-left: 0;
  }

  .programme-row-five {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .programme-tile {
    width: 100%;
    height: auto;
    aspect-ratio: 1.75 / 1;
  }
}

@media (max-width: 620px) {
  .programmes-heading h1 {
    font-size: 34px;
  }

  .programme-row,
  .programme-row-five {
    grid-template-columns: 1fr;
    row-gap: 18px;
    margin-bottom: 18px;
  }

  .programme-row-five {
    margin-bottom: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .programme-tile,
  .programme-tile img {
    transition: none;
  }
}