help.css

.episodes {
  width: 100%;
  background-color: #e4e4e4;

  &__title {
    font-size: 2.5em;
    font-weight: bold;
    padding: 25px 0;
  }

  &__container {
    margin: 0 auto;
    width: 1000px;
    background-color: #e4e4e4;
  }
}

/*
  Episode Card

  A singular episode card on the home page.
  Gives information about and allows  users
  to perform actions on episodes. Typically
  displayed in a row of many.
*/
.episode {
  display: flex;
  flex-direction: row;
  margin-bottom: 50px;

  background-color: white;
  box-shadow: 0px 17px 69px -12px rgba(0,0,0,0.42);

  &__part {

    /*
      Episode Card Part - DATE

      This card part contains information regarding the
      date and time that the episode aired or airs.
    */
    &--date {
      padding: 20px;

        /*
          Sections

          Sections within the  DATE episode card  part are sub-areas
          of the component, handling specific separated information,
          such as time, date, month, etc.
        */
        &__section {

          /* Section - NUMBER - Large, stylized episode number */
          &--number {

            h2 {
              font-size: 6.25em;
              font-weight: bold;
            }

          }

          /* Section - CALENDAR - Displays nearby dates in a calendar format */
          &--calendar {

          }

          /* Section - BUTTONS - Displays call-to-action buttons and interactions */
          &--buttons {

          }

        }

    }

  }
}

/*
  Calendar
  
  Displays the date date of the current episode as well
  the two dates flanking it. This gives the user visual
  information regarding the date of the show.
*/

.calendar {

  &__section {}

}