html {
    background-color: #fffaef;
    color: rgba(0, 0, 0, 0.5);
    font-size: 1em;
    line-height: 1.3em
}

.wrapper{
    height:95vh;
    display:grid;
    grid-template-columns: repeat(8, 1fr);
    grid-template-rows:min-content auto;
    grid-column-gap: 8px;
    grid-row-gap:8px;
}

.header {
    padding:0.5em;
    grid-column: span 8;
    background-color: #c45d04;
    color: #051a4f80;
    padding-right: 1em;
}

h1 {
    font-size: 2em
}

.header h1 {
    float:left;
}

.header img {
    float: right;
    margin-top: 1em;
}

.infowrapper{
    width:100%;
    display:grid;
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: min-content auto;
    grid-column-gap: 8px;
    grid-row-gap:8px;
}
.infocard{
    grid-column:span 1;
    border: 1px solid grey;
    display: grid;
    grid-template-columns:3.9em repeat(5, 1fr);
    grid-template-rows:  repeat(2, 2em)
}

.infocard .number {
    grid-row:span 2;
    position: relative;
    border-radius: 50%;
    padding: 4px;
    text-align: center;
    font-weight: bold;
    margin:8px;
    padding:4px;
    background-color: #c45d04;
    color:rgba(255,255,255,0.95);
}

 .infocard .number .content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);    
    font-size: 1.5em;
}

 .infocard .address {
    grid-column:2 / 4;
    grid-row: 1;
    padding-top:0.3em;
    font-size: 1.3em;
    color: #005d06;
}

 .infocard .price {
    grid-column:2 / 4;
    grid-row: 2;
    font-size: 1.3em;
    color: #005d06;
}

.infocard .description {
    grid-column:span 3;
    grid-row:span 2;
    line-height: 1.3em;
    height: 3.9em;
    overflow: hidden;
    padding-right: 0.5em;
}

.infobox-info .infocard {
    grid-template-columns:0.5em 5em 5em repeat(3, 1fr);
    border:0;
    height: 7em;
}
.infobox-info .infocard .description {
    height: 6.5em;
}

.highlighted {
    background-color: rgba(250, 157, 77, 0.25);
}

.infocard.highlighted .number {
    background-color: #005d06 !important;
}


.map {
    grid-column:span 5;
    background-color:#2a470b;
}

a {
    color: #763700;
    background: transparent;
    text-decoration: none;
}

a:hover {
    color: #fa9d4d;
    text-decoration-line: underline;
    text-decoration-color: #a04a00;
    text-decoration-style: solid;
}

.list {
    grid-column: span 3;
}

@media  handheld, screen and (max-width: 1080px) {
    .wrapper{
        height:170vh;
        display:grid;
        grid-template-columns: 1fr;
        grid-template-rows:min-content 1fr 1fr;
        grid-column-gap: 8px;
        grid-row-gap:8px;
    }
    
    .header {
        grid-column: span 1;
    }
    
    .map {
        grid-column:span 1;
    }
    
    .list {
        grid-column: span 1;
    }

    .infowrapper{
        width:100%;
        display:grid;
        grid-template-columns:  1fr;
        grid-auto-rows: min-content auto;
        grid-column-gap: 8px;
        grid-row-gap:8px;
    }
}