.ctariffs {
    padding-top: clamp(80px, 10vw, 116px);
    margin-top: calc(-1 * clamp(56px, 10vw, 73px));
    position: relative;
    margin-bottom: var(--section-margin);
    overflow-x: clip;
}

.ctariffs:before {
  content: url('../../../../assets/img/grid.svg');
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  pointer-events: none;
}

.ctariffs__wrapper {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.ctariffs__top {
    display: flex;
    width: fit-content;
    margin: 0 auto 12px;
}

.ctariffs__title {
    text-align: center;
    margin-bottom: 24px;
}

.ctariffs__snippet {
    text-align: center;
    margin-bottom: 24px;
}

.ctariffs--yearly .ctariff__monthly {
    display: none;
}

.ctariffs--yearly .ctariff__yearly {
    display: block;
}

@media (width < 1080px) {
    .ctariffs__wrapper {
        max-width: 640px;
        margin: 0 auto;
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (width < 768px) {
    .ctariffs:after {
        background-position: top left;
        background-size: contain;
    }

    .ctariffs__title {
        margin-bottom: 24px;
    }
}

@media (width < 640px){
  .ctariffs:before {
    content: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDc2IiBoZWlnaHQ9Ijc2NCIgdmlld0JveD0iMCAwIDEwNzYgNzY0IiBmaWxsPSJub25lIj4KPGcgb3BhY2l0eT0iMC4xMiI+CjxwYXRoIGQ9Ik0xNzAuNDE1IDM0NC4xMDdIOTMxLjQ1NSIgc3Ryb2tlPSIjMjIyNDI5IiBzdHJva2Utd2lkdGg9IjAuNzI4MjY4Ii8+CjxwYXRoIGQ9Ik04NS45MzU1IDU3Ny4xNTNIMTAxNS45MyIgc3Ryb2tlPSIjMjIyNDI5IiBzdHJva2Utd2lkdGg9IjAuNzI4MjY4Ii8+CjxwYXRoIGQ9Ik04NS45MzU1IDUzMC41NDVIMTAxNS45MyIgc3Ryb2tlPSIjMjIyNDI5IiBzdHJva2Utd2lkdGg9IjAuNzI4MjY4Ii8+CjxwYXRoIGQ9Ik04NS45MzU1IDc2My41OUgxMDE1LjkzIiBzdHJva2U9IiMyMjI0MjkiIHN0cm9rZS13aWR0aD0iMC43MjgyNjgiLz4KPHBhdGggZD0iTTE3MC40MTUgMjk3LjQ5OEg5MzEuNDU1IiBzdHJva2U9IiMyMjI0MjkiIHN0cm9rZS13aWR0aD0iMC43MjgyNjgiLz4KPHBhdGggZD0iTTE3MC40MTUgNDgzLjkzNUw5MzEuNDU1IDQ4My45MzYiIHN0cm9rZT0iIzIyMjQyOSIgc3Ryb2tlLXdpZHRoPSIwLjcyODI2OCIvPgo8cGF0aCBkPSJNODUuOTM1NSA3MTYuOThIMTAxNS45MyIgc3Ryb2tlPSIjMjIyNDI5IiBzdHJva2Utd2lkdGg9IjAuNzI4MjY4Ii8+CjxwYXRoIGQ9Ik04NS45MzU1IDI1MC44ODlIMTAxNS45MyIgc3Ryb2tlPSIjMjIyNDI5IiBzdHJva2Utd2lkdGg9IjAuNzI4MjY4Ii8+CjxwYXRoIGQ9Ik0xNzAuNDE1IDQzNy4zMjZIOTMxLjQ1NSIgc3Ryb2tlPSIjMjIyNDI5IiBzdHJva2Utd2lkdGg9IjAuNzI4MjY4Ii8+CjxwYXRoIGQ9Ik04NS45MzU1IDY3MC4zNzJIMTAxNS45MyIgc3Ryb2tlPSIjMjIyNDI5IiBzdHJva2Utd2lkdGg9IjAuNzI4MjY4Ii8+CjxwYXRoIGQ9Ik0xNzAuNDE1IDM5MC43MTdIOTMxLjQ1NSIgc3Ryb2tlPSIjMjIyNDI5IiBzdHJva2Utd2lkdGg9IjAuNzI4MjY4Ii8+CjxwYXRoIGQ9Ik04NS45MzU1IDYyMy43NjNIMTAxNS45MyIgc3Ryb2tlPSIjMjIyNDI5IiBzdHJva2Utd2lkdGg9IjAuNzI4MjY4Ii8+CjxwYXRoIGQ9Ik0yNi45NDYzIDE4MC45NzRMMTA3NS42NSAxODAuOTc1IiBzdHJva2U9IiMyMjI0MjkiIHN0cm9rZS13aWR0aD0iMC43MjgyNjgiLz4KPHBhdGggZD0iTTI2Ljk0NjMgNTguNjI1OUgxMDc1LjY1IiBzdHJva2U9IiMyMjI0MjkiIHN0cm9rZS13aWR0aD0iMC43MjgyNjgiLz4KPHBhdGggZD0iTTI2Ljk0NjMgMC4zNjQxMzZMMTA3NS42NSAwLjM2NDIyOCIgc3Ryb2tlPSIjMjIyNDI5IiBzdHJva2Utd2lkdGg9IjAuNzI4MjY4Ii8+CjxwYXRoIGQ9Ik04Ni4yOTk5IDczNi4yNzlMODYuMyA1OC4yNjEyIiBzdHJva2U9IiMyMjI0MjkiIHN0cm9rZS13aWR0aD0iMC43MjgyNjgiLz4KPHBhdGggZD0iTTMzOS43MzcgNTc3LjUxN1YzOTAuMzUyIiBzdHJva2U9IiMyMjI0MjkiIHN0cm9rZS13aWR0aD0iMC43MjgyNjgiLz4KPHBhdGggZD0iTTI1NS4yNTggNjcwLjczNlYyOTguNTkxIiBzdHJva2U9IiMyMjI0MjkiIHN0cm9rZS13aWR0aD0iMC43MjgyNjgiLz4KPHBhdGggZD0iTTE3MC43NzggNzM2LjI3OUwxNzAuNzc4IDE4MC42MSIgc3Ryb2tlPSIjMjIyNDI5IiBzdHJva2Utd2lkdGg9IjAuNzI4MjY4Ii8+CjxtYXNrIGlkPSJtYXNrMF81XzMiIHN0eWxlPSJtYXNrLXR5cGU6bHVtaW5hbmNlIiBtYXNrVW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4PSIwIiB5PSIyNTAiIHdpZHRoPSI4NyIgaGVpZ2h0PSIyODEiPgo8cGF0aCBkPSJNMCAyNTAuNTI1SDg2LjY2MzlWNTMwLjkwOEgwVjI1MC41MjVaIiBmaWxsPSJ3aGl0ZSIvPgo8L21hc2s+CjxnIG1hc2s9InVybCgjbWFzazBfNV8zKSI+CjxwYXRoIGQ9Ik0tNDMuOTUzIDQ1MS44OTlMOTguNDA4NiAzODUuNTE1IiBzdHJva2U9IiMyMjI0MjkiIHN0cm9rZS13aWR0aD0iMC43MjgyNjgiLz4KPHBhdGggZD0iTS00My45NTMgMzY3LjY0M0w5OC40MDg2IDMwMS4yNTkiIHN0cm9rZT0iIzIyMjQyOSIgc3Ryb2tlLXdpZHRoPSIwLjcyODI2OCIvPgo8cGF0aCBkPSJNLTQzLjk1MyA1MzYuMTU3TDk4LjQwODYgNDY5Ljc3MyIgc3Ryb2tlPSIjMjIyNDI5IiBzdHJva2Utd2lkdGg9IjAuNzI4MjY4Ii8+CjxwYXRoIGQ9Ik0tNDMuOTUzIDQ2My45MzZMOTguNDA4NiAzOTcuNTUyIiBzdHJva2U9IiMyMjI0MjkiIHN0cm9rZS13aWR0aD0iMC43MjgyNjgiLz4KPHBhdGggZD0iTS00My45NTMgMzc5LjY4TDk4LjQwODYgMzEzLjI5NSIgc3Ryb2tlPSIjMjIyNDI5IiBzdHJva2Utd2lkdGg9IjAuNzI4MjY4Ii8+CjxwYXRoIGQ9Ik0tNDMuOTUzIDU0OC4xOTJMOTguNDA4NiA0ODEuODA4IiBzdHJva2U9IiMyMjI0MjkiIHN0cm9rZS13aWR0aD0iMC43MjgyNjgiLz4KPHBhdGggZD0iTS00My45NTMgMzA3LjQ2TDk4LjQwODYgMjQxLjA3NiIgc3Ryb2tlPSIjMjIyNDI5IiBzdHJva2Utd2lkdGg9IjAuNzI4MjY4Ii8+CjxwYXRoIGQ9Ik0tNDMuOTUzIDQ3NS45NzRMOTguNDA4NiA0MDkuNTkiIHN0cm9rZT0iIzIyMjQyOSIgc3Ryb2tlLXdpZHRoPSIwLjcyODI2OCIvPgo8cGF0aCBkPSJNLTQzLjk1MyAzOTEuNzE2TDk4LjQwODYgMzI1LjMzMiIgc3Ryb2tlPSIjMjIyNDI5IiBzdHJva2Utd2lkdGg9IjAuNzI4MjY4Ii8+CjxwYXRoIGQ9Ik0tNDMuOTUzIDU2MC4yM0w5OC40MDg2IDQ5My44NDYiIHN0cm9rZT0iIzIyMjQyOSIgc3Ryb2tlLXdpZHRoPSIwLjcyODI2OCIvPgo8cGF0aCBkPSJNLTQzLjk1MyAzMTkuNDk3TDk4LjQwODYgMjUzLjExMyIgc3Ryb2tlPSIjMjIyNDI5IiBzdHJva2Utd2lkdGg9IjAuNzI4MjY4Ii8+CjxwYXRoIGQ9Ik0tNDMuOTUzIDQ4OC4wMDlMOTguNDA4NiA0MjEuNjI1IiBzdHJva2U9IiMyMjI0MjkiIHN0cm9rZS13aWR0aD0iMC43MjgyNjgiLz4KPHBhdGggZD0iTS00My45NTMgNDAzLjc1M0w5OC40MDg2IDMzNy4zNjkiIHN0cm9rZT0iIzIyMjQyOSIgc3Ryb2tlLXdpZHRoPSIwLjcyODI2OCIvPgo8cGF0aCBkPSJNLTQzLjk1MyA1NzIuMjY1TDk4LjQwODYgNTA1Ljg4MSIgc3Ryb2tlPSIjMjIyNDI5IiBzdHJva2Utd2lkdGg9IjAuNzI4MjY4Ii8+CjxwYXRoIGQ9Ik0tNDMuOTUzIDMzMS41MzNMOTguNDA4NiAyNjUuMTQ5IiBzdHJva2U9IiMyMjI0MjkiIHN0cm9rZS13aWR0aD0iMC43MjgyNjgiLz4KPHBhdGggZD0iTS00My45NTMgNTAwLjA0OEw5OC40MDg2IDQzMy42NjMiIHN0cm9rZT0iIzIyMjQyOSIgc3Ryb2tlLXdpZHRoPSIwLjcyODI2OCIvPgo8cGF0aCBkPSJNLTQzLjk1MyA0MTUuNzlMOTguNDA4NiAzNDkuNDA2IiBzdHJva2U9IiMyMjI0MjkiIHN0cm9rZS13aWR0aD0iMC43MjgyNjgiLz4KPHBhdGggZD0iTS00My45NTMgNTg0LjMwNEw5OC40MDg2IDUxNy45MTkiIHN0cm9rZT0iIzIyMjQyOSIgc3Ryb2tlLXdpZHRoPSIwLjcyODI2OCIvPgo8cGF0aCBkPSJNLTQzLjk1MyAzNDMuNTdMOTguNDA4NiAyNzcuMTg2IiBzdHJva2U9IiMyMjI0MjkiIHN0cm9rZS13aWR0aD0iMC43MjgyNjgiLz4KPHBhdGggZD0iTS00My45NTMgNTEyLjA4M0w5OC40MDg2IDQ0NS42OTkiIHN0cm9rZT0iIzIyMjQyOSIgc3Ryb2tlLXdpZHRoPSIwLjcyODI2OCIvPgo8cGF0aCBkPSJNLTQzLjk1MyA0MjcuODI2TDk4LjQwODYgMzYxLjQ0MiIgc3Ryb2tlPSIjMjIyNDI5IiBzdHJva2Utd2lkdGg9IjAuNzI4MjY4Ii8+CjxwYXRoIGQ9Ik0tNDMuOTUzIDM1NS42MDZMOTguNDA4NiAyODkuMjIyIiBzdHJva2U9IiMyMjI0MjkiIHN0cm9rZS13aWR0aD0iMC43MjgyNjgiLz4KPHBhdGggZD0iTS00My45NTMgNTI0LjExOUw5OC40MDg2IDQ1Ny43MzUiIHN0cm9rZT0iIzIyMjQyOSIgc3Ryb2tlLXdpZHRoPSIwLjcyODI2OCIvPgo8cGF0aCBkPSJNLTQzLjk1MyA0MzkuODYzTDk4LjQwODYgMzczLjQ3OSIgc3Ryb2tlPSIjMjIyNDI5IiBzdHJva2Utd2lkdGg9IjAuNzI4MjY4Ii8+CjwvZz4KPG1hc2sgaWQ9Im1hc2sxXzVfMyIgc3R5bGU9Im1hc2stdHlwZTpsdW1pbmFuY2UiIG1hc2tVbml0cz0idXNlclNwYWNlT25Vc2UiIHg9IjAiIHk9IjI1MCIgd2lkdGg9Ijg3IiBoZWlnaHQ9IjI4MSI+CjxnIG9wYWNpdHk9IjAuMTIiPgo8cGF0aCBkPSJNMCAyNTAuNTI1SDg2LjY2MzlWNTMwLjkwOEgwVjI1MC41MjVaIiBmaWxsPSJ3aGl0ZSIvPgo8L2c+CjwvbWFzaz4KPGcgbWFzaz0idXJsKCNtYXNrMV81XzMpIj4KPHBhdGggZD0iTTAgMjUwLjUyNVYyNTEuMjUzSDg2LjY2MzlWMjUwLjUyNVYyNDkuNzk3SDBWMjUwLjUyNVpNODYuNjYzOSA1MzAuOTA4VjUzMC4xOEgwVjUzMC45MDhWNTMxLjYzN0g4Ni42NjM5VjUzMC45MDhaIiBmaWxsPSIjMjIyNDI5Ii8+CjwvZz4KPC9nPgo8L3N2Zz4=');
    left: -76px;
    transform: unset;
  }
}

.pswitch {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-bottom: 40px;
    position: relative;
    z-index: 10;
}

.pswitch__label {
    transition: 0.3s;
}

.ctariff {
    padding: 24px;
    border-radius: 24px;
    background: #fff;
    display: flex;
    flex-direction: column;
    position: relative;
    z-index: 2;
    border: 1px solid var(--Gray-Line, #E5E5E5);
}

.ctariff .cbadge {
    position: absolute;
    top: 24px;
    right: 24px;
}

.ctariff--1 {
    border: 2px solid var(--color-dark-100);
}

.ctariff__title {
    margin-bottom: 12px;
}

.ctariff__subtitle {
    margin: 24px 0;
    min-height: 104px;
}

.ctariff__monthly {
    display: block;
    font-weight: 500;
    margin-bottom: 24px;
}

.ctariff__yearly {
    display: none;
    font-weight: 500;
    margin-bottom: 24px;
}

.ctariff__old-price {
    font-size: 32px;
    color: var(--color-dark-80);
    text-decoration: line-through;
    margin-left: 8px;
}

.ctariff__trial {
    margin: 12px auto 0;
    text-align: center;
    font-family: Space Grotesk;
    font-weight: 500;
    font-size: 16px;
    border-bottom: 2px solid var(--color-accent);
    width: fit-content;
}

.ctariff__features {
    margin-top: 24px;
}

.ctariff__feature {
    display: flex;
    gap: 12px;
}

.ctariff__feature svg {
    flex-shrink: 0;
}

.ctariff__feature + .ctariff__feature {
    margin-top: 16px;
}

.ctariff__description {
    color: var(--color-dark-80);
    margin-top: 24px;
}

.ctariff__action .btn {
    width: 100%;
}

@media (width < 1080px) {
    .ctariff__subtitle {
        min-height: auto;
    }
}

@media (width < 992px) {
    .ctariff__monthly, .ctariff__yearly {
        font-size: 48px;
    }
}