/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* container query */

.tri-img-content {
    container-type: inline-size;
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/*row*/

.tri-img-content__row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* triangles */

.tri-img-content__tri {
    position: relative;
    width: 100%;
    height: auto;
    aspect-ratio: 474.19 / 528.79;
    overflow: hidden;
}

.tri-img-content__tri__image {
    position: relative;
    width: 100%;
    height: 100%;
}

.tri-img-content__tri__image img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;

    /* Prevent sub-pixel rendering gaps */
    transform: translateZ(0);
    backface-visibility: hidden;
}

.tri-img-content__tri__image .icon.triangle-right-cutout {
    position: absolute;
    top: -3px;
    left: -3px;
    right: -3px;
    bottom: -3px;
    width: auto;
    height: auto;
    pointer-events: none;

    /* Prevent sub-pixel lines by forcing GPU rendering and adding a tiny scale overlap */
    transform: translateZ(0) scale(1.01);
    backface-visibility: hidden;
}

.tri-img-content__tri__image .icon.triangle-right-cutout svg {
    display: block;
    width: 100%;
    height: 100%;
    color: var(--white);
}

/*decorations*/
.tri-img-content__tri__decoration {
    position: absolute;
    z-index: 2;

    width: 25%;
    height: auto;
}

.tri-img-content__tri__decoration svg {
    width: 100%;
    height: 100%;
    color: var(--blue-lt);
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* content */

.tri-img-content__header.section-header {
    margin-bottom: 15px;
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* VARIATION: tri content tri */

/*row*/
.tri-img-content--tri-content-tri .tri-img-content__row {
    gap: 2.5%;
}

/*content*/
.tri-img-content--tri-content-tri .tri-img-content__content-wrapper {
    flex: 0 0 53%;
}

.tri-img-content--tri-content-tri .tri-img-content__header.section-header,
.tri-img-content--tri-content-tri .tri-img-content__content {
    text-align: center;
}

.tri-img-content--tri-content-tri .tri-img-content__buttons .button-row {
    justify-content: center;
}

/*triangles*/
.tri-img-content--tri-content-tri .tri-img-content__tris-wrapper:first-child {
    flex: 0 0 20%;

    margin-bottom: 120px;
}

.tri-img-content--tri-content-tri .tri-img-content__tris-wrapper:last-child {
    flex: 0 0 22%;

    margin-top: 120px;
    padding-left: 3%;
}

/*decoration*/
.tri-img-content--tri-content-tri .tri-img-content__tris-wrapper .tri-img-content__tri__decoration {
    bottom: 15%;
    right: 18%;
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* VARIATION: tri content */

/*row*/
.tri-img-content--tri-content .tri-img-content__row {
    gap: 12%;
}

/*content*/
.tri-img-content--tri-content .tri-img-content__row .tri-img-content__content-wrapper {
    flex: 0 0 54%;
}

/*triangles*/
.tri-img-content--tri-content .tri-img-content__tris-wrapper {
    flex: 0 0 34%;
}

.tri-img-content--tri-content .tri-img-content__tris-wrapper .tri-img-content__tri__decoration {
    bottom: 15%;
    right: 18%;
}

/*decoration*/
.tri-img-content--tri-content .tri-img-content__tris-wrapper .tri-img-content__tri__decoration {
    bottom: 15%;
    right: 18%;
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* VARIATION: tri tri content */

/*row*/
.tri-img-content--tri-tri-content .tri-img-content__row {
    gap: 3%;
    align-items: start;
}

/*content*/
.tri-img-content--tri-tri-content .tri-img-content__row .tri-img-content__content-wrapper {
    flex: 0 0 41%;
}

/*triangles*/
.tri-img-content--tri-tri-content .tri-img-content__tris-wrapper {
    flex: 0 0 56%;
}

.tri-img-content--tri-tri-content .tri-img-content__tris-wrapper {
    display: flex;
    gap: 40px;
}

.tri-img-content--tri-tri-content .tri-img-content__tris-wrapper .tri-img-content__tri {
    flex: 0 0 calc(50% - 20px);
}

.tri-img-content--tri-tri-content .tri-img-content__tris-wrapper .tri-img-content__tri--1 {
    margin-bottom: 75px;
}

.tri-img-content--tri-tri-content .tri-img-content__tris-wrapper .tri-img-content__tri--2 {
    margin-top: 75px;
}

/*decoration*/
.tri-img-content--tri-tri-content .tri-img-content__tris-wrapper .tri-img-content__tri.tri-img-content__tri--1 .tri-img-content__tri__decoration {
    bottom: 15%;
    right: 18%;
}

.tri-img-content--tri-tri-content .tri-img-content__tris-wrapper .tri-img-content__tri.tri-img-content__tri--2 .tri-img-content__tri__decoration {
    top: 6%;
    right: 18%;
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* CONTAINER QUERIES - MOBILE */

@container (max-width: 915px) {
    .tri-img-content__row {
        flex-direction: column;
    }

    /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
    /* VARIATION: tri content tri */

    /*content*/
    .tri-img-content--tri-content-tri .tri-img-content__content-wrapper {
        order: -1;
        flex: 0 0 100%;
        margin-bottom: 30px;
    }

    /*triangles*/
    .tri-img-content--tri-content-tri .tri-img-content__tris-wrapper:first-child,
    .tri-img-content--tri-content-tri .tri-img-content__tris-wrapper:last-child {
        width: 100%;
        max-width: 450px;
        margin: 0;
    }

    .tri-img-content--tri-content-tri .tri-img-content__tri.tri-img-content__tri--1 {
        width: 60%;
        height: auto;
        margin-right: 40%;
    }

    .tri-img-content--tri-content-tri .tri-img-content__tri.tri-img-content__tri--2 {
        width: 65%;
        height: auto;
        margin-left: 35%;
    }

    /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
    /* VARIATION: tri content */

    /*row*/
    .tri-img-content--tri-content .tri-img-content__row {
        align-items: start;
    }

    /*triangles*/
    .tri-img-content--tri-content .tri-img-content__tris-wrapper {
        order: -1;
        width: 100%;
        max-width: 450px;
        margin-bottom: 30px;
    }

    .tri-img-content--tri-content .tri-img-content__tri {
        width: 70%;
        height: auto;
        margin-right: 30%;
    }

    /*content*/
    .tri-img-content--tri-content .tri-img-content__content-wrapper {
        margin: 0;
    }

    /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
    /* VARIATION: tri tri content */

    /*triangles*/
    .tri-img-content--tri-tri-content .tri-img-content__tris-wrapper {
        order: -1;
        width: 100%;
        max-width: 450px;
        margin-bottom: 30px;
    }

    /*content*/
    .tri-img-content--tri-tri-content .tri-img-content__content-wrapper {
        margin: 0;
    }
}