:root {
  --carousel-height: auto; }

.carousel-film-strip {
  position: relative;
  width: 100%; }
  .carousel-film-strip .arrow-wrapper {
    position: absolute;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    top: 50%;
    z-index: 1;
    display: flex;
    align-items: center;
    background-color: #EEE;
    padding: 1rem 0;
    border-radius: 5px; }
  .carousel-film-strip .previous-button-wrapper {
    left: 50px; }
  .carousel-film-strip .next-button-wrapper {
    right: 0; }
  .carousel-film-strip .is-control {
    background: 0;
    border: 0;
    padding: 0 10px;
    z-index: 1;
    cursor: pointer;
    font-size: 40px;
    color: rgba(0, 0, 0, 0.6);
    transition: all .2s linear; }
  .carousel-film-strip .is-control:hover {
    color: black; }
  .carousel-film-strip .is-control:focus {
    outline: none;
    background-color: rgba(0, 0, 0, 0.8);
    color: white;
    border-radius: 5px; }
  .carousel-film-strip .splide__arrow {
    background: #EEE;
    border-radius: 10px;
    opacity: 1;
    height: 4rem;
    width: 3rem; }
    .carousel-film-strip .splide__arrow svg {
      fill: #333;
      height: 2em;
      width: 2em; }
  .carousel-film-strip .splide__arrow:focus, .carousel-film-strip .splide__arrow:hover {
    background: #333;
    color: white; }
    .carousel-film-strip .splide__arrow:focus svg, .carousel-film-strip .splide__arrow:hover svg {
      fill: #FFF; }
  .carousel-film-strip .card {
    position: relative;
    overflow: hidden;
    border-radius: 3px;
    border: 1px solid rgba(0, 0, 0, 0.2);
    text-decoration: none;
    color: rgba(0, 0, 0, 0.9);
    cursor: grab;
    transition: all .1s linear; }
  .carousel-film-strip .card a {
    text-decoration: none; }
  .carousel-film-strip .card a .carousel-content {
    color: rgba(0, 0, 0, 0.9); }
  .carousel-film-strip .card .image {
    height: 240px;
    padding: 2px;
    overflow: hidden;
    margin-bottom: 2rem; }
  .carousel-film-strip .card .image img {
    width: 100%;
    height: 100% !important;
    object-fit: cover;
    filter: grayscale(0.2); }
  .carousel-film-strip .card .content {
    padding: 0 10px 10px 10px;
    transition: color .1s linear; }
  .carousel-film-strip .card:hover {
    border-color: rgba(0, 0, 0, 0.4);
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.15); }
  .carousel-film-strip .card > a:hover .image img, .carousel-film-strip .card > a:focus .image img {
    filter: grayscale(0); }
  .carousel-film-strip .card .carousel-title h2, .carousel-film-strip .card .carousel-title h3, .carousel-film-strip .card .carousel-title h4 {
    font-size: calc(18px + 8 * ((100vw - 100px) / 1900)) !important; }
  .carousel-film-strip .card .carousel-title strong {
    font-size: calc(17px + 4*((100vw - 100px)/1900)); }
  .carousel-film-strip .card > a:hover .carousel-title {
    text-decoration: underline; }
  .carousel-film-strip .card > a:focus {
    outline: none; }
  .carousel-film-strip .card:focus-within {
    border-color: #209cee;
    box-shadow: 0 0 0 2px #209cee; }
  .carousel-film-strip .card:focus-within .carousel-title, .carousel-film-strip .card:focus-within .content {
    color: #3273dc; }
  .carousel-film-strip .card:focus-within .carousel-title {
    text-decoration: underline; }
  .carousel-film-strip .card .carousel-cta-button {
    margin: -10px 10px 10px 10px; }
  @media screen and (min-width: 577px) and (max-width: 860px) {
    .carousel-film-strip .splide__list {
      position: relative;
      left: 25%; } }