33 lines
594 B
CSS
33 lines
594 B
CSS
.container {
|
|
display: grid;
|
|
gap: var(--Space-x3);
|
|
align-items: center;
|
|
grid-template-areas:
|
|
"availableRoomsCount"
|
|
"noAvailabilityAlert"
|
|
"filters";
|
|
}
|
|
|
|
.availableRoomsCount {
|
|
grid-area: availableRoomsCount;
|
|
}
|
|
|
|
.noAvailabilityAlert {
|
|
grid-area: noAvailabilityAlert;
|
|
}
|
|
|
|
.filters {
|
|
grid-area: filters;
|
|
display: flex;
|
|
gap: var(--Space-x1);
|
|
align-items: flex-start;
|
|
}
|
|
|
|
@media screen and (min-width: 768px) {
|
|
.container {
|
|
grid-template-columns: 1fr auto;
|
|
grid-template-areas: "availableRoomsCount filters"
|
|
"noAvailabilityAlert noAvailabilityAlert";
|
|
}
|
|
}
|