/* Estilos para la tarjeta */
.card {
–img-scale: 1.001;
–title-color: black;
–link-icon-translate: -20px;
–link-icon-opacity: 0;
position: relative;
border-radius: 16px;
/* border: 2px solid #ccc; */
box-shadow: none;
transform-origin: center;
transition: all 0.4s ease-in-out;
overflow: hidden;
display: flex; /* Añadido */
justify-content: center; /* Añadido */
align-items: center; /* Añadido */
width:250px;
height:200px;
}
/* Estilos para la tarjeta al pasar el mouse */
.card:hover,
.card:focus {
–img-scale: 1.1;
–title-color: #28666e;
–link-icon-translate: 0;
–link-icon-opacity: 1;
box-shadow: rgba(0, 0, 0, 0.16) 0px 10px 36px 0px, rgba(0, 0, 0, 0.06) 0px 0px 0px 1px;
}
/* Estilos para los elementos internos de la tarjeta */
.card figure {
margin: 0;
padding: 0;
overflow: hidden;
text-align: center;
}
.card img {
width: 100%; /* Ajuste de tamaño */
height: 100%; /* Ajuste de tamaño */
transform-origin: center;
transform: scale(var(–img-scale));
transition: transform 0.4s ease-in-out;
}
.card-body {
padding: 24px;
}
.card a {
display: inline-flex;
align-items: center;
text-decoration: none;
color: #00004C;
}
.card a:focus {
outline: 1px dotted #28666e;
}
.card a .icon {
min-width: 24px;
width: 24px;
height: 24px;
margin-left: 5px;
transform: translateX(var(–link-icon-translate));
opacity: var(–link-icon-opacity);
transition: all 0.3s;
}
/* Diseño genérico (aspecto de demostración) */
* {
box-sizing: border-box;
}
.articles {
display: grid;
max-width: 1200px;
margin-inline: auto;
padding-inline: 24px;
grid-template-columns: repeat(2, 1fr);
gap: 24px;
justify-items:center;
}
@media screen and (max-width: 960px) {
.card {
container: card/inline-size;
width: 100%;
}
.articles {
grid-template-columns: repeat(1, 1fr);
}
.card-body p {
display: none;
}
}
@container card {
.article-wrapper {
display: grid;
grid-template-columns: 100px 1fr;
gap: 16px;
}
.card-body {
padding-left: 0;
}
figure {
width: 100%;
height: 100%;
overflow: hidden;
}
figure img {
height: 100%;
aspect-ratio: 1;
object-fit: cover;
}
}
.sr-only:not(:focus):not(:active) {
clip: rect(0 0 0 0);
clip-path: inset(50%);
height: 1px;
overflow: hidden;
position: absolute;
white-space: nowrap;
width: 1px;
}
.aliados_img {
width: 100%; /* Ancho al 100% */
height: 100%; /* Altura al 100% */
object-fit: cover; /* Cubrir todo el espacio */
}
