// default layout: horizontal
.dnSkyContainerOuter {
    margin-bottom: 3em;
}
.dnSkyContainerOuter {
    padding: 10px 0;
}

.dnSkyDataAtom {
    padding: 3px 3px;
}
.dnSkyContainer p {
    margin: 0;
}
.dnSkyDataAtom__txt {
    flex-grow: 0;
}
.dnSkyContainerOuter,
.dnSkyDataAtom {
    display: flex;
    align-items: center;
    align-content: stretch;
}
.dnSkyContainerOuter {
    flex-wrap: wrap; // allows responsive layout on restricted width if horizontal
    justify-content: center; // center horizontally
}
.dnSkyDataAtom__icon {
    padding: 0;
}
.dnSkyDataAtom__icon img {
    display: block;
}
.dnSkyDataAtom__txt-val {
    font-weight: 500;
}
.dnSkyDataAtom__txt-label {
    font-weight: 700;
}

// alternate layout: vertical

.dnSkyContainerOuter.layoutMode-vertical {
    flex-direction: column;
    align-items: flex-start;
}

// for dev purposes outline flext containers

.dn-devMode .dnSkyContainerOuter,
.dn-devMode .dnSkyDataAtom,
.dn-devMode .dnSkyDataAtom__icon,
.dn-devMode .dnSkyDataAtom__txt {
    border: 1px solid #f0f;
    padding: 10px;
}