section.blog
    @include spaceSection
section.blog .container
  align-items: flex-start
  h1
    margin-bottom: .5rem
    //text-transform: uppercase
    @media (min-width: 1024px)
      font-size: 26px
    @media (min-width: 1440px)
      font-size: 28px
    @media (min-width: 1600px)
      font-size: 30px
  &>p
    @media (min-width: 768px)
      width: 55%
    @media (min-width: 1024px)
      width: 35%
    // @media (min-width: 1280px)
    //   width: 35%
    // @media (min-width: 1366px)
    //   width: 40%
    @media (min-width: 1600px)
      width: 30%
section.blog .paginator
  width: 100%
  align-items: center
  justify-content: center
  gap: 0 2rem
  margin-top: 2rem
  @media (min-width: 768px)
    gap: 0 4rem
  &>img
    width: 30px
    @media (min-width: 1280px)
      cursor: pointer
  .numbers
    align-items: center
    gap: 0 2rem
    @media (min-width: 768px)
      gap: 0 3rem
    @media (min-width: 1280px)
      gap: 0 4rem
    span
      @media (min-width: 768px)
        font-size: 16px
      @media (min-width: 1440px)
        font-size: 20px
    span:not(.selected)
      color: $black
      &:hover
        text-decoration: underline
      @media (min-width: 1280px)
        cursor: pointer
    span.selected
      position: relative
      color: #18191A
      &::before
        content: ''
        position: absolute
        z-index: -1
        top: 50%
        left: 50%
        transform: translate(-50%, -50%)
        width: 30px
        height: 30px
        border-radius: 50%
        background: $yellow
.postList
  width: 100%
  gap: 2rem 0
  place-items: center
  grid-template-columns: 1fr
  margin: 2rem 0
  @media (min-width: 768px)
    grid-template-columns: repeat(2, 1fr)
    gap: 3rem
  @media (min-width: 1024px)
    grid-template-columns: repeat(3, 1fr)
  @media (min-width: 1366px)
    grid-template-columns: repeat(4, 1fr)
  @media (min-width: 1900px)
    grid-template-columns: repeat(5, 1fr)
    gap: 3rem
  .item
    width: 90%
    display: flex
    flex-direction: column
    background-color: #F9FAFC
    box-shadow: 0px 4px 6px 0px rgba(50,50,93,0.11) , 0px 1px 3px 0px rgba(0,0,0,0.08) 
    border-radius: 10px
    overflow: hidden
    .thumb, .text
      width: 100%
    .thumb img  
      width: 100%
      object-fit: cover
      height: 250px
    .text
      gap: 10px 0
      padding: 2rem
      a
        color: $black
        font-weight: 700
        height: 4rem
        overflow-y: hidden
        overflow-x: visible
        margin-bottom: 1rem
        @media (min-width: 1280px)
          &:hover
            text-decoration: underline
      span
        font-size: 13px
    @media (min-width: 768px)
      width: 100%
  .paginator
    width: 100%
    align-items: center
    justify-content: center
    gap: 0 2rem
    margin-top: 2rem
    @media (min-width: 768px)
      gap: 0 4rem
    &>img
      width: 30px
      @media (min-width: 1280px)
        cursor: pointer
    .numbers
      align-items: center
      gap: 0 2rem
      @media (min-width: 768px)
        gap: 0 3rem
      @media (min-width: 1280px)
        gap: 0 4rem
      span
        @media (min-width: 768px)
          font-size: 16px
        @media (min-width: 1440px)
          font-size: 20px
      span:not(.selected)
        color: $black
        &:hover
          text-decoration: underline
        @media (min-width: 1280px)
          cursor: pointer
      span.selected
        position: relative
        color: #18191A
        &::before
          content: ''
          position: absolute
          z-index: -1
          top: 50%
          left: 50%
          transform: translate(-50%, -50%)
          width: 30px
          height: 30px
          border-radius: 50%
          background: $yellow