.inline-link {
    color: inherit;
    text-decoration: underline;
}

@media (hover: hover) {
    .inline-link:hover {
        text-decoration: none;
    }
}

.inline-link:active {
    text-decoration: none;
    opacity: .8;
}

.ld-button {
    display: block;
    padding: 0;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--black);
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
}

.button--small {
    width: 44px;
    height: 40px;
    background-repeat: no-repeat;
    --inner-url: '../assets/burger-opened.svg';
}

.button--decorated-wrapper {
    display: grid;
    place-items: center;
    align-content: center;
}
.button--decorated-wrapper > * {
    grid-area: 1 / 1;
}
.button--decorated {
    display: flex;
    align-items: center;
    justify-content: center;
    color: inherit;
    position: relative;
    z-index: 1;
    transition: all .3s ease-in-out;
}
.button--decorated-decor {
    background-repeat: no-repeat;
    background-size: contain;
}

.burger {
    background-size: 50% 50%, 100% 100%;
}

.burger.cross {
    background-position: 12px 6px, 50% 50%;
    background-image: url('../assets/burger-opened.svg'), url('../assets/burger-bg.svg');
}

.burger.lines {
    background-position: 12px 6px, 50% 50%;
    background-image: url('../assets/burger-closed.svg'), url('../assets/burger-bg.svg');
}

.burger.yellow.lines {
    background-position: 12px 6px, 50% 50%;
    background-image: url('../assets/burger-closed.svg'), url('../assets/burger-bg-yellow.svg');
}


.ld-button.arrow {
    background-size: 50% 50%, 100% 100%;
    background-position: 12px 6px, 50% 50%;
}
.ld-button.left {
    background-image: url('../assets/arrow-left.svg'), url('../assets/burger-bg.svg');
}
.ld-button.right {
    background-image: url('../assets/arrow-right.svg'), url('../assets/burger-bg.svg');
}

.header-current-title-wrapper {
    display: grid;
    place-items: center;
}
.header-current-title-wrapper>* {
    grid-area: 1 / 1;
}
.header-current-title {
    line-height: 40px;
    margin: 0;
    font-size: 22px;
    font-weight: 700;
    text-transform: uppercase;
}
.header-current-title-decor {
    width: 145px;
    height: 45px;
    background: url('../assets/title-shield.png') no-repeat 50% 50%;
    background-size: 145px 45px;
}

.download-link {
    letter-spacing: 0.05em;
    text-decoration: underline;
    transition: all .3s ease-in-out;
}

.download-link::before {
    content: "";
    display: inline-block;
    width: 24px;
    height: 24px;
    background-position: 50% 50%;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9 22h6c5 0 7-2 7-7V9c0-5-2-7-7-7H9C4 2 2 4 2 9v6c0 5 2 7 7 7Z' stroke='url(%23a)' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='m9 11.51 3 3 3-3' stroke='%23F37715' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='m9 11.51 3 3 3-3' stroke='url(%23b)' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M12 14.51v-8' stroke='%23F37715' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M12 14.51v-8' stroke='url(%23c)' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M6 16.51c3.89 1.3 8.11 1.3 12 0' stroke='%23F37715' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M6 16.51c3.89 1.3 8.11 1.3 12 0' stroke='url(%23d)' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cdefs%3E%3ClinearGradient id='a' x1='12' y1='2' x2='12' y2='22' gradientUnits='userSpaceOnUse'%3E%3Cstop/%3E%3Cstop offset='1'/%3E%3C/linearGradient%3E%3ClinearGradient id='b' x1='12' y1='11.51' x2='12' y2='14.51' gradientUnits='userSpaceOnUse'%3E%3Cstop/%3E%3Cstop offset='1'/%3E%3C/linearGradient%3E%3ClinearGradient id='c' x1='12.5' y1='6.51' x2='12.5' y2='14.51' gradientUnits='userSpaceOnUse'%3E%3Cstop/%3E%3Cstop offset='1'/%3E%3C/linearGradient%3E%3ClinearGradient id='d' x1='12' y1='16.51' x2='12' y2='17.485' gradientUnits='userSpaceOnUse'%3E%3Cstop/%3E%3Cstop offset='1'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E");
    vertical-align: middle;
    margin-right: .5ch;
}

.download-link + .button--decorated-decor {
    width: 275px;
    height: 80px;
    background-image: url('../assets/download-link-bg.png');
}
.button--rating {
    font-size: 18px;
    font-weight: 700;
    rotate: -5deg;
}
.button--rating + .button--decorated-decor {
    rotate: -5deg;
}
.button--rating + .button--decorated-decor {
    width: 290px;
    height: 70px;
    background-image: url('../assets/rating-arrow.png');
}

@media (hover: hover) {
    .download-link:hover {
        text-decoration: none;
    }
}

.download-link:active {
    text-decoration: underline;
}


@media (min-width: 720px) {
    .skewed-button {
        font-size: 18px;
    }

    .header-current-title {
        font-size: 32px;
    }
}

@media (min-width: 630px) {
    .button--small {
        width: 65px;
        height: 58px;
    }

    .burger:is(.cross, .lines, .yellow.lines){
        background-position: 17px 10px, 50% 50%;
    }

    .ld-button.arrow {
        background-position: 17px 10px, 50% 50%;
    }
}