/*
Typography Styles
Общие стили для типографики темы Berloga
*/

/* Общие стили для заголовков h2 */

.hero__title {
    color: var(--berloga-text);
    font-family: var(--hero-h1-font-family);
    font-size: var(--hero-h1-font-size);
    line-height: var(--hero-h1-line-height);
    font-weight: var(--hero-h1-font-weight);
    margin: 0;
    padding: 0;
    /* text-transform: capitalize; */
}

.hero__title-line {
    display: block;
}

.hero__title-brand {
    color: var(--berloga-blue);
    /* text-transform: uppercase; */
}

h2 {
    font-family: var(--h2-font-family);
    font-size: var(--h2-font-size);
    line-height: var(--h2-line-height);
    font-weight: var(--h2-font-weight);
    color: var(--berloga-text);
    text-align: center;
}

/* Стили для заголовков h3 */
h3 {
    font-family: var(--h3-font-family);
    font-size: var(--h3-font-size);
    line-height: var(--h3-line-height);
    font-weight: var(--h3-font-weight);
    color: var(--berloga-text);
    
}

/* Стили для основного текста */
p {
    font-family: var(--regular-text-font-family);
    font-size: var(--regular-text-font-size);
    line-height: var(--regular-text-line-height);
    font-weight: var(--regular-text-font-weight);
    color: var(--berloga-text);
    
}

/* Акцентный текст */
.accent-text {
    font-family: var(--accent-text-font-family);
    font-size: var(--accent-text-font-size);
    line-height: var(--accent-text-line-height);
    font-weight: var(--accent-text-font-weight);
    color: var(--berloga-text);
}

/* Адаптивные стили для заголовков */
/* Desktop 1440px */
@media (max-width: 1440px) {
    .hero__title {    
        font-size: 48px;
    }
}

/* Desktop 1200px */
@media (max-width: 1200px) {
    .hero__title {    
        font-size: 40px;
    }
    
    h2 {
        font-size: 40px;
        
    }
}
/* Desktop 1024px */
@media (max-width: 1024px) {
    .hero__title {    
        font-size: 32px;
    }
}

@media (max-width: 768px) {
    h2 {
        font-size: 32px;
        
    }
    
    h3 {
        font-size: 24px;
        
    }
}

@media (max-width: 480px) {
    h2 {
        font-size: 24px;
        
    }
    
    h3 {
        font-size: 20px;
        
    }
}