:root {
    --alert-default-color: #F5F5F5;
    --alert-default-color-light: #FAFAFA;
    --alert-success-color: #34C38F; /* #BCEBDB */
    --alert-success-color-light: #D6F3E9;
    --alert-warning-color: #F1B44C; /* #F9E0B4 */
    --alert-warning-color-light: #FCF0DB;
    --alert-danger-color: #F46A6A; /* #fbc9c9 */
    --alert-danger-color-light: #FDE1E1;
    --alert-info-color: #A6B7F2; /* #EBEEFC */
    --alert-info-color-light: #F6F8FE;
}
.alert {
    position: relative;
    margin: 40px 0;
    border-right: 6px solid var(--alert-default-color);
    border-radius: 8px;
    background-color: var(--alert-default-color-light);
    padding: 40px;
    padding-block-start: 90px;
}
.alert--info {
    border-right: 6px solid var(--alert-info-color);
    background-color: var(--alert-info-color-light);
}
.alert--success {
    border-right: 6px solid var(--alert-success-color);
    background-color: var(--alert-success-color-light);
}
.alert--warning {
    border-right: 6px solid var(--alert-warning-color);
    background-color: var(--alert-warning-color-light);
}
.alert--danger {
    border-right: 6px solid var(--alert-danger-color);
    background-color: var(--alert-danger-color-light);
}
.alert p {
    margin-block-end: 8px;
}
.alert p:last-child {
    margin-block-end: 0;
}
.alert p:first-child {
    margin-block-start: 0;
}
.alert::before {
    content: '';
    position: absolute;
    display: inline-block;
    top: 40px;
    left: 40px;
    right: auto;
    width: 32px;
    height: 32px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}
