.tariffs {
    max-width: 1520px;
    width: 100%;
    
    margin-inline: auto;
    padding-block: 5rem;
}

.tariffs__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    
    margin-bottom: 1.75rem;
}

.tariffs__period {
    background-color: var(--blue-light);
    border: 1px solid var(--blue-light);
    border-radius: 60px;
    
    padding: .75rem 1.75rem;
}

.tariffs__period-badge {
    color: var(--white);
}

.tariffs__body {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.3125rem;
}

.tariffs__card {
    box-shadow: 0px 3.75px 22.5px 0px rgba(0, 0, 0, 0.16);
    border-radius: 9px;
    
    padding: 2.5rem;
}

.tariffs__card-title {
    color: var(--blue);
    font-size: var(--text1-size);
    font-weight: 600;
    
    margin-top: 0;
    margin-bottom: .75rem;
}

.tariffs__card-note {
    color: var(--black);
    font-size: var(--text2-size);
    font-weight: 500;
    
    margin-bottom: 1.25rem;
}

.tariffs__price {
    color: var(--blue);
    font-size: var(--h1-size);
    font-weight: 600;
    
    margin-bottom: 1.75rem;
}

.tariffs__price-term {
    color: var(--gray);
    font-size: var(--text5-size);
    font-weight: 500;
}

.tariffs__button {
    width: 100%;
    
    margin-bottom: 1.75rem;
}


.tariffs__card--addon {
    display: grid;
    grid-template-rows: .1fr 1fr 1fr .5fr;
}

.tariffs__card-name {
    color: var(--blue);
    font-size: var(--text2-size);
    font-weight: 600;
    
    margin-bottom: .75rem;
}

.tariffs__card-text {
    color: var(--black);
    font-size: var(--font5-size);
    font-weight: 500;
    
    margin-bottom: 3.125rem;
}

.tariffs__price--small {
    font-size: var(--text1-size);
}

.tariffs__price-label {
    color: var(--gray);
}

.tariffs__card--addon > .tariffs__button {
    margin-bottom: 0;
}



@media(max-width: 1536px) {
    .tariffs {
        width: auto;
        
        padding-left: 1.25rem;
        padding-right: 1.25rem;
    }
}

@media(max-width: 1024px) {
    .tariffs__card {
        width: fit-content;
        
        padding-inline: 1.5rem;
    }
}

@media(max-width: 767px) {
    
    .tariffs__body {
        grid-template-columns: 1fr;
    }
    
    .tariffs__card {
        width: 100%;
    }
}