:root { --ifx-font-family: "Source Sans 3"; font-family: var(--ifx-font-family, sans-serif); } :host { display: inline-flex; } .card { position: relative; display: inline-flex; flex-direction: column; word-wrap: break-word; background-color: #FFFFFF; background-clip: border-box; border: 1px solid #EEEDED; border-radius: 1px; width: 350px; height: auto; font-family: var(--ifx-font-family); } .card.linkHovered { border-color: #EEEDED; } .card.cardHovered { border-color: #0A8276; } .card.noBtns .vertical .lower__body-wrapper { padding-bottom: 24px; } .card.noBtns .horizontal .lower__body-wrapper { padding-bottom: 24px; } .card .horizontal { display: flex; flex-direction: row; min-height: 218px; } .card .horizontal .card-img { flex: 1; text-decoration: none; } .card .horizontal .card-img.noImage { display: none; } .card .horizontal .card-img ::slotted([slot=img]) { width: 100%; vertical-align: bottom; } .card .horizontal .lower__body-wrapper { flex: 1; display: grid; grid-template-rows: 1fr auto; } .card .horizontal .lower__body-wrapper .upper-body { display: flex; flex-direction: column; text-decoration: none; color: #1D1D1D; padding: 24px 24px 0px 24px; } .card .vertical .upper__body-wrapper { text-decoration: none; color: #1D1D1D; } .card .vertical .upper__body-wrapper .card-img { height: 190px; } .card .vertical .upper__body-wrapper .card-img.noImage { display: none; } .card .vertical .upper__body-wrapper .upper-body { padding: 24px 24px 0px 24px; } .card .vertical .lower__body-wrapper:hover { border-color: #EEEDED; } .card.horizontal { flex-direction: row; width: 538px; } .card.horizontal .card-img { flex: 1; order: 2; } .card.horizontal .card-img ::slotted([slot=img]) { width: 100%; height: 100%; vertical-align: bottom; object-fit: cover; } .card.horizontal.left .horizontal .card-img { order: 1; } .card.horizontal.left .horizontal .lower__body-wrapper { order: 2; } .card:focus, .card:focus-visible, .focus { outline: none; border-color: #0A8276 !important; }