@media screen and (min-width: 0px) {
  .matter {
    padding: var(--section-padding) var(--page-padding);
    position: relative;
    overflow: hidden;
  }

  .matter::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 50vw;
    z-index: -1;
    transform: rotate(45deg) translateY(-80%);
    filter: blur(60px);
    -webkit-filter: blur(60px);
    background-image: linear-gradient(270deg, #adf2bd 0, #8beff2 49.48%, #bbc7f2 100%);
    background-size: 200% 200%;
    animation: nl-glow-effect 5s linear infinite;
  }

  .matter-s1 .divimg {
    width: 260px;
    margin: 0 auto;
  }

  .matter-s1 .wrapper {
    margin-top: var(--margin-xxl);
    text-align: center;
  }

  .matter-s1 .wrapper h2 {
    margin: var(--margin-xs) 0 var(--margin-m);
  }

  .matter-s2,
  .matter-s3,
  .matter-s4 {
    margin-top: var(--section-padding);
    text-align: center;
  }

  .matter-s2 h2 {
    margin-bottom: var(--margin-m);
  }

  .matter-s2 .divimg {
    border-radius: var(--border-radius);
    overflow: hidden;
  }

  .matter-s2 .wrapper-top {
    position: relative;
  }

  .matter-s2 .wrapper-top::after {
    content: '';
    position: absolute;
    left: 30px;
    right: 30px;
    height: 150px;
    bottom: -8px;
    z-index: -1;
    filter: blur(30px);
    -webkit-filter: blur(30px);
    background-image: linear-gradient(270deg, #adf2bd 0, #8beff2 49.48%, #bbc7f2 100%);
    background-size: 200% 200%;
    animation: nl-glow-effect 5s linear infinite;
  }

  .matter-s2 .wrapper-bottom {
    margin-top: var(--margin-xl);
  }

  .matter-s2 .wrapper-bottom p:not(:last-child) {
    margin-bottom: var(--margin-s);
  }

  .matter-s2 .wrapper-bottom ul {
    text-align: left;
    display: grid;
    gap: var(--margin-xs);
    margin-top: var(--margin-m);
  }

  .matter-s2 .wrapper-bottom ul>li {
    padding: var(--margin-xm) var(--margin-xl);
    background-color: var(--color-pearl);
    border-radius: var(--border-radius);
  }

  .matter-s2 .wrapper-bottom ul li .li-left {
    font-weight: 500;
  }

  .matter-s2 .wrapper-bottom ul li .li-right ol {
    margin-left: 16px;
  }

  .matter-s2 .wrapper-bottom ul li .li-right ol li {
    list-style: decimal;
  }

  .matter-s3 .wrapper h2 {
    margin-bottom: var(--margin-xm);
  }

  .matter-s3 .wrapper h3 {
    margin: var(--margin-s) 0;
  }

  .matter-s3 .wrapper ul {
    display: grid;
    gap: var(--margin-m);
  }

  .matter-s3 .wrapper ul li {
    display: grid;
    grid-template-rows: 1fr;
    background-color: var(--color-pearl);
    border-radius: var(--border-radius);
    overflow: hidden;
  }

  .matter-s3 .wrapper ul li.two-cols {
    grid-template-rows: 260px 1fr;
  }

  .matter-s3 .wrapper ul li.two-cols .nl-video,
  .matter-s3 .wrapper ul li.two-cols .divimg {
    height: 100%
  }

  .matter-s3 .wrapper ul li.two-cols .divimg img {
    height: 100%;
    object-fit: cover
  }

  .matter-s3 .wrapper .content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 224px;
    padding: var(--margin-xl) var(--margin-xxm);
    box-sizing: border-box;
  }

  .matter-s3 .wrapper ul li:nth-child(1) .content {
    background: linear-gradient(180deg, #b980e7 0, #754aff 100%);
    color: #fff
  }

  .matter-s3 .wrapper ul li:nth-child(3) .content {
    background: linear-gradient(180deg, #ff8832 0, #ffbd5a 51.6%);
    color: #fff
  }

  .matter-s3 .wrapper ul li:nth-child(5) .content {
    background: linear-gradient(180deg, #2d5bff 0, #1eaeff 100%);
    color: #fff
  }

  .matter-s3 .wrapper .content .divicon {
    width: 32px;
    margin: 0 auto;
  }

  .matter-s3 .wrapper .content p:not(:last-child) {
    margin-bottom: var(--margin-s);
  }

  .matter-s4 .wrapper {
    max-width: 700px;
    margin: 0 auto;
  }
}

@media screen and (min-width: 768px) {
  .matter-s1 .divimg {
    width: 60vw;
    margin-left: auto;
    margin-right: calc(var(--page-padding) * -1);
  }

  .matter-s1 .wrapper {
    text-align: left;
  }

  .matter-s2 .wrapper-top {
    aspect-ratio: 9/5;
    max-width: 900px;
    margin: 0 auto;
  }

  .matter-s2 .wrapper-top .divimg {
    height: 100%;
  }

  .matter-s2 .wrapper-top .divimg img {
    height: 100%;
    object-fit: cover;
  }

  .matter-s2 .wrapper-bottom .text {
    width: 500px;
    margin-left: auto;
    margin-right: auto;
  }

  .matter-s2 .wrapper-bottom ul {
    width: 360px;
    margin-left: auto;
    margin-right: auto;
  }

  .matter-s2 .wrapper-bottom ul>li {
    padding: var(--margin-xxm) 52px;
  }

  .matter-s3 .wrapper ul {
    text-align: left;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(4, 1fr);
  }

  .matter-s3 .wrapper ul li:nth-child(1) {
    grid-column: 1/3;
    grid-row: 1/2;
    grid-template-rows: 340px;
    grid-template-columns: repeat(2, 1fr)
  }

  .matter-s3 .wrapper ul li:nth-child(2) {
    grid-column: 1/2;
    grid-row: 2/3
  }

  .matter-s3 .wrapper ul li:nth-child(3) {
    grid-column: 1/2;
    grid-row: 3/5;
    grid-template-rows: 2fr 3fr;
    grid-template-columns: 1fr
  }

  .matter-s3 .wrapper ul li:nth-child(4) {
    grid-column: 2/3;
    grid-row: 4/5
  }

  .matter-s3 .wrapper ul li:nth-child(5) {
    grid-column: 2/3;
    grid-row: 2/4;
    grid-template-rows: 348px 1fr;
    grid-template-columns: 1fr
  }

  .matter-s3 .wrapper ul li:nth-child(5) .divimg {
    order: 2
  }

  .matter-s3 .wrapper .content .divicon {
    margin: 0;
  }
}

@media screen and (min-width: 1024px) {
  .matter::before {
    transform: rotate(45deg) translateY(-100%);
  }

  .matter-s1 {
    display: grid;
    align-items: center;
    grid-template-columns: 4fr 3fr;
  }

  .matter-s1 .wrapper {
    order: 1;
  }

  .matter-s1 .wrapper .text {
    max-width: 580px;
  }

  .matter-s1 .divimg {
    width: 120%;
    order: 2;
    margin-right: calc(var(--page-padding) * -1 - 40px);
  }

  .matter-s2 .wrapper-bottom ul {
    width: 720px;
    gap: var(--margin-xm);
    grid-template-columns: repeat(2, 1fr);
  }

  .matter-s3 .wrapper .content {
    padding: 40px 52px;
  }

  .matter-s3 .wrapper ul {
    grid-template-rows: repeat(4, 340px);
  }
}


@media screen and (min-width: 1600px) {

  .matter-s3 .wrapper ul {
    gap: var(--margin-xxm);
  }

  .matter-s3 .wrapper ul li:nth-child(3),
  .matter-s3 .wrapper ul li:nth-child(5) {
    grid-template-rows: 352px 1fr;
  }

  .matter-s3 .wrapper .content .text {
    width: 90%;
  }
}

@media screen and (min-width: 1920px) {
  .matter::before {
    transform: rotate(30deg) translateY(-90%);
  }

  .matter-s1 {
    grid-template-columns: repeat(2, 1fr);
  }
  .matter-s1 .divimg {
    width: 100%;
    margin-right: 0;
  }
}