.instructions-tab__wrapper {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--gap-default);
}

.page-catalog.catalog-detail .instructions-tab__note .show-more {
    padding-top: 0;
}

.instructions-tab-item {
    gap: 10px;
    padding: 15px;
    border-radius: var(--border-small-radius);

    border: 1px solid var(--color-border);
}

.instructions-tab-item:hover {
    border-color: var(--color-main);
}

.instructions-tab-item__title {
    word-break: break-all;
}

.instructions-tab-item .svg,
.instructions-tab-item .play-icon {
    width: 35px;
    height: 35px;
    flex-shrink: 0;
}

.instructions-tab-item .play-icon {
    position: relative;
}

.instructions-tab-item .svg.play {
    width: 16px;
    height: 16px;
}

.instructions-tab-item .svg.play svg {
    margin-left: 1px;
}

.instructions-tab-item .svg.play,
.instructions-tab-item .play-icon:after {
    position: absolute;
    top: 50%;
    left: 50%;

    transform: translate(-50%, -50%);
}

.instructions-tab-item .play-icon:after {
    content: '';
    display: block;
    width: 100%;
    height: 100%;

    background-color: var(--color-main);
    border-radius: 50%;
    
    z-index: -1;
}


.instructions-tab-item .svg use {
    fill: var(--color-main);
    stroke: none;
}

.instructions-tab-item .svg.play use {
    fill: none;
    stroke: var(--color-text-white);
}

.instructions-tab-item__filesize {
    margin-top: 5px;

    font-size: 12px;
    color: var(--color-text-gray);
}

@media (max-width: 767px) {
    .instructions-tab__wrapper {
        grid-template-columns: 1fr;
    }
}