.paragraph--type--call-to-action {
    display: flex;
    align-items: center;
    gap: var(--sp2);
}

.layout-30-70 {
    flex-direction: row;
}

.layout-70-30 {
    flex-direction: row-reverse;
}

.media-action {
    flex: 0 0 3;
}

.text-link-action {
    flex: 1;
}

.layout-100 .media-action {
    display: none;
}

.layout-100 .text-link-action {
    flex-basis: 100%
}

@media (max-width: 43.75rem) {
    .layout-70-30,
    .layout-30-70 {
        flex-direction: column;
    }
}

.text-link-action svg {
    width: var(--sp2);
    height: var(--sp2);
    color: var(--color-text-neutral-loud);
    flex-shrink: 0;
    margin-inline-end: var(--sp0-75);
}

.text-link-action .link-to-action {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding-block-start: var(--sp0-25);
    margin-block: var(--sp2);
}

.text-link-action .field--name-field-link a {
    font-size: var(--font-size-l);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color--primary-60);
    transition: box-shadow 0.3s cubic-bezier(0.55, 0.085, 0, 0.99);
    -webkit-text-decoration: none;
    text-decoration: none;
    box-shadow: inset 0 -2px 0 0 var(--color--primary-60);
    padding-block-end: 0.1rem;
}
 
.text-link-action .field--name-field-link a:hover {
    -webkit-text-decoration: underline;
    text-decoration: underline;
    color: var(--color--black);
    box-shadow: inset 0 -2em 0 0 var(--color--primary-80);
    text-decoration-color: var(--color--primary-80);
}