.cita { position: relative; display: flex; align-items: center; justify-content: center; background-color: var(--color-canon-red, #c8102e); color: var(--color-white, #fff); aspect-ratio: 1920 / 1080; padding: var(--space-20, 5rem) var(--space-12, 3rem); overflow: hidden; } .cita__link { display: block; color: inherit; text-decoration: none; width: 100%; } .cita__link:hover, .cita__link:focus { color: inherit; text-decoration: none; } .cita__swiper { width: 100%; overflow: hidden; } .cita__inner { display: grid; grid-template-columns: minmax(260px, 1fr) auto minmax(0, 720px); align-items: center; gap: var(--space-12, 3rem); max-width: 1400px; margin-inline: auto; } .cita__person { text-align: center; } .cita__avatar { width: 123px; height: 123px; border-radius: 9999px; border: 3px solid var(--color-white, #fff); object-fit: cover; margin-inline: auto; margin-bottom: var(--space-4, 1rem); display: block; background-color: rgba(255, 255, 255, 0.15); transition: transform 0.3s ease-out; } .cita__avatar--empty { display: flex; align-items: center; justify-content: center; font-size: 2rem; font-weight: 500; color: var(--color-white, #fff); } .cita__link:hover .cita__avatar { transform: scale(1.04); } .cita__name { font-family: var(--font-heading, "Montserrat", sans-serif); font-size: clamp(1.25rem, 1.5625vw, 1.875rem); font-weight: var(--fw-medium, 500); color: var(--color-white, #fff); margin: 0; line-height: 1.2; } .cita__meta { font-size: clamp(1rem, 1.302vw, 1.5625rem); font-weight: var(--fw-medium, 500); color: var(--color-white, #fff); margin-top: var(--space-2, 0.5rem); line-height: 1.3; } .cita__divider { width: 1px; height: clamp(120px, 9vw, 175px); background-color: var(--color-white, #fff); align-self: center; opacity: 0.85; } .cita__copy { max-width: 700px; } .cita__heading { font-family: var(--font-heading, "Montserrat", sans-serif); font-size: clamp(1.25rem, 1.5625vw, 1.875rem); font-weight: var(--fw-medium, 500); color: var(--color-white, #fff); margin: 0 0 var(--space-4, 1rem); line-height: 1.2; } .cita__body { font-family: var(--font-body, "Montserrat", sans-serif); font-size: clamp(1rem, 1.5625vw, 1.875rem); font-weight: var(--fw-light, 300); line-height: 1.35; color: var(--color-white, #fff); margin: 0; } @media (max-width: 1024px) { .cita__inner { grid-template-columns: 1fr; text-align: center; gap: var(--space-6, 1.5rem); } .cita__divider { width: 80px; height: 1px; margin-inline: auto; } .cita__copy { text-align: center; max-width: 580px; margin-inline: auto; } } @media (max-width: 640px) { .cita { aspect-ratio: auto; max-height: none; min-height: 420px; padding-block: var(--space-12, 3rem); } .cita__avatar { width: 96px; height: 96px; } }