@layer components-widgets {
    .exchange-rates__row {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        padding-block: 20px
    }

    @media screen and (max-width: 1023px) {
        .exchange-rates__row {
            flex-direction: column;
            row-gap: 18px
        }
    }@media screen and (min-width: 768px) {
    .exchange-rates__row {
        -moz-column-gap: 30px;
        column-gap: 30px
    }
}@media screen and (min-width: 1600px) {
    .exchange-rates__row {
        -moz-column-gap: 62px;
        column-gap: 62px
    }
}.exchange-rates__title {
     margin-block: 0
 }

    .exchange-rates__title .headline__content {
        -moz-column-gap: 4px;
        column-gap: 4px
    }

    @media screen and (max-width: 1023px) {
        .exchange-rates__title {
            width: 100%
        }
    }.exchange-rates__arrow {
         width: 32px;
         height: 32px;
         margin-left: 16px
     }

    .exchange-rates__currency-wrapper {
        position: relative;
        display: flex;
        align-items: baseline;
        flex: 1 1 auto;
        justify-content: space-between
    }

    @media screen and (max-width: 1023px) {
        .exchange-rates__currency-wrapper {
            display: grid;
            grid-template-columns:repeat(2, 1fr);
            gap: 12px 24px;
            width: 100%
        }

        .exchange-rates__currency-wrapper::before {
            position: absolute;
            left: 50%;
            display: block;
            width: 1px;
            height: 100%;
            content: "";
            background: var(--primary-blue)
        }
    }@media screen and (max-width: 767px) {
    .exchange-rates__currency-wrapper {
        grid-template-columns:1fr
    }

    .exchange-rates__currency-wrapper::before {
        display: none
    }
}.exchange-rates__currency {
     display: flex;
     align-items: flex-end;
     -moz-column-gap: 12px;
     column-gap: 12px
 }

    @media screen and (min-width: 1024px) {
        .exchange-rates__currency-title-text {
            display: none
        }
    }@media screen and (max-width: 1023px) {
    .exchange-rates__currency {
        display: grid;
        grid-template-columns:repeat(3, 1fr);
        justify-items: flex-start
    }

    .exchange-rates__currency:not(:where(:first-of-type,:nth-of-type(2))) .exchange-rates__currency-title-text, .exchange-rates__currency:not(:where(:first-of-type,:nth-of-type(2))) .exchange-rates__currency-price-text {
        display: none
    }
}@media screen and (max-width: 767px) {
    .exchange-rates__currency {
        -moz-column-gap: 8px;
        column-gap: 8px
    }

    .exchange-rates__currency:not(:first-of-type) .exchange-rates__currency-title-text, .exchange-rates__currency:not(:first-of-type) .exchange-rates__currency-price-text {
        display: none
    }
}.exchange-rates__separator {
     position: relative;
     bottom: 2px;
     width: 12px;
     height: 12px;
     transform: rotate(45deg);
     border-radius: 2px;
     background-color: var(--primary-blue)
 }

    .exchange-rates__separator_red {
        background-color: var(--primary-red)
    }

    @media screen and (max-width: 1023px) {
        .exchange-rates__separator {
            display: none
        }
    }.exchange-rates__currency-title {
         display: flex;
         align-items: center;
         flex-direction: column;
         gap: 4px
     }

    .exchange-rates__price {
        display: flex;
        align-items: center;
        flex-direction: column;
        gap: 4px
    }

    @media screen and (max-width: 1023px) {
        .exchange-rates__price {
            align-items: flex-start
        }
    }.exchange-rates__triangle-up, .exchange-rates__triangle-down {
         width: 15px;
         height: 15px;
         margin-left: 4px
     }

    .exchange-rates__triangle-up {
        transform: rotate(-180deg);
        color: var(--primary-green)
    }

    .exchange-rates__triangle-down {
        color: var(--primary-red)
    }
}