.pricing {
  * {
    transition: all 0.1s ease-in-out;
  }

  .container {
    h1 {
      margin-bottom: 70px;
      line-height: 80%;
      letter-spacing: -5.4px;

      @media (max-width: 1024px) {
        width: fit-content;
        margin: 20px auto 40px auto;
        font-size: 40px;
        font-style: normal;
        font-weight: 700;
        line-height: 100%;
        letter-spacing: -1.2px;
      }
    }

    h2 {
      margin: 0 0 0.6em;
      font-size: var(--fs-3xl);
      text-align: center;

      @media (max-width: 1440px) {
        font-size: var(--fs-2xl);
      }

      @media (max-width: 1280px) {
        line-height: 100%;
        font-size: var(--fs-2xl);
      }

      @media (max-width: 1024px) {
        margin-left: 24px;
        margin-top: 70px;
        text-align: left;
      }
    }

    .pricing_items {
      display: grid;
      grid-gap: 40px;
      grid-template-columns: repeat(4, 1fr);
      align-items: start;
      margin-bottom: 70px;

      @media (max-width: 1440px) {
        margin-bottom: 40px;
      }

      @media (max-width: 1280px) {
        grid-gap: 40px;
      }

      @media (max-width: 1024px) {
        grid-template-columns: 1fr;
        grid-gap: 60px;
      }

      .pricing_item {
        position: relative;
        padding: 10px 0;
        border: 1px solid var(--c-gray-900);
        border-radius: var(--br-xl);

        .pricing_group {
          position: relative;
          padding: 14px 24px;
          border-top: 1px solid var(--c-gray-900);

          &:first-child {
            border-top: none;
          }

          h4 {
            margin: 0;

            @media (max-width: 1024px) {
              font-size: 28px;
              font-style: normal;
              font-weight: 700;
              line-height: 110%;
            }
          }

          em {
            font-size: 14px;

            strong,
            span {
              font-size: var(--fs-xl);
              font-weight: 700;
              font-style: normal;
            }

            span {
              color: #7c7064;
            }
          }

          .popular {
            position: absolute;
            width: 100%;
            left: 0;
            top: 0;
            transform: translateY(-150%);
            text-align: center;
          }

          .pricing_heading {
            display: flex;
            flex-direction: column;
            gap: 10px;

            em {
              display: block;
              width: 100%;
              color: #7c7064;
              font-size: 12px;

              @media (max-width: 1024px) {
                font-size: 12px;
                font-style: italic;
                font-weight: 400;
                line-height: 150%;
                letter-spacing: -0.13px;
              }

              &:last-of-type {
                @media (max-width: 1024px) {
                  font-size: 12px;
                  font-style: italic;
                  font-weight: 400;
                  line-height: 150%;
                  letter-spacing: -0.13px;
                }
              }

              strong {
                color: var(--c-gray-900);

                @media (max-width: 1024px) {
                  margin-left: 10px;
                  font-size: 48px;
                  font-style: normal;
                  font-weight: 700;
                  line-height: 110%;
                }
              }

              span {
                font-style: italic;

                @media (max-width: 1024px) {
                  margin-left: 10px;
                }
              }
            }
          }

          .pricing_list {
            .pricing_subtitle {
              margin-left: 6px;
              margin-bottom: 4px;
              color: #c1b4a3;
              font-size: 12px;
              font-weight: 700;

              @media (max-width: 1024px) {
                margin-left: 16px;
              }
              &.highlighted {
                color: var(--c-primary-200);
              }
            }

            ul {
              margin: 0 0 14px 6px;
              padding: 0;
              list-style: none;

              @media (max-width: 1024px) {
                margin: 0 0 14px 16px;
              }

              &:last-child {
                margin-bottom: 0;
              }

              li {
                position: relative;
                font-size: 14px;
                line-height: 1.6;

                &:before {
                  content: '';
                  position: absolute;
                  top: 7px;
                  left: -15px;
                  width: 11px;
                  height: 8px;
                  background-image: url('../../img/icon-check.svg');
                  background-repeat: no-repeat;
                  background-size: contain;
                }

                &.light {
                  color: #c1b4a3;
                }

                &.uncheck {
                  &:before {
                    content: none;
                  }
                }
              }
            }
          }
        }

        .pricing_footer {
          position: absolute;
          left: 0;
          bottom: 0;
          display: flex;
          flex-direction: column;
          gap: 10px;
          transform: translateY(90%);
          padding: 24px;
          font-size: 12px;

          em {
            display: block;
            width: 100%;
            color: #7c7064;
          }
        }

        &.dark {
          background-color: var(--c-gray-900);

          .pricing_group {
            border-color: #fffaee;

            h4 {
              color: #fffaee;
            }

            em {
              color: #fffaee;
              &.dark {
                color: #7d786d;
              }

              strong,
              span {
                color: #fffaee;
              }
            }

            .pricing_list {
              .pricing_subtitle {
                color: #7d786d;
                &.highlighted {
                  color: var(--c-primary-200);
                }
              }
              ul {
                li {
                  color: #fffaee;

                  &:before {
                    background-image: url('../../img/icon-check-white.svg');
                  }
                  &.light {
                    color: #44413a;
                  }
                }
              }
            }
          }
        }

        &:not(.dark):hover {
          border-color: transparent;
          box-shadow: 3.41px 3.9px 11.7px 0px #0000000d, 13.16px 16.09px 20.96px 0px #0000000a, 29.73px 36.56px 28.27px 0px #00000008, 52.64px 64.83px 33.15px 0px #00000003, 81.89px 101.39px 36.56px 0px #00000000;
        }
      }
    }
  }
}