/*
 * Image-frame height as a percentage of frame width.
 *
 * Legacy AQC shells expressed this with a zero-height aqc-image hNNp
 * box and padding-bottom, while the image itself was absolutely positioned.
 * Strict palette widgets render a normal-flow image, so padding would add
 * blank space below the image. aspect-ratio preserves the same frame geometry:
 * imgc-heightpc-120 means width:height = 100:120.
 */
.imgc-heightpc-30, .imgc-heightpc-30 .w { --aqc-image-frame-height: 30%; aspect-ratio: 100 / 30 !important }
.imgc-heightpc-40, .imgc-heightpc-40 .w { --aqc-image-frame-height: 40%; aspect-ratio: 100 / 40 !important }
.imgc-heightpc-50, .imgc-heightpc-50 .w { --aqc-image-frame-height: 50%; aspect-ratio: 100 / 50 !important }
.imgc-heightpc-60, .imgc-heightpc-60 .w { --aqc-image-frame-height: 60%; aspect-ratio: 100 / 60 !important }
.imgc-heightpc-70, .imgc-heightpc-70 .w { --aqc-image-frame-height: 70%; aspect-ratio: 100 / 70 !important }
.imgc-heightpc-80, .imgc-heightpc-80 .w { --aqc-image-frame-height: 80%; aspect-ratio: 100 / 80 !important }
.imgc-heightpc-90, .imgc-heightpc-90 .w { --aqc-image-frame-height: 90%; aspect-ratio: 100 / 90 !important }
.imgc-heightpc-100, .imgc-heightpc-100 .w { --aqc-image-frame-height: 100%; aspect-ratio: 100 / 100 !important }
.imgc-heightpc-110, .imgc-heightpc-110 .w { --aqc-image-frame-height: 110%; aspect-ratio: 100 / 110 !important }
.imgc-heightpc-120, .imgc-heightpc-120 .w { --aqc-image-frame-height: 120%; aspect-ratio: 100 / 120 !important }
.imgc-heightpc-130, .imgc-heightpc-130 .w { --aqc-image-frame-height: 130%; aspect-ratio: 100 / 130 !important }
.imgc-heightpc-140, .imgc-heightpc-140 .w { --aqc-image-frame-height: 140%; aspect-ratio: 100 / 140 !important }
.imgc-heightpc-150, .imgc-heightpc-150 .w { --aqc-image-frame-height: 150%; aspect-ratio: 100 / 150 !important }
.imgc-heightpc-160, .imgc-heightpc-160 .w { --aqc-image-frame-height: 160%; aspect-ratio: 100 / 160 !important }
.imgc-heightpc-170, .imgc-heightpc-170 .w { --aqc-image-frame-height: 170%; aspect-ratio: 100 / 170 !important }
.imgc-heightpc-180, .imgc-heightpc-180 .w { --aqc-image-frame-height: 180%; aspect-ratio: 100 / 180 !important }
.imgc-heightpc-190, .imgc-heightpc-190 .w { --aqc-image-frame-height: 190%; aspect-ratio: 100 / 190 !important }
.imgc-heightpc-200, .imgc-heightpc-200 .w { --aqc-image-frame-height: 200%; aspect-ratio: 100 / 200 !important }
.imgc-heightpc-220, .imgc-heightpc-220 .w { --aqc-image-frame-height: 220%; aspect-ratio: 100 / 220 !important }
.imgc-heightpc-240, .imgc-heightpc-240 .w { --aqc-image-frame-height: 240%; aspect-ratio: 100 / 240 !important }

