.hero-section {
    background-color: var(--bg-theme);
    min-height: var(--height-theme, 400px);
    color: var(--color-theme);
}

.hero-section.theme-primary {
    --bg-theme: var(--ims-black);
    --color-theme: var(--ims-light);
    --icon-color-theme: var(--ims-secondary);
    --btn-bg-theme: var(--ims-light);
    --btn-hover-bg: var(--ims-secondary);
    --btn-hover-color: var(--ims-primary);
}

.hero-section.theme-secondary {
    --bg-theme: var(--ims-secondary);
    --color-theme: var(--ims-black);
    --icon-color-theme: var(--ims-primary);
    --btn-bg-theme: var(--ims-light);
    --btn-hover-bg: var(--ims-primary);
    --btn-hover-color: var(--ims-light);
}

.hero-section.theme-blue {
    --bg-theme: var(--ims-blue);
    --color-theme: var(--ims-light);
    --icon-color-theme: var(--ims-secondary);
    --btn-bg-theme: var(--ims-light);
    --btn-hover-bg: var(--ims-primary);
    --btn-hover-color: var(--ims-light);
}

.hero-section.theme-custom {
    background-image: var(--bg-image, none);
    background-size: cover;
    background-position: center;
}

.hero-section-content {
    height: var(--height-theme, 400px);
}

.hero-section-content--title {
    font-size: 2.813rem;
    --ims-font-h: "Borna", sans-serif
}

.hero-section-content-mask {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: -130px;
    width: 260px;
    height: 260px;
    color: var(--icon-color-theme, var(--ims-primary));
}
.hero-section--description p:last-child {
    margin-bottom: 0;
}