.discover-component {
  max-width: $container-large;
  background-color: $gray-light;
  min-height: 90vh;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  box-shadow: 0px 0px 6px 1px rgba(99, 99, 99, 0.12);
  padding: 20px;
  padding-bottom: 52px;
  @media screen and (max-width: $break-mobile) {
    padding: 5px;
  }
  h1 {
    text-align: center;
    font-size: 2rem;
    margin-bottom: 20px;
  }
  .discover-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    width: 100%;
    .discover-item {
      position: relative;
      display: flex;
      justify-content: center;
      margin-bottom: 20px;
      cursor: pointer;

      img {
        width: 225px;
        height: 225px;
        transition: 0.3s all ease;
        box-shadow: $box-shadow-primary;
      }
      h2 {
        position: absolute;
        top: 80%;
        color: $gray-light;
        cursor: pointer;
        transition: 0.35s all ease;
        letter-spacing: 1px;
        font-size: 0.9rem;
        white-space: nowrap;
        overflow: hidden;
        width: 100%;
        text-align: center;
      }
      &:hover h2 {
        text-decoration: underline;
        color: $brand-secondary;
      }
      &:hover img {
        filter: invert(10%);
      }
    }
  }
}
