@import url("decks.css");

.dk-film {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 55px 22px;
  padding: 0 6vw;
  align-items: start;
}

.dk-film figure:nth-child(1) {
  grid-column: 1 / 8;
  grid-row: 1;
  margin: 0;
}

.dk-film figure:nth-child(2) {
  grid-column: 8 / 13;
  grid-row: 1;
  margin: 110px 0 0;
}

.dk-film figure:nth-child(3) {
  grid-column: 3 / 11;
  grid-row: 2;
  margin: 0;
}

.dk-film img,
.dk-film figure:nth-child(2) img,
.dk-film figure:nth-child(3) img {
  width: 100%;
  height: 470px;
  object-fit: cover;
  border-radius: 0;
}

.dk-film figure:nth-child(2) img { height: 380px; }
.dk-film figure:nth-child(3) img { height: 500px; }

.dk-film figcaption {
  border-left: 2px solid #d9aa90;
  padding: 15px 0 5px 16px;
}

@media (max-width: 800px) {
  .dk-film { grid-template-columns: 1fr 1fr; padding: 0 5vw; }
  .dk-film figure:nth-child(1),
  .dk-film figure:nth-child(2) { grid-column: auto; grid-row: auto; margin: 0; }
  .dk-film figure:nth-child(3) { grid-column: 1 / -1; grid-row: auto; width: 65%; margin: 0 auto; }
}

@media (max-width: 520px) {
  .dk-film { grid-template-columns: 1fr; padding: 0 6vw; gap: 36px; }
  .dk-film figure:nth-child(1),
  .dk-film figure:nth-child(2),
  .dk-film figure:nth-child(3) { grid-column: auto; width: auto; margin: 0; }
  .dk-film img,
  .dk-film figure:nth-child(2) img,
  .dk-film figure:nth-child(3) img { height: 340px; }
}