:root {
  --scroll-bar-width: 20px;
  --movie-card-width: 0;
  --movie-card-image-height: 0;
  --movie-card-height: 0;
  --movie-card-text-section-height: 82px;
}

.movie-slide-swiper {
  width: calc(100vw - var(--scroll-bar-width) - var(--side-menu-width));
}
@media screen and (max-width: 890px) {
  .movie-slide-swiper {
  width: calc(100vw - var(--scroll-bar-width));
}
}


.right-panel {flex-shrink: 0; flex-grow: 0;}

.movie-section {}

.movie-card {
  background: var(--color-black);
  border-radius: 6px;
  overflow: hidden;
  position: relative;
}

.movie-card-image {
  width: var(--movie-card-width);
  height: var(--movie-card-image-height);
}

.movie-card-text-section {
  display: -webkit-box;         /* Use flexbox layout */
  -webkit-box-orient: vertical; /* Set the orientation to vertical */
  -webkit-line-clamp: 3;       /* Limit to 2 lines */
  overflow: hidden;            /* Hide overflow text */
  text-overflow: ellipsis;
  width: calc(100% - 16px);
  height: 66px;
  margin: 8px;
  line-height: 1.4em;
}

.movie-card-container {
  display: grid;
}

@media screen and (min-width: 1660px) {
  :root {
    --side-menu-width: 300px;
    --right-panel-width: 420px;
    --full-vw: calc(100vw - var(--scroll-bar-width));
    --movie-cards-per-row: 6;
    --movie-card-gap-width: 18px;
    --card-gap-height: var(--movie-card-gap-width);
    --movie-cards-gap-total: calc((var(--movie-cards-per-row) + 1) * var(--movie-card-gap-width));
    --movie-card-width: calc( (var(--full-vw) - var(--side-menu-width) - var(--right-panel-width) - var(--movie-cards-gap-total)) / var(--movie-cards-per-row) );
    --movie-card-image-height: calc(var(--movie-card-width) * 1.333333);
    --movie-card-height: calc(var(--movie-card-image-height) + var(--movie-card-text-section-height));
  }
  .movie-card {
    width: var(--movie-card-width);
    height: var(--movie-card-height);
  }
  .movie-card-container {
    display: grid!important;
    grid-template-columns: repeat(var(--movie-cards-per-row), 1fr);
    gap: 0;
    margin-left: var(--movie-card-gap-width);
    width: calc( (var(--movie-card-width) * var(--movie-cards-per-row)) + var(var(--movie-cards-gap-total)) - var(--movie-card-gap-width));
    grid-template-rows: calc(var(--movie-card-height) + var(--card-gap-height));
    grid-auto-rows: calc(var(--movie-card-height) + var(--card-gap-height));
    justify-content: start;
  }
}

@media screen and (min-width:1346px) and (max-width: 1659px) {
  :root {
    --side-menu-width: 300px;
    --right-panel-width: 420px;
    --full-vw: calc(100vw - var(--scroll-bar-width));
    --movie-cards-per-row: 4;
    --movie-card-gap-width: 18px;
    --card-gap-height: var(--movie-card-gap-width);
    --movie-cards-gap-total: calc((var(--movie-cards-per-row) + 1) * var(--movie-card-gap-width));
    --movie-card-width: calc( (var(--full-vw) - var(--side-menu-width) - var(--right-panel-width) - var(--movie-cards-gap-total)) / var(--movie-cards-per-row) );
    --movie-card-image-height: calc(var(--movie-card-width) * 1.333333);
    --movie-card-height: calc(var(--movie-card-image-height) + var(--movie-card-text-section-height));
  }
  .movie-card {
    width: var(--movie-card-width);
    height: var(--movie-card-height);
  }
  .movie-card-container {
    display: grid!important;
    grid-template-columns: repeat(var(--movie-cards-per-row), 1fr);
    gap: 0;
    margin-left: var(--movie-card-gap-width);
    width: calc( (var(--movie-card-width) * var(--movie-cards-per-row)) + var(--movie-cards-gap-total) - var(--movie-card-gap-width));
    padding: 0;
    grid-template-rows: calc(var(--movie-card-height) + var(--card-gap-height));
    grid-auto-rows: calc(var(--movie-card-height) + var(--card-gap-height));
    justify-content: start;
  }
  .movie-section {flex-direction: row;}
}

