.scroll h2 {
    font-size: 26px;
}

#zamereni {
    width: 42vw;
    margin-left: 29vw;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.zamereni-item {
    width: 200px;
    text-align: left;
    flex: 1 0 40%;
    margin-bottom: 3rem;
    padding: 0px 2vw;
}

.zamereni-item h3, .zamereni-item p {
    margin: 0px 0px
}

.zamereni-icon {
    height: 60px;
    width: 60px;
    background-position: center;
    background-repeat: no-repeat;
    margin: auto;
}

.zamereni-item:first-child .zamereni-icon {
    background-image: url("cog.svg");
}

.zamereni-item:nth-child(2) .zamereni-icon {
    background-image: url("design.svg");
}

.zamereni-item:nth-child(3) .zamereni-icon {
    background-image: url("vysledky.svg");
}

.zamereni-item:nth-child(4) .zamereni-icon {
    background-image: url("smile.svg");
}

.zamereni-icon-bg {
    display: flex;
    background-color: #1ca1ca;
    width: 100px;
    height: 100px;
    border-radius: 100rem;
    margin-bottom: 1rem;
    position: relative;
    left: calc(var(--scroll-progress) * -10px + 10px);
/ / bottom: - 60 px;
    bottom: calc(var(--scroll-progress) * -65px + 130px);
    z-index: -10;
    opacity: calc(-2 + var(--scroll-progress));
}

.zamereni-item .zamereni-text p {
    margin-top: 10px
}

.zamereni-item .zamereni-text {
    height: 50%;
    display: flex;
    flex-direction: column;

    opacity: calc(-2.5 + var(--scroll-progress) * 1.2);
    background-color: white;
    border-radius: .5em;
    padding: 1rem;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
}

@media screen and (max-width: 480px) {
    #zamereni {
        width: 80vw;
        margin-left: 10vw;
    }

    .zamereni-item .zamereni-text {
        /*opacity: calc(-3.5 + var(--scroll-progress) * 1.8);*/
        opacity: calc(-3.5 + var(--scroll-progress) * 1.9);
    }

    .zamereni-item {
        width: 80%;
        text-align: left;
        flex: 1 0 90%;
    }

    .zamereni-item .zamereni-text {
        height: auto;
    }
}

@media screen and (min-width: 481px) and (max-width: 767px) {
    .zamereni-item .zamereni-text {
        height: auto;
    }

    #zamereni {
        width: 60vw;
        margin-left: 20vw;
    }

    .zamereni-item .zamereni-text {
        opacity: calc(-3.5 + var(--scroll-progress) * 1.8);
    }

    .zamereni-item {
        width: 80%;
        text-align: left;
        flex: 1 0 90%;
    }
}

@media screen and (min-width: 768px) and (max-width: 880px) {
    .zamereni-item .zamereni-text {
        height: auto;
    }

    .zamereni-item .zamereni-text {
        opacity: calc(-3 + var(--scroll-progress) * 1.5);
    }

    .zamereni-item {
        width: 80%;
        text-align: left;
        flex: 1 0 90%;
    }
}

@media screen and (max-width: 1200px) and (min-width: 880px) {
    .zamereni-item .zamereni-text {
        height: 60%;
    }

    .zamereni-item .zamereni-text {
        opacity: calc(-3 + var(--scroll-progress) * 1.6);
    }

}

.scroll {
    --scroll-progress: 2.9;
}

#web-href {
    text-decoration: none;
    margin: 4px 10px;
    color: #161313;
    display: block;
    width: fit-content;

    margin-left: 0px !important;

    /*border-radius: .4em;*/
    /*background-color: #161313;*/
    /*color: white;*/
    /*padding: 6px 12px;*/
    /*box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;*/
}

#web-href #link-icon {
    /*background-image: url("angle.svg") !important;*/
}