@media (min-width: 576px) {
    .imgc-heightpc-sm-30, .imgc-heightpc-sm-30 .w { --aqc-image-frame-height: 30%; aspect-ratio: 100 / 30 !important }
    .imgc-heightpc-sm-40, .imgc-heightpc-sm-40 .w { --aqc-image-frame-height: 40%; aspect-ratio: 100 / 40 !important }
    .imgc-heightpc-sm-50, .imgc-heightpc-sm-50 .w { --aqc-image-frame-height: 50%; aspect-ratio: 100 / 50 !important }
    .imgc-heightpc-sm-60, .imgc-heightpc-sm-60 .w { --aqc-image-frame-height: 60%; aspect-ratio: 100 / 60 !important }
    .imgc-heightpc-sm-70, .imgc-heightpc-sm-70 .w { --aqc-image-frame-height: 70%; aspect-ratio: 100 / 70 !important }
    .imgc-heightpc-sm-80, .imgc-heightpc-sm-80 .w { --aqc-image-frame-height: 80%; aspect-ratio: 100 / 80 !important }
    .imgc-heightpc-sm-90, .imgc-heightpc-sm-90 .w { --aqc-image-frame-height: 90%; aspect-ratio: 100 / 90 !important }
    .imgc-heightpc-sm-100, .imgc-heightpc-sm-100 .w { --aqc-image-frame-height: 100%; aspect-ratio: 100 / 100 !important }
    .imgc-heightpc-sm-110, .imgc-heightpc-sm-110 .w { --aqc-image-frame-height: 110%; aspect-ratio: 100 / 110 !important }
    .imgc-heightpc-sm-120, .imgc-heightpc-sm-120 .w { --aqc-image-frame-height: 120%; aspect-ratio: 100 / 120 !important }
    .imgc-heightpc-sm-130, .imgc-heightpc-sm-130 .w { --aqc-image-frame-height: 130%; aspect-ratio: 100 / 130 !important }
    .imgc-heightpc-sm-140, .imgc-heightpc-sm-140 .w { --aqc-image-frame-height: 140%; aspect-ratio: 100 / 140 !important }
    .imgc-heightpc-sm-150, .imgc-heightpc-sm-150 .w { --aqc-image-frame-height: 150%; aspect-ratio: 100 / 150 !important }
    .imgc-heightpc-sm-160, .imgc-heightpc-sm-160 .w { --aqc-image-frame-height: 160%; aspect-ratio: 100 / 160 !important }
    .imgc-heightpc-sm-170, .imgc-heightpc-sm-170 .w { --aqc-image-frame-height: 170%; aspect-ratio: 100 / 170 !important }
    .imgc-heightpc-sm-180, .imgc-heightpc-sm-180 .w { --aqc-image-frame-height: 180%; aspect-ratio: 100 / 180 !important }
    .imgc-heightpc-sm-190, .imgc-heightpc-sm-190 .w { --aqc-image-frame-height: 190%; aspect-ratio: 100 / 190 !important }
    .imgc-heightpc-sm-200, .imgc-heightpc-sm-200 .w { --aqc-image-frame-height: 200%; aspect-ratio: 100 / 200 !important }
    .imgc-heightpc-sm-220, .imgc-heightpc-sm-220 .w { --aqc-image-frame-height: 220%; aspect-ratio: 100 / 220 !important }
    .imgc-heightpc-sm-240, .imgc-heightpc-sm-240 .w { --aqc-image-frame-height: 240%; aspect-ratio: 100 / 240 !important }
}

