@layer sections {
      #switch {
        position: relative;
        height: 260vh;
      }

      #switch .sw-stage {
        position: sticky;
        top: 0;
        height: 100svh;
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: clamp(36px, 7vh, 72px);
        padding: 64px var(--space-1) clamp(64px, 13vh, 130px) 0;
      }

      #switch .sw-body {
        position: relative;
        display: grid;
        grid-template-columns: var(--space-3) minmax(0, 1fr);
      }

      #switch .sw-rule {
        top: -24px;
        bottom: -24px;
      }

      #switch .sw-old {
        padding: 0 var(--space-4) 0 var(--space-2);
        text-align: right;
        display: grid;
        gap: 10px;
        align-content: start;
      }

      #switch .sw-old .m-text-3 {
        color: var(--color-4);
      }

      #switch .sw-tiles {
        display: flex;
        gap: 10px;
        padding-left: var(--space-4);
      }

      #switch .sw-tile {
        position: relative;
        width: clamp(170px, 17vw, 270px);
        aspect-ratio: 1;
        display: flex;
        flex-direction: column;
        gap: 8px;
        padding: 16px;
        transition: background-color 0.35s, color 0.35s;
      }

      #switch .sw-ring {
        width: 40px;
        height: 40px;
        margin-bottom: auto;
        transform: rotate(-90deg);
      }

      #switch .sw-ring circle {
        fill: none;
        stroke-width: 2.5;
      }

      #switch .sw-ring__track {
        stroke: var(--color-5);
      }

      #switch .sw-ring__arc {
        stroke: var(--color-6);
        stroke-dasharray: 1;
        stroke-dashoffset: 0;
      }

      #switch .sw-text {
        opacity: 1;
      }

      @media (max-width: 900px) {
        #switch .sw-body {
          grid-template-columns: 1fr;
          gap: 22px;
        }

        #switch .sw-rule {
          display: none;
        }

        #switch .sw-old {
          text-align: left;
          padding: 0 0 0 var(--space-1);
        }

        #switch .sw-tiles {
          flex-direction: column;
          padding-left: var(--space-1);
          gap: 8px;
        }

        #switch .sw-tile {
          width: auto;
          aspect-ratio: auto;
          display: grid;
          grid-template-columns: 40px minmax(0, 1fr);
          column-gap: 14px;
          row-gap: 2px;
          padding: 12px 14px;
        }

        #switch .sw-ring {
          grid-row: 1 / 3;
          margin: 0;
        }

        #switch .sw-text {
          font-size: 14px;
          line-height: 1.35;
        }
      }
    }
