.exhibit-card { box-sizing: border-box; height: $exhibit-card-height; margin-bottom: 2rem; // image width + gutter + border (x2) max-width: $exhibit-card-image-size + $exhibit-card-gutter + 2px; padding-right: ($exhibit-card-gutter / 2) !important; perspective: 1000; // for flip animation position: relative; .flipper { position: relative; transform-style: preserve-3d; transition: 0.6s; } &.hover .flipper, &:hover .flipper { -ms-filter: "FlipH"; // autoprefixer doesn't handle this case. filter: FlipH; transform: rotateY(180deg); } } .card-face { backface-visibility: hidden; background-color: $exhibit-card-bg; border: 1px solid $exhibit-card-border; height: $exhibit-card-height; left: 0; position: absolute; top: 0; transform-style: preserve-3d; transition: 0.6s; width: 100%; } .exhibit-card-title { @extend .h5; @extend .text-center; font-size: $h4-font-size; line-height: 1.2; margin-bottom: 10px; margin-top: 10px; } .card-front { transform: rotateY(0deg); z-index: 2; img { height: $exhibit-card-image-size; object-fit: cover; width: 100%; } .exhibit-card-title { @extend .h5; padding-left: $padding-small-horizontal; padding-right: $padding-small-horizontal; } .unpublished { @extend .mx-auto; display: block; font-size: $font-size-base; margin-top: -1em; position: relative; width: 15ch; } } .card-back { box-shadow: $exhibit-card-shadow; padding: 0 $exhibit-card-gutter; transform: rotateY(-180deg); .card-title { @extend .h5; @extend .text-center; border-bottom: 1px dotted $exhibit-card-border; line-height: $headings-line-height; margin-bottom: $padding-base-vertical; padding-bottom: $padding-base-vertical; padding-top: $padding-base-vertical; } .subtitle { @extend .h5; @extend .text-center; font-size: 0.875rem; line-height: $headings-line-height; } .description { font-size: 0.75rem; } .visit-exhibit { bottom: $exhibit-card-gutter; position: absolute; } } // between the small and medium breakpoints, reduce the size of the image by a little bit @media (min-width: breakpoint-min("sm")) and (max-width: breakpoint-max("lg")) { // calculate the size of one full grid column $reduce-exhibit-card-image-size: (((map-get($container-max-widths, "md") - $grid-gutter-width) / $grid-columns) - ($grid-gutter-width / 2)); .exhibit-card, .card-face { height: $exhibit-card-height - $reduce-exhibit-card-image-size; } .card-front, .card-back { img { height: $exhibit-card-image-size - $reduce-exhibit-card-image-size; } } } .center-btn { left: 50%; position: absolute; .btn { left: -50%; position: relative; } } // For the medium breakpoint, reduce the max width of the .exhibit-card to align right-edge of row correctly @media (min-width: breakpoint-min("md")) and (max-width: breakpoint-max("lg")) { .exhibit-card { // each card is 3 columns wide max-width: 3 * (map-get($container-max-widths, "lg") / $grid-columns) - 5px; } } // For the small breakpoint, reduce the max width of the .exhibit-card to align right-edge of row correctly @media (min-width: breakpoint-min("sm")) and (max-width: breakpoint-max("md")) { .exhibit-card { // each card is 6 columns wide max-width: 6 * (map-get($container-max-widths, "md") / $grid-columns) - 5px; } }