:root {
    /*Desktop*/
    
    /*General*/
    /*Typography*/
    --title-size: 38px;
    --title-weight: bold;
    
    --subtitle-size: 28px;
    
    --subtitle-content-size: 28px;
    
    --text-size: 22px;
    
    --text-content-size: 22px;
    
    /*Slick (slider)*/
    /*Typography*/
    --slick-title: 38px;
    
    --slick-subtitle: 28px;
    
    /*Mobile*/
    
    /*General*/
    /*Typhography*/
    --m-title-size: 28px;
    
    --m-subtitle-size: 22px;
    
    --m-subtitle-content-size: 20px;
    
    --m-text-size: 18px;
    
    --m-text-content-size: 15px;
    
    /*Slick (slider)*/
    /*Typography*/
    --m-slick-title: 20px;
    
    --m-slick-subtitle: 18px;
}

/*Desktop*/

/*General*/
/*Typography*/
.g-title {
    font-size: var(--title-size);
    font-weight: var(--title-weight);
}
.g-subtitle {
    font-size: var(--subtitle-size);
}
.g-subtitle-content {
    font-size: var(--subtitle-content-size);
}
.g-text {
    font-size: var(--text-size);
}
.g-text-content {
    font-size: var(--text-content-size);
}
.g-h2 {
    font-size: 38px;
}
.g-bold {
    font-weight: bold;
}

/*Slick (slider)*/
/*Typography*/
.g-slick-title {
    font-size: var(--slick-title);
}
.g-slick-subtitle {
    font-size: var(--slick-subtitle);
}

/*Mobile*/
@media only screen and (max-width: 768px) {
    /*General*/
    /*Typography*/
    .g-title {
        font-size: var(--m-title-size);
    }
    .g-subtitle {
        font-size: var(--m-subtitle-size);
    }
    .g-subtitle-content {
        font-size: var(--m-subtitle-content-size);
    }
    .g-text {
        font-size: var(--m-text-size);
    }
    .g-text-content {
        font-size: var(--m-text-content-size);
    }
    .g-h2 {
        font-size: 20px;
        font-weight: 700;
    }
    
    /*Slick (slider)*/
    /*Typography*/
    .g-slick-title {
        font-size: var(--m-slick-title);
    }
    .g-slick-subtitle {
        font-size: var(--m-slick-subtitle);
    }
}
/*Typography*/

/*Position*/
.g-right {
    float: right;
}
.g-left {
    float: left;
}

/*Margins*/
.g-m-b-20 {
    margin-bottom: 20px;
}
.g-m-b-30 {
    margin-bottom: 30px;
}
.g-m-b-100 {
    margin-bottom: 100px;
}
.g-m-t-20 {
    margin-top: 20px;
}
.g-m-t-30 {
    margin-top: 30px;
}
.g-m-t-100 {
    margin-top: 100px;
}
.g-m-auto {
    margin: auto;
}
.g-m-x-auto {
    margin: 0 auto;
}

/*Flex*/
.g-d-flex {
    display: flex;
}
.g-flex-column {
    flex-direction: column;
}
.g-flex-row {
    flex-direction: row;
}
.g-justify-content-around {
    justify-content: space-around;
}
.g-align-items-center {
    align-items: center;
}
.g-gap-30 {
    gap: 30px;
}

/*Block*/
.g-d-block {
    display: block;
}

/*Clear all - importants*/
.g-m-clear-i {
    margin: 0px !important;
}
.g-p-clear-i {
    padding: 0px !important;
}
.g-width-100-i {
    width: 100% !important;
}
.g-float-clear {
    float: unset !important;
}

@media only screen and (max-width: 768px) {
    .g-d-xs-flex {
        display: flex;
    }
    .g-flex-xs-column {
        flex-direction: column;
    }
    .g-flex-xs-row {
        flex-direction: row;
    }
    
    .g-d-xs-block {
        display: block;
    }
}
/*Position*/

/*Sizes*/
.g-width-100 {
    width: 100%;
}