@import "dxHelpers/reset";
@import "dxHelpers/text";

article {
    border: 1px solid var(--dx-g-gray-90);
    border-radius: 0.3125rem;
}

header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    border-radius: 0.3125rem 0.3125rem 0 0;
    background-color: var(--dx-g-gray-95);
    font-family: var(--dx-g-font-sans);
    color: var(--dx-g-gray-10);
    padding: var(--dx-g-spacing-sm);
}

header span {
    padding: var(--dx-g-spacing-sm) var(--dx-g-spacing-md);
    font-size: var(--dx-g-text-sm);
}

footer {
    border-radius: 0 0 0.3125rem 0.3125rem;
}

.body {
    margin: var(--dx-g-spacing-md);
    overflow-x: auto;
}

.body img {
    min-width: 650px;
}

.controls {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

/* Breakpoints for mobile */

@media screen and (max-width: 640px) {
    header {
        flex-direction: column;
        align-items: flex-end;
    }
}

@media screen and (max-width: 320px) {
    .controls,
    .controls dx-dropdown,
    .controls dx-button {
        width: 100%;
    }
}