/* Trust Signals */
/* Requires variables_1.0.css */
/* Reference HTML
<div class="trust-signal-wrapper">
    <div class="trust-signal-inner">
        <div class="left">
            <div class="icon">[Place svg code]</div>
            <div class="copy">
                <h2>Lorem</h2>
                <p>Ipsum</p>
          </div>
        </div>
        <div class="middle">
            <div class="icon">[Place svg code]</div>          
            <div class="copy">
                <h2>Lorem</h2>
                <p>Ipsum</p>
            </div>
        </div>
        <div class="right">
            <div class="icon">[Place svg code]</div>          
            <div class="copy">
                <h2>Lorem</h2>
                <p>Ipsum</p>
            </div>
        </div>
    </div>
</div>
*/

.trust-signal-wrapper {
    background: var(--color-trust-signal-background);
}

.banner-wrapper .right {
    min-height: 18rem;
    padding-bottom: 20%;
}

.trust-signal-inner {
    width: calc(100% - 4rem);
    max-width: 124rem;
    margin: auto;
    display: flex;
    padding: 2rem 0 1.6rem 0;
    justify-content: space-around;
    gap: 1rem;
}

.trust-signal-inner > * {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-direction: column;
    gap: 1rem;
    text-align: center;
}

.trust-signal-inner .icon svg {
    height: 2.5rem;
    display: block;
    fill: var(--color-trust-signal-icon)
}

.trust-signal-inner p, .trust-signal-inner h2 {
    font-size: var(--text-small-size);
    margin: 0;
    line-height: 1.2;
    color: var(--color-trust-signal-text)
}

@media only screen and (min-width: 768px) {

    .trust-signal-wrapper {
        margin-top: 2rem;
    }

    .trust-signal-inner {
        border-top: 1px solid var(--color-mid-gray);
    }

    .trust-signal-inner > * {
        flex-direction: row;
        align-items: center;
        text-align: left;
    }

    .trust-signal-inner .icon svg {
        height: 2.5rem;
    }

}