.alert--success.alert::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M235.3 331.3C229.1 337.6 218.9 337.6 212.7 331.3L148.7 267.3C142.4 261.1 142.4 250.9 148.7 244.7C154.9 238.4 165.1 238.4 171.3 244.7L224 297.4L340.7 180.7C346.9 174.4 357.1 174.4 363.3 180.7C369.6 186.9 369.6 197.1 363.3 203.3L235.3 331.3zM512 256C512 397.4 397.4 512 256 512C114.6 512 0 397.4 0 256C0 114.6 114.6 0 256 0C397.4 0 512 114.6 512 256zM256 32C132.3 32 32 132.3 32 256C32 379.7 132.3 480 256 480C379.7 480 480 379.7 480 256C480 132.3 379.7 32 256 32z' fill='%2334C38F'/%3E%3C/svg%3E");
}
.alert--warning.alert::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M447.1 0h-384c-35.25 0-64 28.75-64 63.1v287.1c0 35.25 28.75 63.1 64 63.1h96v83.1c0 9.838 11.03 15.55 19.12 9.7l124.9-93.7h144c35.25 0 64-28.75 64-63.1V63.1C511.1 28.75 483.2 0 447.1 0zM480 352c0 17.6-14.4 32-32 32h-144.1c-6.928 0-13.67 2.248-19.21 6.406L192 460v-60c0-8.838-7.164-16-16-16H64c-17.6 0-32-14.4-32-32V64c0-17.6 14.4-32 32-32h384c17.6 0 32 14.4 32 32V352zM255.1 255.1C264.8 255.1 272 248.8 272 240V96c0-8.844-7.156-16-16-16S240 87.16 240 96v144C240 248.8 247.1 255.1 255.1 255.1zM256 280c-13.25 0-24 10.74-24 24c0 13.25 10.75 24 24 24s24-10.75 24-24C280 290.7 269.3 280 256 280z' fill='%23F1B44C'/%3E%3C/svg%3E");
}
.alert--danger.alert::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M256 360c-13.25 0-23.1 10.74-23.1 24c0 13.25 10.75 24 23.1 24c13.25 0 23.1-10.75 23.1-24C280 370.7 269.3 360 256 360zM256 320c8.843 0 15.1-7.156 15.1-16V160c0-8.844-7.155-16-15.1-16S240 151.2 240 160v144C240 312.8 247.2 320 256 320zM504.3 397.3L304.5 59.38C294.4 42.27 276.2 32.03 256 32C235.8 32 217.7 42.22 207.5 59.36l-199.9 338c-10.05 16.97-10.2 37.34-.4218 54.5C17.29 469.5 35.55 480 56.1 480h399.9c20.51 0 38.75-10.53 48.81-28.17C514.6 434.7 514.4 414.3 504.3 397.3zM476.1 435.1C472.7 443.5 464.8 448 455.1 448H56.1c-8.906 0-16.78-4.484-21.08-12c-4.078-7.156-4.015-15.3 .1562-22.36L235.1 75.66C239.4 68.36 247.2 64 256 64c0 0-.0156 0 0 0c8.765 .0156 16.56 4.359 20.86 11.64l199.9 338C480.1 420.7 481.1 428.8 476.1 435.1z' fill='%23F46A6A'/%3E%3C/svg%3E");
}
.alert--info.alert::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 512'%3E%3Cpath d='M119.1 33.74l-64-31.1c-7.875-3.1-17.5-.875-21.38 7.125c-4 7.875-.875 17.5 7.125 21.37l64 31.1C107.1 63.36 109.5 63.99 112 63.99c7.375 0 13.88-5.125 15.62-12.37C129.3 44.49 125.8 36.99 119.1 33.74zM112 287.1c-2.5 0-4.875 .625-7.125 1.75l-64 31.1c-8 3.875-11.12 13.5-7.25 21.37c4 7.1 13.62 11.12 21.5 7.25l64-31.1c6.625-3.375 10.12-10.87 8.5-17.1C125.9 293.1 119.4 287.1 112 287.1zM528 63.99c2.5 0 4.875-.625 7.125-1.75l64-31.1c8-3.875 11.12-13.5 7.125-21.37c-3.875-7.1-13.5-11.12-21.38-7.125l-64 31.1c-6.625 3.25-10.12 10.75-8.5 17.87C514.1 58.86 520.6 63.99 528 63.99zM96 175.1C96 167.1 88.88 159.1 80 159.1h-64c-8.875 0-16 7.125-16 15.1S7.125 191.1 16 191.1h64C88.88 191.1 96 184.9 96 175.1zM624 159.1h-64c-8.875 0-16 7.125-16 15.1s7.125 15.1 16 15.1h64c8.875 0 16-7.125 16-15.1S632.9 159.1 624 159.1zM599.1 321.7l-64-31.1c-7.875-3.1-17.5-.75-21.5 7.125c-3.875 7.875-.75 17.5 7.25 21.5l64 31.1c7.875 3.875 17.5 .75 21.5-7.25C610.3 335.2 607.1 325.6 599.1 321.7zM319.5 .0154C222.7 .2967 144 79.89 144 177.4c0 42.91 15.47 84.34 43.55 116.6c13.33 15.31 35.84 49.59 43.73 76.02c1.078 8.687 8.844 14.62 17.64 13.71c8.703-.9687 14.98-8.965 14.11-17.65l-.6094-3.312c-10.31-34.97-36-72.84-50.73-89.77C188.7 246.5 176 212.6 176 177.4c0-81.24 63.05-145.1 143.5-145.3H320c38.13 0 74.05 14.87 101.2 41.94C448.8 101.5 464 138.2 464 177.4c0 35.19-12.67 69.15-35.67 95.62c-14.75 16.94-40.44 54.8-50.75 89.77l-.625 3.344c-1.047 8.75 4.938 17.59 13.67 18.68c.7813 .0938 1.531 .1562 2.281 .1562c7.797 0 14.36-5.121 15.36-13.12c8.344-28.25 30.86-62.53 44.2-77.84C480.5 261.7 496 220.3 496 177.4c0-47.71-18.55-92.49-52.22-126.1C410.5 18.08 365.6-1.172 319.5 .0154zM383.1 415.1H256c-8.846 0-16.01 7.18-16 16.03l.0746 22.34c.0098 6.27 1.884 12.46 5.359 17.68l17.09 25.69c5.225 7.855 17.22 14.28 26.65 14.28h61.72c9.418 0 21.41-6.43 26.63-14.27l17.09-25.69c2.953-4.441 5.351-12.36 5.359-17.68l-.0254-22.34C399.1 423.2 392.8 415.1 383.1 415.1zM367.9 454.4l-16.11 24.45c-.4766 .4375-1.686 1.086-.8672 1.117l-60.29 .1172c-.4238-.1016-1.138-.2773-1.423-.2773c-.1406 0-.1348-.2266 0 0l-17.1-25.48l-.0098-6.367h95.94l.0039 5.18C367.9 453.6 367.7 454.4 367.9 454.4C367.9 454.4 367.8 454.5 367.9 454.4zM336 80.02c0-8.84-7.156-16-16-16c-61.75 0-112 50.24-112 111.1c0 8.844 7.156 16 16 16s16-7.159 16-16c0-44.1 35.88-79.1 80-79.1C328.8 96.01 336 88.86 336 80.02z' fill='%23A6B7F2'/%3E%3C/svg%3E");
}
@media screen and (min-width: 720px) {
    .alert {
        padding: 40px;
        padding-inline-end: 130px;
    }
    .alert::before {
        top: 32px;
        left: auto;
        right: 32px;
        width: 40px;
        height: 40px;
    }
}