.article-img {
    max-width: 400px;
    height: auto;
    border-radius: 0.5em;
    box-shadow: 0 0.5rem 1.2rem rgb(0 0 0 / 33%) !important;
}

.article-img-right {
    float: right;
    margin: 1em 0 1em 2em;
}

.article-img-left {
    float: left;
    margin: 1em 2em 1em 0;
}

.article-img-wide {
    max-width: 600px;
}

.call-to-action-btn {
    margin: 0 auto 1em auto !important;
    padding: 1em 2em;
    font-size: 1.5em;
    font-weight: 500;
    background: #4C4CFF;
    color: #FFF !important;
    border-radius: 0.5em;
    transition: all 0.3s ease;
}

.call-to-action-btn:hover {
    text-decoration: none;
    box-shadow: 0.12em 0.24em 0.1em rgba(100, 100, 255, 66%);
}

.newsletter-field {
    font-size: 1.25em;
    width: 100%;
    padding: 0.5em 1.2em 0.6em 1.2em;
    border: 1px solid #CCF;
    outline: 0;
    border-radius: 4em;
    margin: 2px;
}

.newsletter-field:focus,
.newsletter-field:focus-visible {
    border: 3px inset #88F;
    margin: 0;
}

.newsletter-field:-webkit-autofill,
.newsletter-field:-webkit-autofill:hover,
.newsletter-field:-webkit-autofill:focus,
.newsletter-field:-webkit-autofill:active {
    transition: background-color 5000s ease-in-out 0s;
}

.newsletter-button {
    height: 2em;
    width: 2em;
    border: none;
    background: none;
    background-image: url(/static/img/icons/plus.png);
    background-size: cover;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translate(-0.8em, -50%);
    outline: 0;
}

.notification {
    font-size: 1.5em;
    font-weight: 300;
    background: #FFF;
    color: #000;
    width: fit-content;
    border-radius: 2em;
    box-shadow: 0em 0.1em 0.2em rgb(0 0 255);
    margin: 1em auto;
    padding: 0.5em 1em;
}

@media (max-width: 1000px) {
    .article-img-wide {
        width: 90%;
        position: relative;
        left: 50%;
        transform: translateX(-50%);
        margin-left: 0;
        margin-right: 0;
        float: unset;
    }
}

@media (max-width: 768px) {
    .article-img {
        width: 90%;
        position: relative;
        left: 50%;
        transform: translateX(-50%);
        margin-left: 0;
        margin-right: 0;
    }

    .article-img-right,
    .article-img-left {
        float: unset;
    }

    .call-to-action-btn {
        margin: 0 auto 1em auto !important;
        padding: 0.8em 1.2em;
        font-size: 1.25em;
        font-weight: 500;
        background: #4C4CFF;
        color: #FFF !important;
        border-radius: 0.5em;
        transition: all 0.3s ease;
    }

    .call-to-action-btn:hover {
        text-decoration: none;
        box-shadow: 0.12em 0.24em 0.1em rgba(100, 100, 255, 66%);
    }
}