/* MixGeo Halloween collection 1.1.0. Uses only mg-hw-film* names. */
.mg-hw-films { display: none; }
.mg-halloween .mg-hw-films {
  display: block;
  margin-top: 34px;
  margin-bottom: 10px;
  padding: 30px;
  border: 1px solid #aa725e66;
  border-radius: 22px;
  background: radial-gradient(ellipse 80% 380px at 0 0, #9f482d29, transparent),
              radial-gradient(ellipse 70% 550px at 100% 0, #6c449a27, transparent), #15101e;
  box-shadow: 0 16px 48px #0003;
  box-sizing: border-box;
}
.mg-hw-films-heading {
  position: relative;
  display: flex;
  align-items: center;
  gap: 22px;
  padding-bottom: 25px;
  margin-bottom: 26px;
  border-bottom: 1px solid #d5a5d020;
}
.mg-hw-films-heading::after {
  content: "";
  position: absolute;
  top: -29px;
  right: -29px;
  width: 135px;
  height: 105px;
  background: url("../images/halloween/web.svg") left top / contain no-repeat;
  transform: scaleX(-1);
  opacity: .16;
  pointer-events: none;
}
.mg-hw-films-art {
  position: relative;
  flex: 0 0 88px;
  width: 88px;
  height: 88px;
  border: 1px solid #ffb07433;
  border-radius: 24px;
  background: radial-gradient(circle at 50% 60%, #ff8b2427, transparent 72%), #ff9b4707;
}
.mg-hw-films-art span {
  display: block;
  width: 68px;
  height: 68px;
  margin: 9px;
  background: url("../images/halloween/pumpkin.svg") center / contain no-repeat;
  transform: rotate(-7deg);
}
.mg-hw-films-intro { flex: 1; min-width: 0; }
.mg-hw-films-label { display: block; color: #ffc08c; font: 10px/1.6 'BPG Arial Caps', sans-serif; letter-spacing: 1.6px; }
.mg-hw-films-heading h2 { margin: 8px 0; color: #fff1e9; font: 28px/1.45 'BPG Arial Caps', sans-serif; overflow-wrap: anywhere; }
.mg-hw-films-heading p { margin: 0; color: #c0afcd; font: 13px/1.9 'BPG Arial', sans-serif; }
.mg-hw-films-all {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  gap: 16px;
  min-height: 45px;
  padding: 11px 17px;
  color: #ffd2b1 !important;
  background: #ff9d5410;
  border: 1px solid #ffb17345;
  border-radius: 10px;
  font: 12px/1.6 'BPG Arial Caps', sans-serif;
  text-decoration: none;
  transition: background .2s, border-color .2s;
}
.mg-hw-films-all:hover { color: #fff !important; background: #b45b252d; border-color: #ffb17399; }
.mg-hw-films-all span { font: 22px/1 Arial, sans-serif; }
.mg-hw-films-grid { display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); gap: 26px 18px; }
.mg-hw-film { min-width: 0; margin: 0; }
.mg-hw-film-poster {
  position: relative;
  isolation: isolate;
  display: block;
  aspect-ratio: 2 / 3;
  overflow: hidden;
  border: 1px solid #ba8bb739;
  border-radius: 12px;
  background: linear-gradient(150deg,#33223e,#211724);
  color: #fff;
  text-decoration: none;
  transition: border-color .2s, box-shadow .2s;
}
.mg-hw-film-poster::after { content: ""; position: absolute; z-index: 0; inset: 45% 0 0; background: linear-gradient(transparent,#100b16d9); pointer-events: none; }
.mg-hw-film-poster img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.mg-hw-film:hover .mg-hw-film-poster, .mg-hw-film-poster:focus-visible { border-color: #ffad70; box-shadow: 0 0 0 1px #ff9d5426, 0 8px 25px #0005; }
.mg-hw-film:hover img { transform: scale(1.045); }
.mg-hw-film-placeholder { display: grid; place-items: center; width: 100%; height: 100%; color: #b898c5; font: bold 17px Arial,sans-serif; letter-spacing: 2px; }
.mg-hw-film-rating { position: absolute; top: 9px; left: 9px; z-index: 1; max-width: calc(100% - 18px); padding: 4px 7px; border: 1px solid #ffd09b33; border-radius: 6px; background: #1e1223eb; color: #ffd69a; font: bold 11px/1.5 Arial,sans-serif; }
.mg-hw-film-quality { position: absolute; bottom: 9px; left: 9px; z-index: 1; max-width: calc(100% - 18px); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; padding: 5px 7px; border: 1px solid #e5c8ea33; border-radius: 5px; background: #20142be6; color: #eddbf6; font: 10px/1.4 'BPG Arial',sans-serif; }
.mg-hw-film-play { position: absolute; z-index: 1; top: 50%; left: 50%; display: grid; place-items: center; width: 46px; height: 46px; border: 1px solid #ffdcaf99; border-radius: 50%; background: #b95a29ed; color: #fff; opacity: 0; transform: translate(-50%,-50%); transition: opacity .2s; pointer-events: none; }
.mg-hw-film-play svg { width: 23px; height: 23px; fill: currentColor; }
.mg-hw-film:hover .mg-hw-film-play, .mg-hw-film-poster:focus-visible .mg-hw-film-play { opacity: 1; }
.mg-hw-film-copy { padding: 13px 1px 0; }
.mg-hw-film-copy h3 { margin: 0 0 9px; color: #f1e6f4; font: 13px/1.65 'BPG Arial Caps',sans-serif; overflow-wrap: anywhere; }
.mg-hw-film-copy h3 a { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; color: inherit; text-decoration: none; }
.mg-hw-film-copy h3 a:hover { color: #ffbc8c; }
.mg-hw-film-meta { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 7px; color: #b5a3c0; font: 11px/1.5 Arial,sans-serif; }
.mg-hw-film-tag { color: #bf9cce; font-size: 8px; letter-spacing: .8px; }
.mg-hw-films-footer { display: flex; justify-content: center; align-items: center; gap: 9px; margin-top: 26px; padding-top: 19px; border-top: 1px solid #bd94cd20; color: #baa6c6; text-align: center; font: 11px/1.8 'BPG Arial',sans-serif; }
.mg-hw-films-footer span { color: #e7af77; font: 22px/1 Arial,sans-serif; }
.mg-hw-films :focus-visible { outline: 2px solid #ffc18b; outline-offset: 4px; }
.mg-hw-films-grid > .berrors, .mg-hw-films-grid > .box { grid-column: 1 / -1; }
@media (max-width: 1200px) {
  .mg-hw-films-grid { grid-template-columns: repeat(4,minmax(0,1fr)); }
  .mg-hw-films-heading h2 { font-size: 24px; }
}
@media (max-width: 900px) {
  .mg-halloween .mg-hw-films { padding: 24px; }
  .mg-hw-films-grid { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 24px 16px; }
  .mg-hw-films-heading { flex-wrap: wrap; gap: 16px; }
  .mg-hw-films-art { flex-basis: 70px; width: 70px; height: 70px; border-radius: 19px; }
  .mg-hw-films-art span { width: 54px; height: 54px; margin: 7px; }
  .mg-hw-films-heading::after { top: -23px; right: -23px; }
}
@media (max-width: 600px) {
  .mg-halloween .mg-hw-films { margin-top: 25px; padding: 18px 14px; border-radius: 16px; }
  .mg-hw-films-heading { gap: 12px; margin-bottom: 20px; padding-bottom: 18px; }
  .mg-hw-films-intro { flex-basis: calc(100% - 68px); }
  .mg-hw-films-art { flex-basis: 54px; width: 54px; height: 58px; border-radius: 15px; }
  .mg-hw-films-art span { width: 44px; height: 46px; margin: 5px; }
  .mg-hw-films-label { font-size: 8px; letter-spacing: .9px; }
  .mg-hw-films-heading h2 { margin: 6px 0; font-size: 18px; }
  .mg-hw-films-heading p { font-size: 11px; line-height: 1.75; }
  .mg-hw-films-all { width: 100%; min-height: 40px; padding: 8px 14px; margin-top: 3px; font-size: 11px; }
  .mg-hw-films-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 21px 12px; }
  .mg-hw-film-copy { padding-top: 10px; }
  .mg-hw-film-copy h3 { font-size: 11px; margin-bottom: 7px; }
  .mg-hw-film-meta { font-size: 10px; gap: 5px; }
  .mg-hw-film-tag { font-size: 7px; letter-spacing: .5px; }
  .mg-hw-film-rating { top: 7px; left: 7px; padding: 3px 5px; font-size: 10px; }
  .mg-hw-film-quality { bottom: 7px; left: 7px; max-width: calc(100% - 14px); padding: 4px 5px; font-size: 8px; }
  .mg-hw-film-poster { border-radius: 9px; }
  .mg-hw-films-heading::after { top: -17px; right: -13px; width: 100px; height: 80px; }
  .mg-hw-films-footer { margin-top: 21px; padding-top: 16px; font-size: 10px; }
}
@media (hover: none) { .mg-hw-film-play { opacity: .85; width: 37px; height: 37px; } }
@media (prefers-reduced-motion: reduce) {
  .mg-hw-film-poster, .mg-hw-film-poster img, .mg-hw-film-play, .mg-hw-films-all { transition: none; }
  .mg-hw-film:hover img { transform: none; }
}