.materials-page {
  .courses {
    background: transparent;

    &_list-header {
      margin-bottom: 2rem;

      @media (max-width: $breakpoint-md - 1) {
        font-size: 1rem;

        .sort {
          width: 60%;
        }

        .description {
          width: 40%;
        }
      }
    }
  }

  .card {
    overflow: visible;

    .card-info {
      padding: 1rem;

      p {
        margin-bottom: 0.5rem;
      }

      h4 {
        font-size: _font(h5-size);
        color: $color-light-blue;
      }

      h2 {
        text-transform: none;
        color: $color-dark-blue;
        margin-bottom: 1.5rem;
        font-weight: _font(weight);
      }
    }

    &:hover {
      &.light-blue-bg {
        background: $color-light-blue;
      }

      .card-info {
        h2 {
          color: _palette(auxiliary-menu, fg);

          a {
            color: inherit;
          }
        }

        .date,
        h4 {
          color: white;
        }

      }
    }
  }

  .left-column {
    .box {
      padding: 2rem 0rem;
    }
  }


}

@media (max-width: $breakpoint-md - 1) {
  .mb-bg {

    >[class ^='col'] {
      padding: 2rem 1rem;

      &:nth-child(odd) {
        background-color: _palette(courses, bg);
      }

      &:nth-child(even) {
        background-color: white;

      }

      .card {
        background-color: transparent;
        margin-bottom: 0;
      .card-info{
        padding-left: 0;
        padding-right: 0;
        padding-bottom: 0;
        h2{
          &:last-child{
            margin-bottom: 0;
          }
        }
      }

        &:hover {
          background-color: transparent;
          @include box-shadow(none);

          p,
          h2
          {
            color: black !important;
          }
          h4 a{
            color: $color-light-blue;
          }
        }
      }
    }
  }
}