inspin.io/assets/style/pages/index/notified.css

.index {
  .notified {
    /* background-image: linear-gradient(0deg, transparent 24%, rgba(0, 0, 0, .03) 25%, rgba(0, 0, 0, .03) 26%, transparent 27%, transparent 74%, rgba(0, 0, 0, .03) 75%, rgba(0, 0, 0, .03) 76%, transparent 77%, transparent), linear-gradient(90deg, transparent 24%, rgba(0, 0, 0, .03) 25%, rgba(0, 0, 0, .03) 26%, transparent 27%, transparent 74%, rgba(0, 0, 0, .03) 75%, rgba(0, 0, 0, .03) 76%, transparent 77%, transparent); */
    /* background-size: 3.35rem 3.35rem; */
    padding: 7rem 0 4rem 0;

    .msg {
      max-width: 52rem;
      padding: 0 1rem;
      margin: 0 auto;

      h2 {
        font-size: 3rem;
        font-weight: 700;
        line-height: 3.25rem;
        letter-spacing: -.05rem;
        margin: 0 0 2rem 0;

        span {
          color: var(--s-color);
          font-weight: 700;
        }
      }
  
      p {
        font-size: 1.25rem;
        line-height: 1.85rem;
        margin: 0 0 0 .2rem;
      }
    }

    .cards-container {
      position: relative;
      width: 100%;

      .scroll {
        display: none;
        position: absolute;
        right: calc((100% - 48rem) / 2);
        top: -1.5rem;

        a {
          color: var(--fs-color);
          font-size: 1.25rem;
          margin: 0 .5rem;
  
          &:hover span {
            color: var(--w-color);
            cursor: pointer;
          }
        }

      }

      #first,
      #last {
        scroll-margin-top: 20rem;
        scroll-margin-left: 56vw;
        scroll-margin-right: 50vw;
      }

      .cards {
        width: 100%;
        height: 27.25rem;
        overflow-x: scroll;
        overflow-y: hidden;
        scroll-behavior: smooth; 
        padding: 0 0 2rem calc((100% - 49.5rem)/2);
        margin: 0 auto;
        white-space: nowrap;
  
        .card {
          display: inline-block;
          width: 22.5rem;
          margin: 2rem 2rem 2rem 0;
          text-align: left;
    
          a {
            display: block;
    
            img {
              max-width: 100%;
              border: .15rem solid var(--w-color);
              border-radius: .25rem;
            }
    
            h3 {
              font-size: 2rem;
              font-weight: 600;
              line-height: 2rem;
              padding: .75rem 0 .75rem .25rem;
              margin: 0;
            }
    
            p {
              display: inline-block;
              color: var(--fs-color);
              font-size: .9rem;
              font-weight: 300;
              padding: 0 1.5rem 0 .35rem;
              margin: 0;
            }
  
            .tags {
              padding: 0;
  
              &:not(:last-child):after {
                position: relative;
                content: '•';
                font-size: .7rem;
                padding: 0 .35rem;
                top: -.05rem;
              }
            }
          }

          &:last-of-type {
            margin: 2rem 30vw 2rem 0;
          }
        }

        .card-last {
          width: 20rem;
          height: 15rem;
          vertical-align: top;
          background: var(--bs-color);
          text-align: center;
          padding: 2rem;
          border: .15rem solid var(--w-color);
          border-radius: .25rem;

          h4 {
            font-size: 1.5rem;
            font-weight: 600;
            line-height: 1.5rem;
            padding: .5rem 0;
            margin: 0;
          }
  
          p {
            color: var(--f-color);
            font-size: 1rem;
            padding: 0;
            margin: .5rem 0;
          }

          a {
            display: inline-block;
            font-weight: 600;
            color: var(--s-color);
            border: .15rem solid var(--s-color);
            border-radius: .25rem;
            padding: .4rem 1rem .5rem 1rem;
            margin: 1.25rem 0;

            span {
              position: relative;
              top: .1rem;
              color: var(--s-color);
              font-size: 1rem;
              margin: 0 0 0 .25rem;
            }

            &:hover {
              background: var(--btn-hover);
            }
          }
        }
      }

      .cards {
        -ms-overflow-style: none;  /* Internet Explorer 10+ */
        scrollbar-width: none;  /* Firefox */
      }
      
      .cards::-webkit-scrollbar { 
        display: none;  /* Safari and Chrome */
      }
    }
  }
}

@media only screen and (--viewport-13) {
  .index .notified .cards-container .cards .card:last-of-type {
    margin: 2rem 20vw 2rem 0;
  }
}

@media only screen and (--viewport-10) {
  .index .notified .cards-container .cards .card:last-of-type {
    margin: 2rem 12vw 2rem 0;
  }
}

@media only screen and (--viewport-4) {
  .index .notified {
    padding: 4rem 2.25rem;

    .msg {
      padding: 0;
      margin: 0;

      h2 {
        font-size: 2.25rem;
        line-height: 2.5rem;
      }

      p {
        margin: 0;
      }
    }

    .cards-container {
      .scroll {
        display: none;
      }

      .cards {
        width: 100%;
        height: unset;
        padding: 0 0 4rem calc((100% - 49.5rem)/2);
        margin: 0 auto;
  
        .card {
          display: block;
          width: unset;
          margin: 2rem 0 4rem 0;

          &:last-of-type {
            margin: 2rem 0 0 0;
          }
        }
      }
    }
  }
}

@media only screen and (--viewport-3) {
  .index .notified {
    padding: 3rem 1.5rem;
  }
}