.dollar-exchange-group{
    padding-block: 12px;
    display: flex;
    flex-flow: row wrap;
    align-items: start;
    gap: 12px;

    > .dollar-exchange{
        flex: 1;
    }
}

.dollar-exchange{
    border-radius: 8px;
    border: 2px solid var(--_color-gray-2);
    padding-inline: 16px;
    padding-block: 12px;
    display: flex;
    flex-flow: column wrap;
    align-items: start;
    gap: 16px;

    &[highlighted]{
        background: var(--_color-gray-2);
    }

    > header{
        > h1{
            font-family: var(--_font-family-semibold);
            color: var(--_color-black);
            text-align: start;
        }
        
        > p{
            font-family: var(--_font-family-bold);
            color: var(--_color-black);
            text-align: start;
        }
    }

    > p{
        color: var(--_color-gray-1);
        text-align: start;
    }
}