.obj-cover {
    object-fit: cover!important;
}
.obj-contain {
    object-fit: contain!important;
}

.w-60 {
    width: 60%;
}

.ratio {
    position: relative;
    width: 100%;
}
.ratio.ratio-a-type {
    --aspect-ratio: 210/297;
    --aspect-ratio-percent: 141.42%;
}
.ratio.ratio-1x1 {
    --aspect-ratio: 1/1;
    --aspect-ratio-percent: 100%
}
.ratio.ratio-4x3 {
    --aspect-ratio: 4/3;
    --aspect-ratio-percent: calc(3 / 4 * 100%)  /* 75% */
}
.ratio.ratio-3x2 {
    --aspect-ratio: 3/2;
    --aspect-ratio-percent: calc(2 / 3 * 100%)  /* 66.666667% */
}
.ratio.ratio-8x5 {
    --aspect-ratio: 8/5;
    --aspect-ratio-percent: calc(5 / 8 * 100%)  /* 62.5% */
}
.ratio.ratio-16x9 {
    --aspect-ratio: 16/9;
    --aspect-ratio-percent: calc(9 / 16 * 100%) /* 56.25% */
}
.ratio.ratio-21x9 {
    --aspect-ratio: 21/9;
    --aspect-ratio-percent: calc(9 / 21 * 100%) /* 42.857143% */
}
.ratio.ratio-2x1 {
    --aspect-ratio: 2/1;
    --aspect-ratio-percent: 50%
}
.ratio > * {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
@supports (aspect-ratio: 1/1) {
    .ratio, img.ratio {
        aspect-ratio: var(--aspect-ratio);
    }
}
@supports not (aspect-ratio: 1/1) {
    .ratio::before {
        display: block;
        padding-top: var(--aspect-ratio-percent);
        content: "";
    }
    img.ratio {
        height: var(--aspect-ratio-percent);
    }
}

@media (min-width: 768px) {
    .h-md-100 {
        height: 100%!important;
    }
    .position-md-relative {
        position: relative!important;
    }
    .position-md-absolute {
        position: absolute!important;
    }
}