/**
 * Image styles
 */
$spacer: 1rem !default;

img {
    max-width: 100%;
}

img.circle {
    border-radius: 500px;
    margin-top: 0;
}

img.bordered {
    border: #ccc 1px solid;
}

.img-circular {
    display: inline-block;
    width: 200px;
    height: 200px;
    position: relative;
    overflow: hidden;
    border-radius: 50%;
}

.img-circular img {
    display: inline;
    margin: 0 auto;
    height: 100%;
    width: auto;
}

.image-wrapper {
    position: relative;
    padding-top: 100%;
}

.image-wrapper > img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}


.image-ratio-16-9 {
    padding-top: 56.25%;
}

.image-ratio-4-3 {
    padding-top: 75%;
}

.image-ratio-4-6 {
    padding-top: 150%;
}

.image-ratio-4-6-spacer {
    padding-top: calc(150% + #{$spacer * 1.5});
}

.image-ratio-3-4 {
    padding-top: 133.33%;
}

.image-ratio-9-16 {
    padding-top: 177.78%;
}

.image-ratio-25-9 {
    padding-top: calc(900% / 25);
}