SCSS

by Victor

HTML

<div class="courses">
  <div class="courses__item">
    <div class="courses__item__image" style="  background-image: url('//placeimg.com/640/480/any');"></div>
      <div class="courses__item__info">
        <div class="courses__item__info__title">
          How To Make A Latte
        </div>
                <div class="courses__item__info__type">Food</div>

        <div class="courses__item__info__price">$44.50</div>
      </div>
  </div>
   <div class="courses__item">
    <div class="courses__item__image" style="  background-image: url('//placeimg.com/640/481/any');"></div>
      <div class="courses__item__info">
        <div class="courses__item__info__title">
          MTB 101
        </div>
        <div class="courses__item__info__type">Outdoor</div>
        <div class="courses__item__info__price">$44.50</div>
      </div>
  </div>
   <div class="courses__item">
    <div class="courses__item__image" style="  background-image: url('//placeimg.com/640/482/any');"></div>
      <div class="courses__item__info">
        <div class="courses__item__info__title">
          Digital Painting
        </div>
                <div class="courses__item__info__type">Art/Creative</div>

        <div class="courses__item__info__price">$44.50</div>
      </div>
  </div>
   <div class="courses__item">
    <div class="courses__item__image" style="  background-image: url('//placeimg.com/640/483/any');"></div>
      <div class="courses__item__info">
        <div class="courses__item__info__title">
          Repairing A Leaky Pipe
        </div>
                <div class="courses__item__info__type">Life Skills</div>

        <div class="courses__item__info__price">$44.50</div>
      </div>
  </div>
   <div class="courses__item">
    <div class="courses__item__image" style="  background-image: url('//placeimg.com/640/484/any');"></div>
      <div class="courses__item__info">
        <div class="courses__item__info__title">
          Cat Training Seminar
        </div>
             ...

SCSS

* {
  box-sizing: border-box;
}

.courses {
  padding: 1rem;
  
  display: flex;
  flex-wrap: wrap;
  
  &__item {
    font-family: sans-serif;   
  
    border: 1px solid #888;
    border-radius: 4px;
    flex: 0.24;
    max-width: 24%;
    width: 24%;
min-width: 24%;
margin-right: 1%;
margin-bottom: 1%;
    
    text-align: center;
    
    &:nth-child(4n) {
      margin-right: 0;
    }
    
    &__image {
      
      padding: 1rem;
      background-color: #888;;
      height: 33vh;
      min-height: 80px;
      max-height: 33vh;
      background-size: cover;
          border-bottom: 1px solid #888;

    }
    &__info {
      padding: 1rem 1rem;
      
      &__title {
        margin-bottom: 0.5rem;;
        font-weight: 700;
      }
      &__type {
          font-size: 12px;
        letter-spacing: 0.05rem;
        color: #999;
        margin-bottom: 0.5rem;;
        color: #00bcf2;
      }
      &__price {
        font-size: 12px;
        letter-spacing: 0.05rem;
        color: #999;
        align-self:flex-end;
        
      }
    }
  }
}