.cabecera-columnas{
margin-top: 50px;
}
.cabecera-columnas .control-listado-opciones{
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-column-gap: 40px;
}
.cabecera-columnas .control-listado-opciones .single-option{
min-height: 400px;
background-color: var(--color-blue);
background-size: 315px;
background-position: 90% 40px;
background-repeat: no-repeat;
position: relative;
transition:0.3s ease;
}
.cabecera-columnas .control-listado-opciones .single-option:hover{
background-color: var(--color-grey);
}
.cabecera-columnas .control-listado-opciones .single-option .control{
border-top: 1px solid white;
padding: 15px 0; position: absolute;
bottom: 20px;
left: 40px;
max-width: 400px;
margin-right: 40px;
}
.cabecera-columnas .control-listado-opciones .single-option p.title{ font-family: var(--fuente-bold);
font-size: 25px;
color: white;
}
.cabecera-columnas .control-listado-opciones .single-option .more{
font-family: var(--fuente-bold);
font-size: 17px;
color: white;
text-decoration: none;
display: flex;
align-items: center;
gap:10px
}
.cabecera-columnas .control-listado-opciones .single-option .more:after{
content:'';
width: 20px;
height: 15px;
background-image: url(//www.huurreiberica.com/wp-content/themes/huurre/images/right-arrow.png);
background-size: contain;
background-position: center;
}
@media only screen and (max-width:1500px) {
.cabecera-columnas .control-listado-opciones .single-option p.title{
font-size: 22px;
}
.cabecera-columnas .control-listado-opciones .single-option{
min-height: 300px;
background-size: 175px;
}
}
@media only screen and (max-width:1200px) {
.cabecera-columnas .control-listado-opciones{
grid-column-gap: 15px;
}
.cabecera-columnas .control-listado-opciones .single-option .control{
width: calc( 100% - 40px );
max-width: calc( 100% - 40px );
margin-right: 0;
left: 20px;
right: 20px;
bottom: 0;
}
.cabecera-columnas .control-listado-opciones .single-option p.title{
font-size: 18px;
}
}
@media only screen and (max-width:767px) {
.cabecera-columnas .control-listado-opciones{
grid-template-columns: repeat(1, 1fr);
grid-row-gap: 20px;
}
.cabecera-columnas{
margin-top: 20px;
}
.cabecera-columnas .control-listado-opciones .single-option{
min-height: 200px;
}
}