.container-list {
  max-width: 800px;
  margin: 0 auto;

  border-bottom: 1px dashed var(--color-primary);
}

.post {
  padding: 35px 25px;
  border-radius: 0px;
  transition: background-color 0.25s ease, border-radius 0.25s ease, transform 0.25s ease;

  &:hover {
    background-color: rgba(59, 78, 61, 0.08);
    border-radius: 20px;
    transform: scale(1.02);
  }

  .title-container {
    .title {
      font-size: 20px;
      font-weight: bold;
      line-height: 1.4;
      margin-bottom: 15px;
      color: var(--color-primary);
    }

    .created-date {
      font-size: 13px;
      font-weight: lighter;
      color: var(--color-primary);
    }
  }


  .summary {
    font-size: 15px;
    line-height: 1.7;

    a {
      color: var(--color-secondary);
    }

    .markdown-body {
      margin-top: 0;
      margin-bottom: 0;
    }
  }
}


// responsive layout
// just means nothing but half screen width of my Dell D2718 4K monitor,
// so it switches layout on half screen for me to compare which one I like more
smaller-device-size = (1024 + 1)px
@media (max-width: smaller-device-size) {
  .post {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;

    .title-container {
      .created-date {
        display: none;
      }
    }
  }
}

@media (min-width: smaller-device-size) {
  .post {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-start;

    .title-container {
      width: 40%;
      margin-right: 40px;
    }

    .summary {
      width: 60%;
    }
  }
}