#articles-container {

  display: flex;

  .articles {
    width: 75%;
  }

  .articles:not(.no-result) {
    grid-template-columns: repeat(3, 1fr);
  }

  #articles-filters-container {

    width: 25%;

    #articles-filters {

      padding: .5rem .5rem 1rem .5rem;
      margin-right: 1.5rem;
      display: flex;
      flex-direction: column;
      /* gap: .5rem; */
      /* position: sticky;
      top: 1rem; */
      border: 1px solid var(--bg-grey);
      border-radius: .5rem;
      overflow: hidden;

      > label {
        font-size: .9rem;
        line-height: 1.1rem;
        font-weight: 600;
        font-family: var(--font-alt);
        display: block;
        position: relative;
        border-top: 1px solid var(--bg-grey);
        padding-top: 1rem;
        margin-top: 1rem;
        cursor: pointer;
      }

      > label:after {
        content: "\f0fe";
        font-family: var(--font-awe);
        font-weight: 600;
        float: right;
      }

      > input[type="checkbox"]:checked + label:after,
      > input[type="radio"]:checked + label:after {
        content: "\f146";
      }

      > input[type="checkbox"],
      > input[type="radio"] {
        display: none;
      }

      > input[type="checkbox"] + label + fieldset,
      > input[type="radio"] + label + fieldset {
        max-height: 0;
        opacity: 0;
        margin: 0;
      }

      > input[type="checkbox"]:checked + label + fieldset,
      > input[type="radio"]:checked + label + fieldset {
        max-height: 10000px;
        opacity: 1;
        margin: .5rem 0;
      }

      fieldset#orderby {
        margin: .5rem 0;
      }

      fieldset.toggle-switch {

        margin: .5rem 0;

        label {
          cursor: pointer;
          flex: auto;

          input[type=checkbox] + span {
            height: 1.5rem;
            border-radius: .75rem;
            background-color: var(--alto-white);
            box-shadow: inset 2.53px 2.53px 7.6px #d4d4d4, inset -2.53px -2.53px 7.6px #fff;
          }

          input[type=checkbox] + span:before {
            content: "\f12a";
            font-family: var(--font-awe);
            font-weight: 600;
            font-size: .7rem;
            text-align: center;
            line-height: 1rem;
            color: var(--alto-red);
            border-radius: 50%;
            height: calc(100% - 6px);
            width: calc(1.5rem - 6px);
            top: 3px;
            left: 3px;
            background: var(--alto-white);
            box-shadow: 2.53px 2.53px 7.6px #d4d4d4, -2.53px -2.53px 7.6px #ffffff;
          }

          input[type=checkbox]:checked + span:before {
            content: "\f00c";
            right: 3px;
            left: auto;
            color: var(--alto-black);
          }

          input[type=checkbox]:active + span:before {
            width: 50%;
          }
        }

        label:last-child {
          max-width: 4rem;
        }

      }

      fieldset {

        min-width: 0;
        gap: .5rem;
        position: relative;
        transition: .15s ease-in-out;

        label {
          font-size: .8rem;
          line-height: 1.2rem;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          display: inline-block;
        }

        input[type="checkbox"] + label:before,
        input[type="radio"] + label:before {
          content: "\f00c";
          background-color: var(--bg-grey);
          width: 1.2rem;
          height: 1.2rem;
          display: inline-block;
          border-radius: .25rem;
          color: var(--bg-grey);
          /* font-size: .8rem;
          line-height: 1.2rem; */
          font-family: var(--font-awe);
          font-weight: 600;
          text-align: center;
          transition: .15s ease-out;
          margin-right: .5rem;
        }

        input[type="checkbox"]:checked + label:before,
        input[type="radio"]:checked + label:before {
          color: var(--alto-black);
        }

        input[type="checkbox"]:disabled + label {
          display: none;
        }

        select {
          border: 1px solid var(--border-grey);
          padding: .5rem;
          border-radius: .5rem;
          cursor: pointer;
          font-size: .8rem;
          position: relative;
          z-index: 2;

          optgroup {
            background-color: var(--bg-grey);

            option {
              background-color: var(--alto-white);
            }
          }
        }

        select + label {
          position: absolute;
          font-size: 1rem;
          line-height: 2rem;
          vertical-align: middle;
          top: 50%;
          transform: translateY(-50%);
          right: .5rem;
          cursor: pointer;
          z-index: 1;
        }

      }

      label.disabled,
      label.disabled + fieldset {
        display: none;
      }

    }

  }

}

@media only screen and (max-width: 701px)  {

  #articles-container {

    #articles-filters-container {

      position: absolute;
      top: 0;
      background-color: var(--alto-white);
      width: 85vw;
      height: 100%;
      z-index: 100;
      overflow-x: visible;
      overflow-y: auto;
      transition: all .25s ease-out;
      scroll-behavior: smooth;
      border-radius: 0;
      left: -85vw;
	    box-shadow: 0.5rem 0 1rem 0 rgba(0, 0, 0, 0);

      #articles-filters {
        border: none;
        margin: 0;
      }

    }

    #articles-filters-container.expanded {
			left: 0;
	    box-shadow: 0.5rem 0 1rem 0 rgba(0, 0, 0, .5);
		}

    .articles {
      width: 100%;
    }

  }

}