Jump to content

Template:CS/products/card/styles.css

From Insurer Brain
/* 2) Template:CS/products/card/styles.css */
.capsach-card{width:100%;max-width:480px;margin:0}
.capsach-align-left{margin-left:0;margin-right:auto;text-align:left}
.capsach-align-center{margin-left:auto;margin-right:auto;text-align:left}
.capsach-align-right{margin-left:auto;margin-right:0;text-align:left}

/* Media area: 2:3 aspect ratio and full-width image */
.capsach-card__media{position:relative;overflow:hidden;border-radius:.75rem;background-color:#f5f6f7}
.capsach-card__ratio{display:block;width:100%;height:0;padding-top:150%} /* 3/2 = 150% */
.capsach-card__media-inner{position:absolute;top:0;right:0;bottom:0;left:0}
.capsach-card__media-inner a{display:block;width:100%;height:100%}
.capsach-card__media-inner img{display:block;position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:cover}

/* Placeholder when no img is provided */
.capsach-card__placeholder{position:absolute;top:0;right:0;bottom:0;left:0;background-image:linear-gradient(180deg,#f2f3f5,#e6e7e9)}

/* CTA */
.capsach-card__cta{margin-top:.5rem}