.wrap-textures-and-3d-models-detail {
    width: 100%;
    margin: 0 96px;
    font-family: Arial;
}

.page-title {
    color: #293132;
    font-size: 64px;
    font-style: normal;
    font-weight: 700;
    line-height: 120%;
    text-transform: uppercase;
    margin-bottom: 40px;
}

.page-files {
    display: flex;
    gap: 23px;
    flex-direction: column;
}

.file-item {
    color: #293132;
    font-size: 24px;
    font-style: normal;
    font-weight: 700;
    line-height: 120%;
    text-transform: uppercase;
    display: grid;
    gap: 48px;
    grid-template-columns: 420px max-content;
    align-items: center;
}

.button-back {
    color: #a4a4a4;
    font-family: Arial;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 120%;
    text-transform: uppercase;
    display: block;
    width: max-content;
    margin-top: 40px;
    text-decoration: none;
    position: relative;
    padding-left: 30px;
    transition: all 0.3s;

    &:before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 20px;
        height: 15px;
        display: block;
        mask-image: url('/images/arrow-back-oblako.svg');
        mask-position: center;
        mask-size: cover;
        mask-repeat: no-repeat;
        background: #a4a4a4;
        transition: all 0.3s;
    }

    &:hover {
        color: #0098C3;

        &::before {
            background: #0098C3;
        }
    }
}

.icons-card {
    position: relative;
    height: 30px;
    width: 69px;
    display: flex;
    justify-content: space-between;
    flex-direction: row-reverse;

    .icon-show,
    .icon-download {
        width: 30px;
        height: 30px;
        display: block;
        position: relative;
        cursor: pointer;

        &:after {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 30px;
            height: 30px;
            display: block;
            mask-image: url('/images/show-textures.svg');
            mask-position: center;
            mask-size: cover;
            mask-repeat: no-repeat;
            background: #000;
            transition: all 0.3s;

        }

        &:hover {
            &:after {
                background: #0098C3;
            }
        }

        &.loader {
            pointer-events: none;

            &:after {
                mask-image: url('/images/SvgSpinnersRingResize.svg');
            }
        }
    }

    .icon-download {
        &:after {
            inset: 0;
            margin: auto;
            width: 21px;
            height: 21px;
            mask-image: url('/images/arrow-textures.svg');
        }
    }
}

.breadcrumbs {
    margin-top: 30px !important;
    margin-left: 64px !important;
    margin-right: 64px !important;
    margin-bottom: 24px !important;

	&.top-banner {
		margin-top: 60px !important;
	}
}

@media (max-width: 1919px) {
    .page-title {
        color: #293132;
        font-size: 40px;
        font-style: normal;
        font-weight: 700;
        line-height: 120%;
        text-transform: uppercase;
        margin-bottom: 40px;
    }

    .page-files {
        display: flex;
        gap: 23px;
        flex-direction: column;
    }

    .file-item {
        color: #293132;
        font-size: 20px;
        font-style: normal;
        font-weight: 700;
        line-height: 120%;
        text-transform: uppercase;
        display: grid;
        gap: 48px;
        grid-template-columns: 420px max-content;
        align-items: center;
    }

    .button-back {
        color: #a4a4a4;
        font-family: Arial;
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
        line-height: 120%;
        text-transform: uppercase;
        display: block;
        width: max-content;
        margin-top: 40px;
        text-decoration: none;
        position: relative;
        padding-left: 30px;
        transition: all 0.3s;

        &:before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 20px;
            height: 15px;
            display: block;
            mask-image: url('/images/arrow-back-oblako.svg');
            mask-position: center;
            mask-size: cover;
            mask-repeat: no-repeat;
            background: #a4a4a4;
            transition: all 0.3s;
        }

        &:hover {
            color: #0098C3;

            &::before {
                background: #0098C3;
            }
        }
    }
}

@media (max-width: 1439px) {
    .breadcrumbs {
        margin-top: 30px !important;
        margin-left: 40px !important;
        margin-right: 40px !important;
        margin-bottom: 24px !important;

		&.top-banner {
			margin-top: 60px !important;
		}
    }

    .page-title {
        font-size: 36px;
        margin-bottom: 32px;
    }

    .file-item {
        font-size: 18px;
        gap: 48px;
        grid-template-columns: auto 65px;
    }

    .icons-card {
        height: 30px;
        width: 65px;
        flex-direction: row-reverse;

        .icon-show,
        .icon-download {
            width: 30px;
            height: 30px;

            &:after {
                width: 30px;
                height: 30px;
            }
        }

        .icon-download {
            &:after {
                width: 21px;
                height: 21px;
            }
        }
    }

    .button-back {
        font-size: 14px;
        margin-top: 40px;
        padding-left: 27px;

        &:before {
            width: 20px;
            height: 15px;
        }
    }

    .page-files {
        max-width: 50%;
        gap: 23px;
    }
}

@media (max-width: 1023px) {
    .breadcrumbs {
        margin-top: 30px !important;
        margin-left: 40px !important;
        margin-right: 40px !important;
        margin-bottom: 16px !important;

		&.top-banner {
			margin-top: 60px !important;
		}
    }

    .page-title {
        font-size: 32px;
        margin-bottom: 40px;
    }

    .file-item {
        font-size: 16px;
        gap: 40px;
        grid-template-columns: auto 65px;
    }

    .icons-card {
        height: 30px;
        width: 65px;
        flex-direction: row-reverse;

        .icon-show,
        .icon-download {
            width: 30px;
            height: 30px;

            &:after {
                width: 30px;
                height: 30px;
            }
        }

        .icon-download {
            &:after {
                width: 21px;
                height: 21px;
            }
        }
    }

    .button-back {
        font-size: 14px;
        margin-top: 32px;
        padding-left: 27px;

        &:before {
            width: 20px;
            height: 15px;
        }
    }

    .page-files {
        max-width: 500px;
        gap: 16px;
    }
}

@media (max-width: 767px) {
    .breadcrumbs {
        margin-top: 19px !important;
        margin-left: 24px !important;
        margin-right: 24px !important;
        margin-bottom: 16px !important;
    
        &.top-banner {
            margin-top: 60px !important;
        }
    }

    .page-title {
        font-size: 24px;
    }

    .file-item {
        font-size: 14px;
    }

    .icons-card {
        height: 30px;
        width: 65px;
        flex-direction: row-reverse;

        .icon-show,
        .icon-download {
            width: 30px;
            height: 30px;

            &:after {
                width: 30px;
                height: 30px;
            }
        }

        .icon-download {
            &:after {
                width: 21px;
                height: 21px;
            }
        }
    }

    .button-back {
        font-size: 12px;
        margin-top: 32px;
        padding-left: 27px;

        &:before {
            width: 20px;
            height: 15px;
        }
    }

    .page-files {
        gap: 8px;
        max-width: 100%;
    }
}

@media (max-width: 430px) {
    .page-files {
        gap: 24px;
    }

    .file-item {
        grid-template-columns: auto 45px;
    }

    .icons-card {
        height: 18px;
        width: 45px;
        flex-direction: row-reverse;

        .icon-show,
        .icon-download {
            width: 18px;
            height: 18px;

            &:after {
                width: 18px;
                height: 18px;
            }
        }

        .icon-download {
            &:after {
                width: 18px;
                height: 18px;
            }
        }
    }
}