/* Grid System */
/* Simple to use grid setup */
/* The fg- prefix will be used for all grid related items */
/* fg stands for Flexible grid */
.fg-grid-container { display: flex; display: -webkit-flex; display: -ms-flexbox; flex-direction: row; flex-wrap: wrap; flex: 0 1 auto; align-items: center; box-sizing: border-box; margin: 5px 0px; }
.fg-grid-container--no-mar { margin: 0px; }
/* styling only for display purposes - START */
.fg-grid-container--color { border: 2px dashed #ccc; }
.fg-grid-container--color .fg-grid-cell { background-color: var(--ds-light-yellow-color); border: 1px solid #fff; }
/* styling only for display purposes - END */
.fg-grid-container--large-pad > .fg-grid-cell { padding: 15px; }
.fg-grid-container--small-pad > .fg-grid-cell { padding: 5px; }
.fg-grid-container--no-pad > .fg-grid-cell { padding: 0px; }
.fg-grid-container--no-pad-firstlast .fg-grid-cell:first-child { padding-left: 0px; }
.fg-grid-container--no-pad-firstlast .fg-grid-cell:last-child { padding-right: 0px; }
.fg-grid-container--full { justify-content: space-between; }
.fg-grid-container--stretch { align-items: stretch; }
.fg-grid-container--pad { padding: 10px 0px; }
.fg-grid-container--column { flex-direction: column; }
.fg-grid-cell { box-sizing: border-box; flex-grow: 1; flex-basis: 0; min-width: 0; max-width: 100%; padding: 10px; }
.fg-grid-cell--no-pad { padding: 0px; }
/* setting a fixed with on a grid-cell */
.fg-grid-cell--fixed { flex: initial; }
.fg-grid-cell--flexgrow-2 { flex-grow: 2; }
.fg-grid-cell--flexgrow-3 { flex-grow: 3; }
/* aligning grid cell to the top of container*/
.fg-grid-cell--align-top { align-self: flex-start; }
/* aligning grid cell to the center of container - this is the default */
.fg-grid-cell--align-center { align-self: center; }
/* aligning grid cell to the bottom of container */
.fg-grid-cell--align-bottom { align-self: flex-end; }
.fg-grid-cell--top { display: flex; justify-content: flex-start; flex-direction: column; }
.fg-grid-cell--center { display: flex; justify-content: center; flex-direction: column; }
.fg-grid-cell--bottom { display: flex; justify-content: flex-end; flex-direction: column; }
.fg-grid-cell--left { text-align: left; }
.fg-grid-cell--middle { text-align: center; }
.fg-grid-cell--right { text-align: right; }
/* grid cell widths */
/* one of eight columns */
.fg-col-1 { flex-basis: 12.5%; max-width: 12.5%; }
/* 2 eights of a column - one 4th */
.fg-col-2 { flex-basis: 25%; max-width: 25%; }
.fg-col-3 { flex-basis: 33.3333%; max-width: 33.3333%; }
.fg-col-4, .fg-col-half { flex-basis: 50%; max-width: 50%; }
.fg-col-5 { flex-basis: 66.6666%; max-width: 66.6666%; }
.fg-col-6 { flex-basis: 75%; max-width: 75%; }
.fg-col-7 { flex-basis: 87.5%; max-width: 87.5%; }
.fg-col-8, .fg-col-full { flex-basis: 100%; max-width: 100%; }
@media only screen and (max-width:480px) {
.fg-col-sm { flex: 100%; max-width: 100%; }
}
@media only screen and (max-width:620px) {
.fg-col-md { flex: 100%; max-width: 100%; }
}
@media only screen and (max-width:800px) {
.fg-col-lg { flex: 100%; max-width: 100%; }
}
/* check this out https://flexgridlite.elliotdahl.com/ */