#container {
    container-type: inline-size;
    container-name: bannercontainer;
    display: flex;
    justify-content: space-around;
}

aside {
    width: 54.376rem;
    background-color: white;
    display: grid;
    grid-template-columns: auto 1fr; 
    padding: 1.25rem;
    border-radius: .5rem;
    box-shadow: 0rem .5rem 1.25rem 0rem rgba(2, 2, 2, 0.04);
    margin-bottom: 2.5rem;

    figure {
        -webkit-user-select: none; /* Safari */
        user-select: none;
        pointer-events: none;
        align-content: start;
    }

    figcaption {
        margin-left: 1.25rem;
        display: grid;
        font-family: "Open Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

        #heading {
            font-size: 1.25rem;
            font-weight: 500;
            line-height: 120%;
            list-style: none;
            padding-bottom: .625rem;

            #subtitle {
                font-size: .875rem;
            }
        }

        #description {
            text-indent: .625rem;
            font-size: 1rem;
            font-weight: 400;
            line-height: 150%;
            list-style:disc;

            li {
                margin-left: 1.5rem;

                span {
                    margin-left: -.625rem;
                }
            }
        }

        button {
            outline: none;
            display: flex;
            align-items: center;
            justify-content: center;
            -webkit-user-select: none;
            user-select: none;
            position: relative;
            cursor: pointer;
            z-index: 2;
            margin-top: 1.25rem;
            justify-self: end;
            padding: .25rem .5rem;
            border-radius: .2rem;
            border: .0625rem solid #003DA6;
            background: #003DA6;
            color: white;
            font-size: .875rem;
            font-weight: 400;
            line-height: 150%;

            &::before {
                content: '';
                position: absolute;
                top: -1.25rem;
                right: -1.25rem;
                bottom: -1.25rem;
                left: -1.25rem;
                cursor: pointer;
                z-index: 1;
            }

            .loading-animation {
                display: inline-block;
                border: .1875rem solid white;
                border-top: .1875rem solid #003DA6;
                border-radius: 50%;
                width: .9375rem;
                height: .9375rem;
                animation: spin 2s linear infinite;
                margin-right: .625rem;
            }
        }
    }
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* 620px breakpoint */
@container bannercontainer (width < 38.75rem) {
    aside {
        max-width: 23.125rem;
        justify-items: center;
        grid-template-columns: 1fr;

        figure {
            padding-bottom: 1.25rem;
        }

        figcaption {
            margin-right: 1.25rem;

            button {
                justify-self: auto;
            }
        }
    }
}

/* 546px breakpoint */
@container bannercontainer (width < 34.125rem) {
    aside {
        width: -moz-fit-content; /* firefox */
        width: fit-content;
    }
}