.template__works-index {
  padding-top: clamp(120px, 24svh, 2000px);
  padding-bottom: 200px; }
  .template__works-index .artworks {
    row-gap: 30px; }
    .template__works-index .artworks .single-work {
      grid-column: span 6;
      cursor: pointer; }
      .template__works-index .artworks .single-work img {
        width: 100%; }
      .template__works-index .artworks .single-work .info {
        opacity: 0;
        transition: .8s ease-out; }
        .template__works-index .artworks .single-work .info .title {
          padding-top: 8px; }
        .template__works-index .artworks .single-work .info .year {
          padding-top: 20px; }
      .template__works-index .artworks .single-work:hover .info {
        opacity: 1;
        transition: .3s ease-in; }
  .template__works-index .filters {
    padding-bottom: 40px; }
    .template__works-index .filters .filter-menu {
      grid-column: 1/4;
      overflow: hidden; }
    .template__works-index .filters .filter-options-wrap {
      grid-column: 4/9;
      padding-top: 22px; }
      .template__works-index .filters .filter-options-wrap .inner {
        min-height: 100%;
        position: relative; }
      .template__works-index .filters .filter-options-wrap nav.filter-menu {
        position: relative;
        max-height: 0;
        opacity: 0;
        top: 0;
        left: 0;
        transition: all .2s ease-in-out; }
        .template__works-index .filters .filter-options-wrap nav.filter-menu.show-menu {
          opacity: 1;
          max-height: min-content; }
    .template__works-index .filters .sortBy-menu {
      grid-column: 22 /25; }
    .template__works-index .filters .title {
      padding-bottom: 8px; }
    .template__works-index .filters .filter-btn {
      display: block;
      transition: all .3s ease-in-out;
      position: relative; }
      .template__works-index .filters .filter-btn:hover {
        opacity: 40%; }
    .template__works-index .filters .filter-btn.active {
      padding-left: 12px; }
    .template__works-index .filters .filter-btn.active::before {
      content: url(../../icons/star.svg);
      display: inline-block;
      margin-right: 3px;
      width: 10px;
      position: absolute;
      top: -3px;
      left: 0; }
    .template__works-index .filters .clear-btn {
      opacity: 40%;
      padding-top: 25px; }

nav.sort-menu .filter-btn.asc, nav.sort-menu .filter-btn.desc {
  padding-left: 12px; }
  nav.sort-menu .filter-btn.asc::before, nav.sort-menu .filter-btn.desc::before {
    content: url(../../icons/star.svg);
    display: inline-block;
    margin-right: 3px;
    width: 10px;
    position: absolute;
    top: -3px;
    left: 0; }

@media (max-width: 960px) {
  .template__works-index .filters .parent-filter-menu {
    grid-column: 1/4; }
  .template__works-index .filters .filter-options-wrap {
    grid-column: 4/9; }
  .template__works-index .filters .sortBy-menu {
    grid-column: 10/12; }
  .template__works-index .artworks .single-work .info {
    opacity: 1; }
    .template__works-index .artworks .single-work .info .title {
      padding-top: 11px; }
    .template__works-index .artworks .single-work .info .year {
      padding-top: 13px; } }