@use 'sass:math';

@mixin md-image-aspect-ratio($width, $height) {
  overflow: hidden;

  &::before {
    width: 100%;
    padding-top: math.div($height, $width) * 100%;
    display: block;
    content: ' ';
  }

  img {
    position: absolute;
    top: 50%;
    right: 0;
    left: 0;
    transform: translateY(-50%);
  }
}

.md-card-media {
  position: relative;

  &.md-ratio-16-9 {
    @include md-image-aspect-ratio(16, 9);
  }

  &.md-ratio-4-3 {
    @include md-image-aspect-ratio(4, 3);
  }

  &.md-ratio-1-1 {
    @include md-image-aspect-ratio(1, 1);
  }

  + .md-card-header {
    padding-top: 24px;
  }

  + .md-card-content:last-child {
    padding-bottom: 16px;
  }

  img {
    width: 100%;
  }
}