@scope( #scope-benefity ){

.hero-podklad {
background: url(hero.svg) calc(50vw + 100px) center no-repeat;
}
.hero-blok {
padding-top: 3rem; padding-bottom: 3rem;
max-width: 30rem;
}

.link {
display: inline-block;
font-weight: bold;
color: #444;
text-decoration-line: none;
cursor: pointer;
}

.dlazdice {
background-color: #fff;
border-radius: .5rem;
padding: 1rem;
padding-top: 1.5rem; padding-bottom: 1.5rem;
}

/* filtr */
.benefityFiltr-typ {
color: #333;
text-align: center;
margin-bottom: .5rem;
}

.benefityFiltr-zavrit {
cursor: pointer;
text-decoration-line: underline;
color: #333;
font-weight: bold;
}

.benefityFiltr-vyber {
text-align: center;
}

.benefityFiltr-tlacitko {
display: block;
font-size: 1.25rem;
border: 1px solid #444;
border-color: #ccc;
border-radius: 9999px;
padding-left: .75rem; padding-right: .75rem;
padding-top: .5rem; padding-bottom: .5rem;
margin: auto;
margin-top: .5rem; margin-bottom: .5rem;
cursor: pointer;
width: 8rem;
min-width: 7.5rem;
transition: all 0.3s ease;
}

.benefityFiltr-tlacitko:hover {
background-color: #eee;
color: #333;
}

.benefityFiltr-tlacitko--male {
font-size: 1rem;
width: 18rem;
}

.benefityFiltr-tlacitko--vybrano {
font-size: 1rem;
display: inline-block;
margin-left: .125rem; margin-right: .125rem;
margin-top: .25rem; margin-bottom: .25rem;
width: auto;
}

.benefityFiltr-tlacitko--sel {
background-color: #702082;
color: #fff;
}

/* dialog */
.dialog {
max-width: 40rem;
border-radius: .5rem;
margin: auto;
border-width: 0px;
background-color: #fff;
box-shadow: 0 0 4px #888;
padding: 1.5rem;
color: #333;
}

.dialog::backdrop {
background     : rgba(80, 55, 110, .35);
backdrop-filter: blur(5px);
}

.dialog-close {
position: absolute;
top: 0;
right: 0;
font-size: 3rem;
line-height: 3rem;
padding-left: 1rem; padding-right: 1rem;
cursor: pointer;
}

.dialog-close:hover {
color: #000;
}

.benefit {
display: flex;
align-items: center;
border: 1px solid #444;
border-radius: 1.75rem;
padding-left: 1.5rem; padding-right: 1.5rem;
padding-top: .75rem; padding-bottom: .75rem;
font-weight: bold;
border-color: #bbb;
cursor: pointer;
font-size: .875rem;
column-gap: .5rem;
row-gap: 1rem;
}

.benefit> :first-child {
flex: 1 1 0%;
min-width: 0;
margin-right: auto;
}

.benefit> :nth-child(2) {
margin-left: auto;
flex: 0 0 auto;
}

.benefit2 {
border-radius: 1.75rem;
padding-left: 1.5rem; padding-right: 1.5rem;
padding-top: 1.25rem; padding-bottom: 1.25rem;
font-weight: bold;
font-size: .875rem;
}

.benefit-blok {
margin-top: 1.5rem;
display: grid;
gap: 1rem;
grid-template-columns: repeat(auto-fit, minmax(25rem, 1fr));
align-items: center;
}

.benefit-obal {
display: flex;
align-items: center;
gap: .75rem;
}

.benefit-castka {
background-color: #f1e8f3;
border-radius: 9999px;
padding-left: 1rem; padding-right: 1rem;
padding-top: .5rem; padding-bottom: .5rem;
display: inline-block;
font-weight: bold;
}

.benefit-vice {
text-decoration-line: none;
border-radius: 9999px;
padding-left: 1rem; padding-right: 1rem;
padding-top: .5rem; padding-bottom: .5rem;
background-color: #ED8B00;
color: #fff;
display: inline-block;
}

.benefit-vice:hover {
background-color: #D70;
}

@media (max-width: 750px) {
.hero-podklad {
background-position: -140px -140px;
}
.hero-blok {
padding-top: 3rem; padding-bottom: 3rem;
padding-top: 10.5rem;
}
}

@media (max-width: 500px) {
.benefit {
flex-direction: column;
}
.benefit-blok {
grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}
}

.bg-\#ebf1fe { background-color: #ebf1fe }
.bg-\#f1e8f3 { background-color: #f1e8f3 }
.bg-\#f4f0f5 { background-color: #f4f0f5 }
.bg-\#fee9e7 { background-color: #fee9e7 }
.bg-\#feebfd { background-color: #feebfd }
.bg-\#fef4eb { background-color: #fef4eb }
.bg-c_fialova { background-color: #702082 }
.block { display: block }
.border-0 { border-width: 0px }
.border-c-\#ddd { border-color: #ddd }
.border-c-\#f88 { border-color: #f88 }
.color-\#333 { color: #333 }
.color-\#777 { color: #777 }
.color-\#888 { color: #888 }
.color-\#f33 { color: #f33 }
.color-\#fff { color: #fff }
.color-\#fffa { color: #fffa }
.color-c_fialova { color: #702082 }
.cursor-default { cursor: default }
.flex { display: flex }
.flex-1 { flex: 1 1 0% }
.flex-wrap { flex-wrap: wrap }
.font-normal { font-weight: normal }
.gap-2 { gap: .5rem }
.gap-3 { gap: .75rem }
.gap-4 { gap: 1rem }
.gap-5 { gap: 1.25rem }
.gap-8 { gap: 2rem }
.grid { display: grid }
.grid-auto-62 { grid-template-columns: repeat(auto-fit, minmax(15.5rem, 1fr)) }
.hidden { display: none }
.inline-block { display: inline-block }
.items-center { align-items: center }
.items-start { align-items: flex-start }
.justify-center { justify-content: center }
.leading-6 { line-height: 1.5rem }
.leading-7 { line-height: 1.75rem }
.m-0 { margin: 0 }
.m-auto { margin: auto }
.max-w-135 { max-width: 33.75rem }
.max-w-160 { max-width: 40rem }
.max-w-68 { max-width: 17rem }
.min-h-100 { min-height: 25rem }
.min-w-40 { min-width: 10rem }
.min-w-60 { min-width: 15rem }
.ml-1 { margin-left: .25rem }
.ml-2 { margin-left: .5rem }
.mt-0 { margin-top: 0 }
.mt-16 { margin-top: 4rem }
.mt-2 { margin-top: .5rem }
.mt-4 { margin-top: 1rem }
.mt-6 { margin-top: 1.5rem }
.mt-8 { margin-top: 2rem }
.mt-9 { margin-top: 2.25rem }
.py-12 { padding-top: 3rem; padding-bottom: 3rem }
.py-14 { padding-top: 3.5rem; padding-bottom: 3.5rem }
.py-20 { padding-top: 5rem; padding-bottom: 5rem }
.py-5 { padding-top: 1.25rem; padding-bottom: 1.25rem }
.py-8 { padding-top: 2rem; padding-bottom: 2rem }
.size-4 { width: 1rem; height: 1rem }
.text-14 { font-size: 3.5rem }
.text-5 { font-size: 1.25rem }
.text-6 { font-size: 1.5rem }
.text-7 { font-size: 1.75rem }
.text-8 { font-size: 2rem }
.text-center { text-align: center }
.text-right { text-align: right }
.underline { text-decoration-line: underline }
.h\:bg-\#fdd:hover { background-color: #fdd }
.h\:no-underline:hover { text-decoration-line: none }
@media screen and (min-width:30rem){
.r3\:max-w-full { max-width: 100% }
.r3\:text-12 { font-size: 3rem }
}
@media screen and (min-width:40rem){
.r4\:text-center { text-align: center }
}

}