.blog-paragraph-with-asset {
    position: relative;
}

.asset-box {
    position: absolute;
    top: -5px;
    left: calc(100% + 25px);
    padding: 20px 15px;
    width: 265px;
    transition: background var(--translation_duration);
}

@media only screen and (max-width: 1280px) {
    .asset-box {
        position: relative;
        left: unset;
        margin: 30px auto;
        text-align: center;
        width: 100%;
        top: unset;
        padding: 0;
    }
}

.asset-box:hover {
    background: #f1f7ff;
}

@media only screen and (max-width: 1280px) {
    .asset-box:hover {
        background: unset;
    }
}

.asset-box p {
    color: var(--brand);
    margin-bottom: 10px;
}

.asset-box p,
.asset-box a {
    font-size: var(--p);
    line-height: var(--line-height--xl);
}

@media only screen and (max-width: 1440px) {
    .asset-box p,
    .asset-box a {
        font-size: var(--p);
    }
}

@media only screen and (max-width: 1280px) {
    .asset-box a.link--arrow {
        padding: 4px 15px;
        border: 2px solid var(--red);
        font-size: var(--caption-font-size);
    }

    .asset-box a.link--arrow:hover {
        background: var(--red);
        color: var(--white);
    }

    .asset-box a .arrow--right {
        display: none;
    }
}

.asset-image {
    margin-bottom: 20px;
}

.asset-image img {
    max-height: 120px;
    max-width: 110px;
    height: auto;
    width: auto;
    box-shadow: 3px 4px 12px 0 rgb(38 41 82 / 10%);
}

.asset-icon {
    margin-bottom: 20px;
}

.asset-icon img {
    position: relative;
    z-index: 1;
    max-height: 60px;
    max-width: 60px;
    width: auto;
    height: auto;
}

.asset-icon svg {
    position: absolute;
    top: -10px;
    left: -15px;
    z-index: -1;
}

@media only screen and (max-width: 1440px) {
    .asset-icon svg {
        left: -20px;
    }
}

@media only screen and (max-width: 1280px) {
    .asset-icon svg {
        left: -45px;
    }
}

.blog-cta-arrow {
    position: absolute;
    top: -10px;
    left: -10px;
    z-index: 2;
}

@media only screen and (max-width: 1280px) {
    .blog-cta-arrow {
        display: none;
    }
}