.grafika-obal {
    position: relative;
    width: 100%;
    max-width: 896px;
    margin: 0 auto;
}
.grafika-obal .g-intro {
    position: relative;
    width: 100%;
    background-color: var(--brand-blue-200);
    padding-top: var(--spacing-l);
    overflow: hidden;
}
.grafika-obal .g-intro::after {
    content: "";
    position: absolute;
    bottom: var(--spacing-l); 
    right: var(--spacing-xl); 
    width: var(--spacing-xxl);
    aspect-ratio: 1/1;
    z-index: 4;
    background-color: var(--brand-50);
    background-image: url(../infographics-lib/assets/logo-aktualne-a-modre.svg);
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-position: center center;
    border-radius: 100px;
}
.grafika-obal .g-intro .animation {
    position: relative;
    width: 100%;
    aspect-ratio: 1/1;
    overflow: hidden;
    max-width: 60%;
    margin: 0 0 0 auto;
    z-index: 1;
}
.grafika-obal .g-intro .animation.anim {
    animation: fade-slides 20s infinite;
}
.grafika-obal .g-intro .slide {
    position: absolute;
    width: 100%;
    height: 100%;
    background-size: 100% auto;
    background-position: center;
    opacity: 0;
}
.grafika-obal .g-intro .slide.slide-1 {
    z-index: 1;
    opacity: 1;
}
.slide-2 {
    animation: fadeAnimation2 10s infinite;
    z-index: 2;
}
.slide-3 {
    animation: fadeAnimation3 10s infinite;
    z-index: 3;
}
.grafika-obal .g-intro .slide-4 {
    animation: fadeAnimation4 10s infinite;
    z-index: 4;
}
@keyframes fadeAnimation2 {
    0%, 25% { opacity: 0; }
    30% { opacity: 1; }
    50% { opacity: 1; }
    55% { opacity: 0; }
    100% { opacity: 0; }
}

@keyframes fadeAnimation3 {
    0%, 50% { opacity: 0; }
    55% { opacity: 1; }
    75% { opacity: 1; }
    80% { opacity: 0; }
    100% { opacity: 0; }
}

@keyframes fadeAnimation4 {
    0% { opacity: 0; }
    75% { opacity: 0; }
    80% { opacity: 1; }
    95% { opacity: 1; }
    100% { opacity: 0; }
}
.grafika-obal .g-intro .slide-1 { background-image: url('./assets/slide-1.png');}
.grafika-obal .g-intro .slide-2 { background-image: url('./assets/slide-2.png');}
.grafika-obal .g-intro .slide-3 { background-image: url('./assets/slide-3.png');}
.grafika-obal .g-intro .slide-4 { background-image: url('./assets/slide-4.png');}

.grafika-obal .g-intro .title {
    position: absolute;
    top: 0;
    left: 0;
    width: 50%;
    font-size: 8vw;
    line-height: 1.15;
    padding: var(--spacing-xl);
    font-weight: bold;
    color: var(--brand-blue-600);
    text-align: left;
    font-family: Barlow, sans-serif;
    z-index: 2;
}
.grafika-obal .g-intro .title b {
    display: block;
    font-weight: bold;
    line-height: 1;
}
.grafika-obal .g-intro .title b i {
    display: inline-block;
    font-style: normal;
    position: relative;
}
.grafika-obal .g-intro .title b i span {
    font-weight: bold;
    animation: fadeAnimationTxt 10s infinite;
}
.grafika-obal .g-intro .title b i::after {
    content: '';
    display: block;
    position: absolute;
    width: 104%;
    height: 18%;
    top: 44.5%;
    left: -2%; 
    background-color: var(--brand-red-600);
    animation: fadeAnimationTxtLine 10s infinite;
    opacity: 0;
}
@keyframes fadeAnimationTxt {
    0% { opacity: 1; }
    50% { opacity: 1; }
    51% { opacity: 0.3; }
    99% { opacity: 0.3; }
    100% { opacity: 1; }
} 
@keyframes fadeAnimationTxtLine {
    0% { opacity: 0; background-color: var(--brand-red-600);}
    50% { opacity: 0; }
    51% { opacity: 0.8; background-color: var(--brand-red-600);}
    74% { opacity: 0.8; background-color: var(--brand-red-600);}
    75% { opacity: 0.8; background-color: #35b864;}
    99% { opacity: 0.8; }
    100% { opacity: 0; background-color: #35b864;}
}

.grafika-obal .partner-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    gap: var(--spacing-xxl);
    margin-top: var(--spacing-m);
}

.grafika-obal .partner-wrapper .logo-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-m);
}
.grafika-obal .partner-wrapper span {
    font-size: 0.75rem;
    color: var(--brand-blue-200);
}
.grafika-obal .partner-wrapper .partner-item {
    max-width: 140px;
    height: auto;
}


/*counter*/
.grafika-obal .flex-bx {
    display: flex;
    flex-wrap: wrap;
    position: relative;
    width: 100%;
    margin: 0 auto;
    background: var(--brand-blue-600);
    box-sizing: border-box;
    padding: var(--spacing-l);
    gap: var(--spacing-l);
}
.grafika-obal .flex-bx .counter-obal {
    width: calc(50% - 12px);
    padding-bottom: 12px;
    border-bottom: 1px solid var(--brand-blue-400);
}

.grafika-obal .counter-obal .count {
    width: 100%;
    color: var(--brand-50);
    line-height: 1;
    padding: 0;
    text-align: left;
}
.counter-obal span.n-count.hodnota {
    font-size: 60px;
    font-weight: bold;
    color: var(--brand-50);
    display: inline-block;
}
.grafika-obal .counter-obal .count em {
    font-family: Barlow, sans-serif;
    font-style: normal;
    color: var(--brand-50);
    font-weight: bold;
    font-size: 29px;
    padding: 0 0.2vw;
}
.grafika-obal .flex-bx .counter-obal p {
    font-family: Barlow, sans-serif;
    margin: 0;
    display: block;
    padding-top: 8px;
    padding-bottom: 0;
    color: var(--brand-blue-100);
    transition: color 0.5s;
    line-height: 1.4;
    max-width: 340px;
}
.grafika-obal .flex-bx .counter-obal p b {
    font-weight: bold;
    color: var(--brand-orange-400);
}
/*konec counter*/

@media screen and (max-width: 1024px) {
    .grafika-obal {
        max-width: none;
    }
    .grafika-obal .g-intro .title {
        font-size: 90px;
        padding: var(--spacing-l);
    }
    .grafika-obal .g-intro::after {
        right: var(--spacing-l);
    }
}


@media screen and (max-width: 600px) {
    .grafika-obal .g-intro {
        padding: 0;
    }
    .grafika-obal .g-intro .animation {
        max-width: none;
        margin-left: 15%;
        margin-top: -36%;
        width: 123%;
    }
    .grafika-obal .g-intro .title {
        position: relative;
        font-size: 9vw;
        width: 100%;
    }
    .grafika-obal .g-intro::after {
        width: 11%;
        bottom: auto;
        right: 4.5vw;
        top: 4.5vw;
    }
    .counter-obal span.n-count.hodnota {
        font-size: 44px;
    }
    .counter-obal .count em {
        font-size: 22px;
    }
    .grafika-obal .flex-bx .counter-obal p {
        font-size: 15px;
    }
}