.mts-res-section {
    margin-bottom: 2em;
}

/**
 * Location
 */

.mts-res-location {
    
}

/**
 * Details
 */

.mts-res-details {
    display: flex;
    flex-wrap: wrap;
    gap: 1em;
}

.mts-res-details-item {
    display: flex;
    gap: .4em;
}

.mts-res-details-item [class*='mts-rel-icon'] {
    align-items: center;
    display: flex;
    font-size: 2.6em;
    justify-content: center;
    /*padding-top: .2em;*/
}

.mts-res-details-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.mts-res-details-title {
    font-size: 1.2em;
}

.mts-res-details-location {
    font-size: 1.3em;
    font-weight: bold;
}

.mts-res-details-value {
    font-size: 1.6em;
    font-weight: bold;
    max-width: 200px;
}
.mts-res-details-status {
    max-width: 180px;
}

/**
 * Features
 */
.mts-res-features {
    display: grid;
    gap: 1em;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}

.mts-res-feature-item {
    align-items: center;
    gap: .4em;
    display: flex;
}

.mts-res-features-title {
    font-size: 1.5em;
    line-height: 1.2;
}

.mts-res-feature-item [class*='mts-rel-icon'] {
    font-size: 1.8em;
}

/**
 * Properties
 */

.mts-res-properties {
    display: grid;
    gap: 2em;
    grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
}

@media (max-width: 768px) {
	.mts-res-properties {
		display: grid;
		gap: 2em;
		grid-template-columns: 1fr;
	}
}

.mts-res-property {
    border: 1px solid #d8d8d8;
    cursor: pointer;
}

.mts-res-property-header, .mts-res-property-footer {
    padding: 1em;
}

.mts-res-property-header {
    display: flex;
}

.mts-res-property-title {
    flex: 1;
    font-size: 1.4em;
    font-weight: 700;
}

.mts-res-property-data {
    font-size: 1.4em;
}
.mts-res-property-data:not(:last-child) {
    margin-right: 1em;
}

.mts-res-property-img {
    width: 100%;
}

.mts-res-property-details {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    font-size: 1.4em;
    gap: 0 .5em;
}

.mts-res-property-details-status {
    font-size: .7em;
    font-weight: 700;
}


@media (max-width: 768px) {
	.mts-res-property-header {
		flex-direction: column;
	}
}


/**
 * Property modal
 */

.mts-rel-modal-details {
    padding: 1em;
}

.mts-rel-modal-details .mts-res-property-details {
    display: grid;
    gap: 1em;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

.mts-rel-modal-details .mts-res-property-details-status {
    font-size: inherit;
}

.mts-rel-property-price {
    font-size: 1.4em;
    grid-area: subtitle;
}
.mts-rel-property-price-val {
    font-weight: 700;
}

.mts-res-property-features {
    display: flex;
    flex-wrap: wrap;
    font-size: 1.2em;
    gap: 0 .5em;
    padding: 1em;
}

/**
 * Gallery
 */

.mts-res-gallery {
    display: grid;
    gap: 1em;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.mts-res-gallery img {
    width: 100%;
}

.mts-rel-inline-gallery {
    width: 100%;
    height: 0;
    padding-bottom: 45%;
}

/**
 * Projects List
 */

.mts-res-projects {
    --grid-layout-gap: 2em;
    --grid-column-count: 4;
    --grid-item--min-width: 350px;

    /**
    * Calculated values.
    */
    --gap-count: calc(var(--grid-column-count) - 1);
    --total-gap-width: calc(var(--gap-count) * var(--grid-layout-gap));
    --grid-item--max-width: calc((100% - var(--total-gap-width)) / var(--grid-column-count));

    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(max(var(--grid-item--min-width), var(--grid-item--max-width)), 1fr));
    grid-gap: var(--grid-layout-gap);
}

.mts-res-project {
    border: 1px solid #d8d8d8;
    display: flex;
    flex-direction: column;
    position: relative;
    /*max-width: 50%;*/
}

.mts-res-project .wp-post-image {
    width: 100%;
}

.mts-res-project-status {
    background: rgba(0, 0, 0, .8);
    color: white;
    font-size: 1.4em;
    left: .6em;
    padding: .2em .6em;
    position: absolute;
    top: .6em;
}
.mts-res-project-status span {
    font-weight: 700;
}

.mts-res-project-content {
    display: grid;
    gap: .2em .6em;
    grid-template-areas:
        "title price"
        "date price"
        "location price";
    padding: 1em;
}

.mts-res-project-footer {
    padding: 1em;
    padding-top: 0;
}

.mts-res-project-title {
    font-size: 1.6em;
    grid-area: title;
    padding: 0;
    margin: 0;
}

.mts-res-project-date {
    font-size: 1.3em;
    grid-area: date;
}

.mts-res-project-location {
    font-size: 1.2em;
    font-style: italic;
    grid-area: location;
}

.mts-res-project-price {
    grid-area: price;
    font-size: 1.2em;
    text-align: right;
}

/* Filter */
.mts-res-filter {
    display: grid;
    gap: 20px;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.mts-res-filter select {
    padding: 1em;
    font-size: inherit;
}

.mts-res-filter-group {

}

.mts-res-filter-item {
    align-items: center;
    border-radius: 5px;
    display: flex;
}
.mts-res-filter-item:hover {
    background: rgba(0, 0, 0, .05);
}

.mts-res-filter-item label {
    cursor: pointer;
    flex: 1;
}