@media (min-width: 768px) {
    .imgc-heightpc-md-30, .imgc-heightpc-md-30 .w { --aqc-image-frame-height: 30%; aspect-ratio: 100 / 30 !important }
    .imgc-heightpc-md-40, .imgc-heightpc-md-40 .w { --aqc-image-frame-height: 40%; aspect-ratio: 100 / 40 !important }
    .imgc-heightpc-md-50, .imgc-heightpc-md-50 .w { --aqc-image-frame-height: 50%; aspect-ratio: 100 / 50 !important }
    .imgc-heightpc-md-60, .imgc-heightpc-md-60 .w { --aqc-image-frame-height: 60%; aspect-ratio: 100 / 60 !important }
    .imgc-heightpc-md-70, .imgc-heightpc-md-70 .w { --aqc-image-frame-height: 70%; aspect-ratio: 100 / 70 !important }
    .imgc-heightpc-md-80, .imgc-heightpc-md-80 .w { --aqc-image-frame-height: 80%; aspect-ratio: 100 / 80 !important }
    .imgc-heightpc-md-90, .imgc-heightpc-md-90 .w { --aqc-image-frame-height: 90%; aspect-ratio: 100 / 90 !important }
    .imgc-heightpc-md-100, .imgc-heightpc-md-100 .w { --aqc-image-frame-height: 100%; aspect-ratio: 100 / 100 !important }
    .imgc-heightpc-md-110, .imgc-heightpc-md-110 .w { --aqc-image-frame-height: 110%; aspect-ratio: 100 / 110 !important }
    .imgc-heightpc-md-120, .imgc-heightpc-md-120 .w { --aqc-image-frame-height: 120%; aspect-ratio: 100 / 120 !important }
    .imgc-heightpc-md-130, .imgc-heightpc-md-130 .w { --aqc-image-frame-height: 130%; aspect-ratio: 100 / 130 !important }
    .imgc-heightpc-md-140, .imgc-heightpc-md-140 .w { --aqc-image-frame-height: 140%; aspect-ratio: 100 / 140 !important }
    .imgc-heightpc-md-150, .imgc-heightpc-md-150 .w { --aqc-image-frame-height: 150%; aspect-ratio: 100 / 150 !important }
    .imgc-heightpc-md-160, .imgc-heightpc-md-160 .w { --aqc-image-frame-height: 160%; aspect-ratio: 100 / 160 !important }
    .imgc-heightpc-md-170, .imgc-heightpc-md-170 .w { --aqc-image-frame-height: 170%; aspect-ratio: 100 / 170 !important }
    .imgc-heightpc-md-180, .imgc-heightpc-md-180 .w { --aqc-image-frame-height: 180%; aspect-ratio: 100 / 180 !important }
    .imgc-heightpc-md-190, .imgc-heightpc-md-190 .w { --aqc-image-frame-height: 190%; aspect-ratio: 100 / 190 !important }
    .imgc-heightpc-md-200, .imgc-heightpc-md-200 .w { --aqc-image-frame-height: 200%; aspect-ratio: 100 / 200 !important }
    .imgc-heightpc-md-220, .imgc-heightpc-md-220 .w { --aqc-image-frame-height: 220%; aspect-ratio: 100 / 220 !important }
    .imgc-heightpc-md-240, .imgc-heightpc-md-240 .w { --aqc-image-frame-height: 240%; aspect-ratio: 100 / 240 !important }
}

@media (min-width: 992px) {
    .imgc-heightpc-lg-30, .imgc-heightpc-lg-30 .w { --aqc-image-frame-height: 30%; aspect-ratio: 100 / 30 !important }
    .imgc-heightpc-lg-40, .imgc-heightpc-lg-40 .w { --aqc-image-frame-height: 40%; aspect-ratio: 100 / 40 !important }
    .imgc-heightpc-lg-50, .imgc-heightpc-lg-50 .w { --aqc-image-frame-height: 50%; aspect-ratio: 100 / 50 !important }
    .imgc-heightpc-lg-60, .imgc-heightpc-lg-60 .w { --aqc-image-frame-height: 60%; aspect-ratio: 100 / 60 !important }
    .imgc-heightpc-lg-70, .imgc-heightpc-lg-70 .w { --aqc-image-frame-height: 70%; aspect-ratio: 100 / 70 !important }
    .imgc-heightpc-lg-80, .imgc-heightpc-lg-80 .w { --aqc-image-frame-height: 80%; aspect-ratio: 100 / 80 !important }
    .imgc-heightpc-lg-90, .imgc-heightpc-lg-90 .w { --aqc-image-frame-height: 90%; aspect-ratio: 100 / 90 !important }
    .imgc-heightpc-lg-100, .imgc-heightpc-lg-100 .w { --aqc-image-frame-height: 100%; aspect-ratio: 100 / 100 !important }
    .imgc-heightpc-lg-110, .imgc-heightpc-lg-110 .w { --aqc-image-frame-height: 110%; aspect-ratio: 100 / 110 !important }
    .imgc-heightpc-lg-120, .imgc-heightpc-lg-120 .w { --aqc-image-frame-height: 120%; aspect-ratio: 100 / 120 !important }
    .imgc-heightpc-lg-130, .imgc-heightpc-lg-130 .w { --aqc-image-frame-height: 130%; aspect-ratio: 100 / 130 !important }
    .imgc-heightpc-lg-140, .imgc-heightpc-lg-140 .w { --aqc-image-frame-height: 140%; aspect-ratio: 100 / 140 !important }
    .imgc-heightpc-lg-150, .imgc-heightpc-lg-150 .w { --aqc-image-frame-height: 150%; aspect-ratio: 100 / 150 !important }
    .imgc-heightpc-lg-160, .imgc-heightpc-lg-160 .w { --aqc-image-frame-height: 160%; aspect-ratio: 100 / 160 !important }
    .imgc-heightpc-lg-170, .imgc-heightpc-lg-170 .w { --aqc-image-frame-height: 170%; aspect-ratio: 100 / 170 !important }
    .imgc-heightpc-lg-180, .imgc-heightpc-lg-180 .w { --aqc-image-frame-height: 180%; aspect-ratio: 100 / 180 !important }
    .imgc-heightpc-lg-190, .imgc-heightpc-lg-190 .w { --aqc-image-frame-height: 190%; aspect-ratio: 100 / 190 !important }
    .imgc-heightpc-lg-200, .imgc-heightpc-lg-200 .w { --aqc-image-frame-height: 200%; aspect-ratio: 100 / 200 !important }
    .imgc-heightpc-lg-220, .imgc-heightpc-lg-220 .w { --aqc-image-frame-height: 220%; aspect-ratio: 100 / 220 !important }
    .imgc-heightpc-lg-240, .imgc-heightpc-lg-240 .w { --aqc-image-frame-height: 240%; aspect-ratio: 100 / 240 !important }
}

