/*
 * Home page "About" section (".rs-about-six"). The vendor design is built for
 * a 1720px-wide container: a one-line giant faded watermark word
 * (".rs-about-title", 130-200px) with the image + text pulled up over its
 * lower half, and a fixed "410px 880px" grid. In the standard container our
 * longer watermark ("About AKSH Engineering") wrapped onto a second line that
 * disappeared behind the content, and the grid squeezed the image while
 * leaving a wide empty gap before the text.
 *
 * --wm-chars (set inline from the watermark's length) lets the watermark size
 * itself to fit one line of the container, whatever text the admin enters;
 * the overlap is derived from that same size so it always covers the same
 * share of the letters.
 */
.rs-about-six > .container {
    container-type: inline-size;
}

.rs-about-six {
    --wm-size: min(130px, calc(100cqi / (var(--wm-chars, 12) * 0.74)));
}

.rs-about-six .rs-about-title {
    font-size: var(--wm-size);
    white-space: nowrap;
    overflow: hidden;
}

@media only screen and (min-width: 992px) {
    .rs-about-six .rs-about-wrapper {
        grid-template-columns: minmax(0, 410px) minmax(0, 1fr);
        justify-content: stretch;
        gap: 60px;
        margin-top: calc(var(--wm-size) * -0.2);
    }

    .rs-about-six .rs-about-thumb img {
        width: 100%;
    }

    .rs-about-six .rs-about-content-wrapper {
        margin-inline-start: 0;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .rs-about-six .rs-about-wrapper {
        grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
        gap: 40px;
    }
}