@media screen and (min-width: 891px) and (max-width: 1345px) {
  :root {
    --side-menu-width: 300px;
    --full-vw: calc(100vw - var(--scroll-bar-width));
    --movie-cards-per-row: 4;
    --movie-card-gap-width: 18px;
    --card-gap-height: var(--movie-card-gap-width);
    --movie-cards-gap-total: calc((var(--movie-cards-per-row) + 1) * var(--movie-card-gap-width));
    --movie-card-width: calc( (var(--full-vw) - var(--side-menu-width) - var(--movie-cards-gap-total)) / var(--movie-cards-per-row) );
    --movie-card-image-height: calc(var(--movie-card-width) * 1.333333);
    --movie-card-height: calc(var(--movie-card-image-height) + var(--movie-card-text-section-height));
  }
  .movie-card {
    width: var(--movie-card-width);
    height: var(--movie-card-height);
  }
  .movie-card-container {
    display: grid!important;
    grid-template-columns: repeat(var(--movie-cards-per-row), 1fr);
    gap: 0;
    margin-left: var(--movie-card-gap-width);
    width: calc( (var(--movie-card-width) * var(--movie-cards-per-row)) + var(--movie-cards-gap-total) - var(--movie-card-gap-width));
    padding: 0;
    grid-template-rows: calc(var(--movie-card-height) + var(--card-gap-height));
    grid-auto-rows: calc(var(--movie-card-height) + var(--card-gap-height));
    justify-content: start;
  }
  .movie-section {flex-direction: column;}
  .right-panel {width: 100%;}
}

@media screen and (min-width: 590px) and (max-width: 890px) {
  :root {
    --side-menu-width: 300px;
    --full-vw: calc(100vw - var(--scroll-bar-width));
    --movie-cards-per-row: 4;
    --movie-card-gap-width: 18px;
    --card-gap-height: var(--movie-card-gap-width);
    --movie-cards-gap-total: calc((var(--movie-cards-per-row) + 1) * var(--movie-card-gap-width));
    --movie-card-width: calc( (var(--full-vw) - var(--movie-cards-gap-total)) / var(--movie-cards-per-row) );
    --movie-card-image-height: calc(var(--movie-card-width) * 1.333333);
    --movie-card-height: calc(var(--movie-card-image-height) + var(--movie-card-text-section-height));
  }
  .movie-card {
    width: var(--movie-card-width);
    height: var(--movie-card-height);
  }
  .movie-card-container {
    display: grid!important;
    grid-template-columns: repeat(var(--movie-cards-per-row), 1fr);
    gap: 0;
    margin-left: var(--movie-card-gap-width);
    width: calc( (var(--movie-card-width) * var(--movie-cards-per-row)) + var(--movie-cards-gap-total) - var(--movie-card-gap-width));
    padding: 0;
    grid-template-rows: calc(var(--movie-card-height) + var(--card-gap-height));
    grid-auto-rows: calc(var(--movie-card-height) + var(--card-gap-height));
    justify-content: start;
  }

  .movie-section {flex-direction: column;}
  .right-panel {width: 100%;}
}

@media screen and (max-width: 589px) {
  :root {
    --side-menu-width: 300px;
    --full-vw: calc(100vw - var(--scroll-bar-width));
    --movie-cards-per-row: 2;
    --movie-card-gap-width: 18px;
    --card-gap-height: var(--movie-card-gap-width);
    --movie-cards-gap-total: calc((var(--movie-cards-per-row) + 1) * var(--movie-card-gap-width));
    --movie-card-width: calc( (var(--full-vw) - var(--movie-cards-gap-total)) / var(--movie-cards-per-row) );
    --movie-card-image-height: calc(var(--movie-card-width) * 1.333333);
    --movie-card-height: calc(var(--movie-card-image-height) + var(--movie-card-text-section-height));
  }
  .movie-card {
    width: var(--movie-card-width);
    height: var(--movie-card-height);
  }
  .movie-card-container {
    display: grid!important;
    grid-template-columns: repeat(var(--movie-cards-per-row), 1fr);
    gap: 0;
    margin-left: var(--movie-card-gap-width);
    width: calc( (var(--movie-card-width) * var(--movie-cards-per-row)) + var(--movie-cards-gap-total) - var(--movie-card-gap-width));
    padding: 0;
    justify-content: start;
    grid-template-rows: calc(var(--movie-card-height) + var(--card-gap-height));
    grid-auto-rows: calc(var(--movie-card-height) + var(--card-gap-height));
  }
  .movie-section {flex-direction: column;}
  .right-panel {width: 100%;}
}