@media (min-width: 1200px) {
    .imgc-heightpc-xl-30, .imgc-heightpc-xl-30 .w { --aqc-image-frame-height: 30%; aspect-ratio: 100 / 30 !important }
    .imgc-heightpc-xl-40, .imgc-heightpc-xl-40 .w { --aqc-image-frame-height: 40%; aspect-ratio: 100 / 40 !important }
    .imgc-heightpc-xl-50, .imgc-heightpc-xl-50 .w { --aqc-image-frame-height: 50%; aspect-ratio: 100 / 50 !important }
    .imgc-heightpc-xl-60, .imgc-heightpc-xl-60 .w { --aqc-image-frame-height: 60%; aspect-ratio: 100 / 60 !important }
    .imgc-heightpc-xl-70, .imgc-heightpc-xl-70 .w { --aqc-image-frame-height: 70%; aspect-ratio: 100 / 70 !important }
    .imgc-heightpc-xl-80, .imgc-heightpc-xl-80 .w { --aqc-image-frame-height: 80%; aspect-ratio: 100 / 80 !important }
    .imgc-heightpc-xl-90, .imgc-heightpc-xl-90 .w { --aqc-image-frame-height: 90%; aspect-ratio: 100 / 90 !important }
    .imgc-heightpc-xl-100, .imgc-heightpc-xl-100 .w { --aqc-image-frame-height: 100%; aspect-ratio: 100 / 100 !important }
    .imgc-heightpc-xl-110, .imgc-heightpc-xl-110 .w { --aqc-image-frame-height: 110%; aspect-ratio: 100 / 110 !important }
    .imgc-heightpc-xl-120, .imgc-heightpc-xl-120 .w { --aqc-image-frame-height: 120%; aspect-ratio: 100 / 120 !important }
    .imgc-heightpc-xl-130, .imgc-heightpc-xl-130 .w { --aqc-image-frame-height: 130%; aspect-ratio: 100 / 130 !important }
    .imgc-heightpc-xl-140, .imgc-heightpc-xl-140 .w { --aqc-image-frame-height: 140%; aspect-ratio: 100 / 140 !important }
    .imgc-heightpc-xl-150, .imgc-heightpc-xl-150 .w { --aqc-image-frame-height: 150%; aspect-ratio: 100 / 150 !important }
    .imgc-heightpc-xl-160, .imgc-heightpc-xl-160 .w { --aqc-image-frame-height: 160%; aspect-ratio: 100 / 160 !important }
    .imgc-heightpc-xl-170, .imgc-heightpc-xl-170 .w { --aqc-image-frame-height: 170%; aspect-ratio: 100 / 170 !important }
    .imgc-heightpc-xl-180, .imgc-heightpc-xl-180 .w { --aqc-image-frame-height: 180%; aspect-ratio: 100 / 180 !important }
    .imgc-heightpc-xl-190, .imgc-heightpc-xl-190 .w { --aqc-image-frame-height: 190%; aspect-ratio: 100 / 190 !important }
    .imgc-heightpc-xl-200, .imgc-heightpc-xl-200 .w { --aqc-image-frame-height: 200%; aspect-ratio: 100 / 200 !important }
    .imgc-heightpc-xl-220, .imgc-heightpc-xl-220 .w { --aqc-image-frame-height: 220%; aspect-ratio: 100 / 220 !important }
    .imgc-heightpc-xl-240, .imgc-heightpc-xl-240 .w { --aqc-image-frame-height: 240%; aspect-ratio: 100 / 240 !important }
}

