/* Tools
--- Object Fit
--- Aspect Ratios
*/




/*************************
Homepage banner
*************************/
/* adjusting the size to be a little bigger so its proportional with other elements*/

/* TODO 
* need to move this to custom or some other new stylesheet to take priority over uneditable SCSS
*/
.carousel-inner > .item .wrapper {
    max-width: 1350px;
    margin: auto;
}



/*****************************
********* Object Fit **********
******************************/

/* Global Object Fit */
.obj-fit-cover { object-fit: cover; }

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
    .obj-fit-sm-cover { object-fit: cover; }
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
    .obj-fit-md-cover { object-fit: cover; }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
    .obj-fit-lg-cover { object-fit: cover; }
}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
    .obj-fit-xl-cover { object-fit: cover; }
}

/* Extra extra large devices (larger desktops, 1400px and up) */
@media (min-width: 1400px) {
    .obj-fit-xxl-cover { object-fit: cover; }
}



/*****************************
********* Aspect Ratios **********
******************************/

/* Global Aspect Ratios */
.ratio-16x9 { aspect-ratio: 16 / 9; }
.ratio-9x16 { aspect-ratio: 9 / 16; }
.ratio-16x10 { aspect-ratio: 16 / 10; }
.ratio-10x16 { aspect-ratio: 10 / 16; }
.ratio-3x2 { aspect-ratio: 3 / 2; }
.ratio-4x3 { aspect-ratio: 4 / 3; }
.ratio-5x4 { aspect-ratio: 5 / 4; }
.ratio-4x5 { aspect-ratio: 4 / 5; }
.ratio-1x1 { aspect-ratio: 1 / 1; }
.ratio-8x5 { aspect-ratio: 8 / 5; }
.ratio-3x1 { aspect-ratio: 3 / 1; }

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
    .ratio-sm-16x9 { aspect-ratio: 16 / 9; }
    .ratio-sm-9x16 { aspect-ratio: 9 / 16; }
    .ratio-sm-16x10 { aspect-ratio: 16 / 10; }
    .ratio-sm-10x16 { aspect-ratio: 10 / 16; }
    .ratio-sm-3x2 { aspect-ratio: 3 / 2; }
    .ratio-sm-4x3 { aspect-ratio: 4 / 3; }
    .ratio-sm-5x4 { aspect-ratio: 5 / 4; }
    .ratio-sm-4x5 { aspect-ratio: 4 / 5; }
    .ratio-sm-1x1 { aspect-ratio: 1 / 1; }
    .ratio-sm-8x5 { aspect-ratio: 8 / 5; }
    .ratio-sm-3x1 { aspect-ratio: 3 / 1; }
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
    .ratio-md-16x9 { aspect-ratio: 16 / 9; }
    .ratio-md-9x16 { aspect-ratio: 9 / 16; }
    .ratio-md-16x10 { aspect-ratio: 16 / 10; }
    .ratio-md-10x16 { aspect-ratio: 10 / 16; }
    .ratio-md-3x2 { aspect-ratio: 3 / 2; }
    .ratio-md-4x3 { aspect-ratio: 4 / 3; }
    .ratio-md-5x4 { aspect-ratio: 5 / 4; }
    .ratio-md-4x5 { aspect-ratio: 4 / 5; }
    .ratio-md-1x1 { aspect-ratio: 1 / 1; }
    .ratio-md-8x5 { aspect-ratio: 8 / 5; }
    .ratio-md-3x1 { aspect-ratio: 3 / 1; }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
    .ratio-lg-16x9 { aspect-ratio: 16 / 9; }
    .ratio-lg-9x16 { aspect-ratio: 9 / 16; }
    .ratio-lg-16x10 { aspect-ratio: 16 / 10; }
    .ratio-lg-10x16 { aspect-ratio: 10 / 16; }
    .ratio-lg-3x2 { aspect-ratio: 3 / 2; }
    .ratio-lg-4x3 { aspect-ratio: 4 / 3; }
    .ratio-lg-5x4 { aspect-ratio: 5 / 4; }
    .ratio-lg-4x5 { aspect-ratio: 4 / 5; }
    .ratio-lg-1x1 { aspect-ratio: 1 / 1; }
    .ratio-lg-8x5 { aspect-ratio: 8 / 5; }
    .ratio-lg-3x1 { aspect-ratio: 3 / 1; }
}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
    .ratio-xl-16x9 { aspect-ratio: 16 / 9; }
    .ratio-xl-9x16 { aspect-ratio: 9 / 16; }
    .ratio-xl-16x10 { aspect-ratio: 16 / 10; }
    .ratio-xl-10x16 { aspect-ratio: 10 / 16; }
    .ratio-xl-3x2 { aspect-ratio: 3 / 2; }
    .ratio-xl-4x3 { aspect-ratio: 4 / 3; }
    .ratio-xl-5x4 { aspect-ratio: 5 / 4; }
    .ratio-xl-4x5 { aspect-ratio: 4 / 5; }
    .ratio-xl-1x1 { aspect-ratio: 1 / 1; }
    .ratio-xl-8x5 { aspect-ratio: 8 / 5; }
    .ratio-xl-3x1 { aspect-ratio: 3 / 1; }
}

/* Extra extra large devices (larger desktops, 1400px and up) */
@media (min-width: 1400px) {
    .ratio-xxl-16x9 { aspect-ratio: 16 / 9; }
    .ratio-xxl-9x16 { aspect-ratio: 9 / 16; }
    .ratio-xxl-16x10 { aspect-ratio: 16 / 10; }
    .ratio-xxl-10x16 { aspect-ratio: 10 / 16; }
    .ratio-xxl-3x2 { aspect-ratio: 3 / 2; }
    .ratio-xxl-4x3 { aspect-ratio: 4 / 3; }
    .ratio-xxl-5x4 { aspect-ratio: 5 / 4; }
    .ratio-xxl-4x5 { aspect-ratio: 4 / 5; }
    .ratio-xxl-1x1 { aspect-ratio: 1 / 1; }
    .ratio-xxl-8x5 { aspect-ratio: 8 / 5; }
    .ratio-xxl-3x1 { aspect-ratio: 3 / 1; }
}