/** Headers **/
.vlx-header {}


/** Footers **/
.vlx-footer {}


/** Footers > Site **/
.vlx-footer--site {}
.vlx-footer--site h2 { margin-bottom: 16px; }


/** Blocks **/
.vlx-block {}

.vlx-block__header { padding-bottom: 32px; }

.vlx-block__toolbar { padding-bottom: 16px; }
.vlx-block__toolbar .container { display: flex; align-items: center; flex-wrap: wrap; gap: 16px; }

.vlx-block__footer { padding-top: 32px; }


/** Blocks > Sites **/
.vlx-block--sites {}
.vlx-block--sites .vlx-block__header .container { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.vlx-block--sites .vlx-block__body .container { display: grid; grid-template-columns: repeat(var(--gc, 1), minmax(300px, 1fr)); gap: 32px; }

@media (min-width: 786px) {
    .vlx-block--sites .vlx-block__body .container { --gc: 2; }
}
@media (min-width: 992px) {
    .vlx-block--sites .vlx-block__body .container { --gc: 3; }
}
@media (min-width: 1400px) {
    .vlx-block--sites .vlx-block__body .container { --gc: 4; }
}


/** Blocks > Resources **/
.vlx-block--resources {}
.vlx-block--resources .vlx-block__header .container { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.vlx-block--resources .vlx-block__body .container { display: grid; grid-template-columns: repeat(var(--gc, 1), minmax(300px, 1fr)); gap: 32px; }

@media (min-width: 786px) {
    .vlx-block--resources .vlx-block__body .container { --gc: 2; }
}
@media (min-width: 992px) {
    .vlx-block--resources .vlx-block__body .container { --gc: 3; }
}
@media (min-width: 1400px) {
    .vlx-block--resources .vlx-block__body .container { --gc: 4; }
}


/** Blocks > Users **/
.vlx-block--users {}
.vlx-block--users .vlx-block__toolbar .container { justify-content: space-between; }
.vlx-block--users .vlx-block__body .container { display: grid; grid-template-columns: repeat(var(--gc, 1), minmax(0, 1fr)); gap: 32px; }

@media (min-width: 786px) {
    .vlx-block--users .vlx-block__body .container { --gc: 2; }
}
@media (min-width: 992px) {
    .vlx-block--users .vlx-block__body .container { --gc: 3; }
}
@media (min-width: 1400px) {
    .vlx-block--users .vlx-block__body .container { --gc: 4; }
}