@media (min-width: 1400px) {
    .imgc-heightpc-xxl-30, .imgc-heightpc-xxl-30 .w { --aqc-image-frame-height: 30%; aspect-ratio: 100 / 30 !important }
    .imgc-heightpc-xxl-40, .imgc-heightpc-xxl-40 .w { --aqc-image-frame-height: 40%; aspect-ratio: 100 / 40 !important }
    .imgc-heightpc-xxl-50, .imgc-heightpc-xxl-50 .w { --aqc-image-frame-height: 50%; aspect-ratio: 100 / 50 !important }
    .imgc-heightpc-xxl-60, .imgc-heightpc-xxl-60 .w { --aqc-image-frame-height: 60%; aspect-ratio: 100 / 60 !important }
    .imgc-heightpc-xxl-70, .imgc-heightpc-xxl-70 .w { --aqc-image-frame-height: 70%; aspect-ratio: 100 / 70 !important }
    .imgc-heightpc-xxl-80, .imgc-heightpc-xxl-80 .w { --aqc-image-frame-height: 80%; aspect-ratio: 100 / 80 !important }
    .imgc-heightpc-xxl-90, .imgc-heightpc-xxl-90 .w { --aqc-image-frame-height: 90%; aspect-ratio: 100 / 90 !important }
    .imgc-heightpc-xxl-100, .imgc-heightpc-xxl-100 .w { --aqc-image-frame-height: 100%; aspect-ratio: 100 / 100 !important }
    .imgc-heightpc-xxl-110, .imgc-heightpc-xxl-110 .w { --aqc-image-frame-height: 110%; aspect-ratio: 100 / 110 !important }
    .imgc-heightpc-xxl-120, .imgc-heightpc-xxl-120 .w { --aqc-image-frame-height: 120%; aspect-ratio: 100 / 120 !important }
    .imgc-heightpc-xxl-130, .imgc-heightpc-xxl-130 .w { --aqc-image-frame-height: 130%; aspect-ratio: 100 / 130 !important }
    .imgc-heightpc-xxl-140, .imgc-heightpc-xxl-140 .w { --aqc-image-frame-height: 140%; aspect-ratio: 100 / 140 !important }
    .imgc-heightpc-xxl-150, .imgc-heightpc-xxl-150 .w { --aqc-image-frame-height: 150%; aspect-ratio: 100 / 150 !important }
    .imgc-heightpc-xxl-160, .imgc-heightpc-xxl-160 .w { --aqc-image-frame-height: 160%; aspect-ratio: 100 / 160 !important }
    .imgc-heightpc-xxl-170, .imgc-heightpc-xxl-170 .w { --aqc-image-frame-height: 170%; aspect-ratio: 100 / 170 !important }
    .imgc-heightpc-xxl-180, .imgc-heightpc-xxl-180 .w { --aqc-image-frame-height: 180%; aspect-ratio: 100 / 180 !important }
    .imgc-heightpc-xxl-190, .imgc-heightpc-xxl-190 .w { --aqc-image-frame-height: 190%; aspect-ratio: 100 / 190 !important }
    .imgc-heightpc-xxl-200, .imgc-heightpc-xxl-200 .w { --aqc-image-frame-height: 200%; aspect-ratio: 100 / 200 !important }
    .imgc-heightpc-xxl-220, .imgc-heightpc-xxl-220 .w { --aqc-image-frame-height: 220%; aspect-ratio: 100 / 220 !important }
    .imgc-heightpc-xxl-240, .imgc-heightpc-xxl-240 .w { --aqc-image-frame-height: 240%; aspect-ratio: 100 / 240 !important }
}