#app {display: grid;grid-template-rows: 100px 1fr 100px;min-height: 100vh; }
/* Footer */
footer {border-top:solid 1px lightgrey;}
footer > div { display: flex;text-align: left;padding: 0px 20px;max-width: 800px;margin: 0px auto; flex-wrap: wrap; }
footer > div > div { border-left: solid 1px lightgrey;padding: 0 20px;margin: 20px 0px; }
/* Basic Text */
.text-content { display: flex;flex-wrap: wrap;max-width: fit-content;text-align: left;margin: 0 auto; }
.text-content > div { flex-grow: 1;padding: 0 2em;background-color: #f2f2f2; }
.text-main { max-width: 780px; }
.text-side { flex-grow: 1;width: 300px;max-width: 780px;display:flex;flex-direction: column;align-items: center; }
/* Image Aspect Ratio respect within container */
.aspect-ratio-respecting-image { display:flex;justify-content: center;border: solid 1px lightblue;background: rgba(0,0,0,.6); }
.aspect-ratio-respecting-image > img { width:100%;object-fit: contain; }
/* Unit Calendar */
.unit-calendar { display: grid;grid-gap: 0;grid-template-columns: repeat(7, 1fr);text-align: center;overflow:hidden;/*border-bottom: solid 1px black;border-right: solid 1px black;*/ }
.unit-calendar > * { /*border-top: solid 1px black;border-left: solid 1px black;*/ padding: 16px;}
.calendar-date-selection-active { background-color: #94ffb6; border-radius: 0 !important;}
/*.calendar-date-selection:hover { background-color:silver; !*border:1px; border-radius: 50%;*! }*/
/* Cards for Listings */
.top-cards { display: grid;grid-template-columns: repeat(auto-fit,minmax(19rem,1fr)); }
.listing-card{ padding: 10px;display: flex;flex-direction: column;text-align: left; }
.listing-card > img { border-top-left-radius: 10px;border-top-right-radius: 10px;box-shadow: -2px -4px 10px lightgrey;max-width:100%; }
.listing-card > div{
    border-left: solid 1px black;
    border-bottom: solid 1px black;
    border-right: solid 1px black;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    padding: 8px 16px;
    box-shadow: -2px 5px 10px lightgrey;
    position: relative;
}
.listing-card > div > a {
    position: absolute;
    right: 16px;
    top: 16px;
    height:60px;
    width:90px;
    font-size: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    color:black;
    background-color: #efefef;
    border:solid 2px;
    border-radius:8px;
    text-decoration: none;
}