Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- /** Modelos **/
- .modelos {
- padding: var(--separacion) 0;
- }
- .header-modelos {
- font-size: 6rem;
- margin-bottom: var(--separacion);
- }
- .listado-modelos {
- display: flex;
- flex-direction: column-reverse;
- }
- @media (min-width: 992px) {
- .listado-modelos {
- display: grid;
- grid-template-columns: repeat(2, 1fr);
- grid-template-rows: repeat(2, 20rem);
- gap: 4rem;
- }
- }
- .modelo {
- background-color: var(--grisClaro);
- margin-bottom: 2rem;
- padding-left: 4rem;
- color: var(--primario);
- border-radius: 2rem;
- min-height: 20rem;
- background-repeat: no-repeat;
- background-position: 90% center;
- background-size: 15rem;
- display: flex;
- flex-direction: column;
- justify-content: center;
- transition-property: transform background-size;
- transition-duration: .3s;
- }
- .modelo:hover {
- transform: scale(1.1);
- background-size: 30rem;
- }
- @media (min-width: 992px) {
- .modelo {
- margin-bottom: 0;
- }
- }
- .modelo h3 {
- font-size: 2.4rem;
- }
- .modelo .precio {
- font-size: 4rem;
- font-weight: 900;
- line-height: 0;
- }
- .modelo:first-of-type {
- margin-bottom: 0;
- }
- .modelo-x {
- background-image: url(../img/modelo-x.svg);
- }
- .modelo-y {
- background-image: url(../img/modelo-y.svg);
- }
- .modelo-z {
- background-image: url(../img/modelo-z.svg);
- background-color: var(--primario);
- color: var(--blanco);
- }
- @media (min-width: 992px) {
- .modelo-z {
- grid-column: 2 / 3;
- grid-row: 1 / 3;
- background-size: 25rem;
- }
- .modelo-z h3 {
- font-size: 4rem;
- }
- }
- .modelo-z .precio {
- font-size: 6rem;
- }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement