.oak-row:has(.oak-notification) {
    overflow: visible;
}

.oak-notification {
    width: 100%;
    display: flex;
    align-items: center;
    gap: var(--oak-spacing-m);
}

.oak-notification-arrow {
    fill: none;
    stroke: var(--oak-green-500);
    stroke-miterlimit: 10;
    stroke-width: 4;
    height: 100px;
}

.oak-notification-content {
    display: flex;
    flex-direction: column;
    gap: var(--oak-spacing-2xs);
}

.oak-notification-title {
    color: var(--oak-olive-800);
}

@media (max-width: 1024px) {
    .oak-row:has(.oak-notification) {
        overflow: hidden;
    }

    .oak-notification-arrow {
        display: none;
    }

    .oak-notification {
        background-color: var(--oak-white);
        padding: var(--oak-spacing-xl);
    }

    .oak-notification-content {
        display: flex;
        flex-direction: column;
        gap: var(--oak-spacing-xs);
    }
}

@media (max-width: 768px) {
    .oak-notification {
        padding: var(--oak-spacing-xl) var(--oak-spacing-m);
    }
}

@media (max-width: 512px) {
    .oak-notification {
        padding: var(--oak-spacing-l) var(--oak-spacing-s);
    }
}