#downloads-page {
  padding: 50px 0 200px 0;
  display: grid;
    grid-template-columns:
      [full-start] minmax(1em, 1fr)
      [main-start] minmax(0, 80em) [main-end]
      minmax(1em, 1fr) [full-end];
    grid-row-gap: 1em;

  &> * {
    grid-column: main;
  }

  h1 {

  }

  .downloads-inputs {
    display: flex;
    flex-direction: row;
    width: 100%;

    .downloads-search {
      width: 40%;
      padding-right: 10px;

      .search-wrapper {
        position: relative;

        &:before {
          font-family: 'Font Awesome\ 5 Free';
          font-size: 24px;
          font-weight: 900;
          color: #652f8f;
          content: "\f002";
          position: absolute;
          right: 15px;
          top: 50%;
          transform: translateY(-50%);
        }
      }

      input {
        width: 100%;
        height: 50px;
        padding: 15px;
        border-radius: 5px;
        border: 3px solid $purple;
        box-sizing: border-box;
      }
    }

    .downloads-filter {
      .filter {
        display: inline-block;
        padding: 12px;
        font-size: 24px;
        background-color: $purple;
        float: left;
        border-radius: 5px;
        border: none;
        cursor: pointer;

        i {
          color: #fff;
        }
      }
    }

    .downloads-filter-tags {
      display: flex;
      align-items: flex-end;
      justify-content: flex-end;

      span {
        padding: 5px 7px 5px 7px;
        margin-left: 5px;
        background-color: $purple;
        color: #fff;
        border-radius: 5px;
        font-size: 14px;
        text-transform: capitalize;

        i {
          margin-right: 5px;
          cursor: pointer;
        }
      }
    }
  }

  .downloads-filter-content {
    position: relative;
    display: none;
    // this row spans to the edge
    grid-column: span 3;
    // we need a new grid to match the outer grid for the content in this
    // container
    grid-template-columns:
      [full-start] minmax(1em, 1fr)
      [main-start] minmax(0, 80em) [main-end]
      minmax(1em, 1fr) [full-end];
    grid-column-gap: 0.5em;
    background-color: #fff;
    border-top: 1px solid $gray-border;
    border-bottom: 1px solid $gray-border;
    padding: 20px;

    &> div {
      grid-column: main;
      display: grid;
      grid-template-columns: repeat(3, minmax(200px, 1fr));
    }

    h2 {
      margin: 0 0 10px 0;
    }

    ul {
      list-style-type: none;
      text-decoration: none;
      margin: 0;
      padding: 0;

      li {
        padding: 4px;
        text-transform: capitalize;

        input {
          margin-right: 5px;
        }
      }
    }

    .filter-buttons {
      position: absolute;
      top: 20px;
      height: 50px;
      right: 0;
      width: 50px;

      button {
        width: 50px;
        height: 50px;
        background-color: $purple;
        color: #fff;
        border: none;
        border-radius: 5px;
        cursor: pointer;
      }
    }
  }

  .downloads-section {
    display: grid;
    grid-template-columns: repeat(4, minmax(200px, 1fr));
    grid-column-gap: 0.5em;
    grid-row-gap: 1.5em;

    .download {
      height: 100%;

      .img-responsive-4by3 {
        height: 0;
        overflow: hidden;
        padding-top: 75%;
        position: relative;
        width: 100%;
      }

      img {
        position: absolute;
        top: 50%;
        left: 50%;
        max-width: 100%;
        max-height: 100%;
        transform: translate(-50%, -50%);
      }

      a {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        height: 100%;
        background-color: #fff;
        padding: 5px 5px 0px 5px;
        color: #000;
        border: 1px solid $gray-border;
        margin: 1px;
        border-radius: 5px;

        &:hover {
          border-radius: 5px;
          margin: 0px;
          border: 2px solid #e90e8b;
        }

        .details {
          margin-left: 3px;
        }

        .features {
          margin: 20px 0 8px 3px;
          .feature {
            float: left;
            font-size: 13px;
            padding: 3px 5px 3px 5px;
            margin: 5px 5px 0px 0px;
            color: #fff;
            background-color: $purple;
            border-radius: 5px;
            text-transform: capitalize;
          }
        }

      }

      h3 {
        font-size: 24px;
        font-weight: 500;
        margin: 5px 0 5px 0;
      }
    }
  }
}

@media (max-width: $screen-md) {
  #downloads-page {
    .downloads-section {
      grid-template-columns: repeat(2, minmax(200px, 1fr));
    }
  }
}

@media (max-width: $screen-xs-max) {
  #downloads-page {
    .downloads-inputs {
      .downloads-search {
        width: 100%;
      }
    }
    .downloads-filter-content > div {
      grid-template-columns: repeat(1, 1fr);

      & > div {
        margin-top: 10px;
      }
    }
    .downloads-section {
      grid-template-columns: repeat(1, 1fr);
    }
  }
}
