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

.index {
  .notified {
    padding: 7rem 0 4rem 0;

    .msg {
      position: relative;
      max-width: 52rem;
      height: 11rem;
      padding: 0 1rem;
      margin: 0 auto;

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

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

    .cards-container {
      position: relative;
      overflow: hidden;
      --note: 24.5rem;
      --card: 22.5rem;
      --ease: 0.3s cubic-bezier(0.3, -0.1, 0.1, 1.1);

      input {
        position: fixed;
        top: -999vw;
        left: -999vw;
        opacity: 0.01;
      }

      .scroll-nav {
        display: flex;
        justify-content: space-around;
        align-items: center;
        width: 3.75rem;
        margin: 0 0 0 calc((100% + 32rem) / 2);

        label {
          width: .85rem;
          height: .9rem;
          background: var(--ft-color);
          margin: 0 .2rem;
          border-radius: 99rem;
          transition: var(--ease);
          cursor: pointer;
        }
      }
      
      .cards {
        box-sizing: content-box;
        display: flex;
        justify-content: space-between;
        width: 100%;
        max-width: 94rem;
        padding: 2.5rem 0 2rem calc((100% - 49.75rem)/2);
        transition: var(--ease);
  
        .card {
          position: relative;
          margin: 0 2rem 2rem 0;
          transition: var(--ease);
          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;
              }
            }
          }
        }

        .card-min {
          min-width: var(--card);
        }

        .card-last {
          min-width: 20.5rem;
          height: 15.05rem;
          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);
            }
          }
        }
      }

      [id="0"]:checked {
        & ~ .cards { transform: translateX(calc(var(--note) * 0)) }
        & ~ .scroll-nav [for="0"] { background: var(--s-color) }
      }

      [id="1"]:checked {
        & ~ .cards { transform: translateX(calc(var(--note) * -1)) }
        & ~ .scroll-nav [for="1"] { background: var(--s-color) }
      }

      [id="2"]:checked {
        & ~ .cards { transform: translateX(calc(var(--note) * -2)) }
        & ~ .scroll-nav [for="2"] { background: var(--s-color)}
      }
    }
  }
}

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

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

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

    .msg {
      height: unset;
      padding: 0;
      margin: 0;

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

      p {
        position: unset;
        margin: 0;
      }
    }

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

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

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

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