.luoghi-grid{
    display:flex;
    flex-direction:column;
    gap:20px;
}

/* ==========================
   FILTRI
========================== */
.luoghi-filters{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    margin-bottom:30px;
}

.luoghi-filters .filter{
    border:1px solid #e7e2dc;
	color: black;
    background:#fff;
    border-radius:50px;
    padding:12px 22px;
    cursor:pointer;
    transition:.25s;
    font-size:14px;
}
.luoghi-filters .filter:hover{
    background:#f8f5f1;
}
.luoghi-filters .filter.active{
    background:#c79b54;
    color:#fff;
    border-color:#c79b54;
}


/* ==========================
   CARD
========================== */
.luogo-card{
    display:flex;
    align-items:stretch;
    gap:30px;
    background:#fff;
    border:1px solid #efefef;
    border-radius:25px;
    box-shadow: 0 2px 8px rgba(0,0,0,.03);
    transition:.25s;
}
.luogo-card:hover{
    transform:translateY(-2px);
    box-shadow:
        0 8px 30px rgba(0,0,0,.08);
}

/*Struttura card*/
.luogo-card .col-1 {
	width: 25%;
}
.luogo-card .col-2 {
	display: flex;
    flex-direction: column;
	justify-content: space-between;
	gap: 10px;
	padding: 22px 0px 22px 0px;
}
.luogo-card .col-3 {
	display: flex;
	text-align: right;
	margin-left: auto;
	gap: 10px;
    flex-direction: column;
    justify-content: end;
	padding: 22px 20px 22px 0px;
}
.luogo-card .col-3 .riga-bottoni {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

/*Colonna 1 (img)*/
.luogo-card .col-1 img {
	height: 100%;
	width: 100%;
	object-fit: cover;
	border-radius: 25px 0px 0px 25px;
}

/*Colonna 2 (testi)*/
.luogo-card .col-2 .titolo {
	font-size: 25px;
    font-weight: 800;
    font-family: 'Roboto';
}
.luogo-card .col-2 .sottotitolo {
	margin-bottom: 15px;
}
.luogo-card .col-2 .riga-indirizzo, .luogo-card .col-2 .riga-distanza {
	display: flex;
}
.luogo-card .col-2 .riga-indirizzo img, .luogo-card .col-2 .riga-distanza img {
	width: 20px;
	margin-right: 10px;
}

/*Colonna 3 (prezzo e bottoni)*/
.luogo-card .col-3 .riga {
	gap: 15px;
    display: flex;
    flex-direction: column;
	align-items: end;
}
.luogo-card .col-3 .prezzo {
	font-size: 21px;
    font-weight: 600;
    color: #c79b54;
}
.luogo-card .col-3 .sottoriga {
	display: flex;
	gap: 20px;
}
.luogo-card .col-3 img {
	width: 20px;
	margin-right: 15px;
}
.luogo-card .col-3 .btn {
	display: flex;
	border: 1px solid;
    border-radius: 15px;
    padding: 7px 15px 7px 15px;
    color: #b1b1b1;
    font-size: 15px;
    font-weight: 700;
}
.luogo-card .col-3 .btn span {
	color: black;
}


/* ==========================
   MOBILE grande (tablet)
========================== */
@media only screen and (max-width: 1100px) and (min-width: 769px) {
	.luogo-card {
		flex-wrap: wrap;
		gap: 10px;
	}
	.luogo-card .col-1 {
		width: 40%;
	}
	.luogo-card .col-2 {
		width: 57%;
		padding: 0px 20px 0px 20px;
	}
	.luogo-card .col-3 {
		width: 100%;
		padding: 10px 20px 20px 20px;
		flex-direction: row-reverse;
	}
	.luogo-card .col-3 .riga {
		flex-direction: row;
	}
	.luogo-card .col-3 .riga-bottoni {
		flex-direction: row;
	}
	.luogo-card .col-1 img {
		border-radius: 25px 0px 0px 0px;
	}
}


/* ==========================
   MOBILE
========================== */
@media only screen and (max-width: 768px) {
	.luogo-card {
		flex-direction: column;
	}
	.luogo-card .col-1, .luogo-card .col-2, .luogo-card .col-3 {
		width: 100%;
	}
	.luogo-card .col-2 {
		padding: 0px 20px 0px 20px;
	}
	.luogo-card .col-3 {
		padding: 0px 20px 20px 20px;
	}
	.luogo-card .col-1 img {
		border-radius: 25px 25px 0px 0px;
	}
}