.grafica-container {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.grafica-metrics {
display: flex;
flex-direction: column;
width: 100%;
max-width: 1200px;
margin: 0 auto;
} .grafica-row {
display: flex;
flex-wrap: wrap;
width: 100%;
margin-bottom: 20px;
} .grafica-row-3 .grafica-card {
width: calc(33.333% - 20px);
margin: 0 10px;
} .grafica-row-2 .grafica-card {
width: calc(50% - 20px);
margin: 0 10px;
} .grafica-row-1 .grafica-card {
width: calc(100% - 20px);
margin: 0 10px;
} .grafica-card {
background: #fff;
border: 1px solid #ddd;
border-radius: 10px;
padding: 20px;
box-sizing: border-box;
text-align: center;
margin-bottom: 20px;
display: flex;
flex-direction: column; }
.grafica-card h3 {
margin-bottom: 10px;
font-size: 18px;
padding: 0 5px;
}
.grafica-card .value {
font-size: 32px; font-weight: bold;
margin-bottom: 10px;
}
.grafica-stars {
color: #f5c518;
font-size: 16px;
white-space: nowrap; margin-bottom: 5px;
padding: 0 15px; } .grafica-metric-card {
min-height: 150px; padding: 15px; display: flex;
flex-direction: column;
justify-content: center;
} .grafica-chart-card {
display: flex;
flex-direction: column;
justify-content: flex-start; min-height: 400px; }
.chart-header {
margin-bottom: 15px;
}
.grafica-chart-container {
position: relative;
width: 100%;
flex-grow: 1;
display: flex;
flex-direction: column;
}
.grafica-chart {
position: relative;
width: 100%;
height: 100%; min-height: 330px; margin: 0; } .grafica-offers-card .offers-info {
display: flex;
flex-direction: column; margin-top: 20px;
}
.offer-item {
width: 100%; margin-bottom: 15px;
padding: 15px;
border-radius: 8px;
text-align: left;
}
.offer-cheapest {
background-color: rgba(9, 187, 57, 0.1);
border-left: 4px solid #09bb39;
}
.offer-expensive {
background-color: rgba(59, 73, 223, 0.1);
border-left: 4px solid #3b49df;
}
.offer-label {
margin: 0 0 10px 0;
font-size: 16px;
}
.offer-details {
margin: 0;
font-size: 14px;
}
.offer-details a {
display: flex;
flex-wrap: wrap;
color: #333;
text-decoration: none;
}
.offer-details a:hover {
text-decoration: underline;
}
.offer-name {
flex: 0 0 100%;
font-weight: bold;
margin-bottom: 5px;
}
.offer-price {
font-weight: bold;
margin-right: 5px;
} @media (max-width: 768px) {
.grafica-row-3 .grafica-card,
.grafica-row-2 .grafica-card,
.grafica-row-1 .grafica-card {
width: calc(100% - 20px);
margin-bottom: 20px; }
.grafica-chart {
height: 250px; }
.grafica-metrics {
padding: 10px; }
}