.blue_block {
    display: block;
    background-color: var(--primary);
    color: var(--white);
    min-height: 0;
}

.blue_block .wrapper {
    display: flex;
    flex-direction: column;
    gap: 5rem calc(var(--col) * 2);
}

.blue_block .upper-part {
    /* width: 50%; */
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-end;
    gap: inherit;
}

.blue_block .headline {
    max-width: 100%;
    width: calc(var(--col) * 10);
}

.blue_block .text {
    max-width: calc(var(--col) * 9);
}

.blue_block .image {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    width: fit-content;
    justify-content: flex-end;
    margin-left: auto;
    width: calc(var(--col) * 13.5);
    max-width: 100%;
    gap: calc(var(--col) * 0.5);
}


.blue_block .image::before {
  content: "";
  display: block;
  width: calc(var(--col) * 3); /*28rem;*/
  height: calc(var(--col) * (3 / 28 * 24)); /*24rem;*/
  background-image: url("../../../custom/images/arrow_white_down.svg");
  background-repeat: no-repeat;
  background-size: contain;
}



.blue_block .wrapper[data-layout="image"] .image::before {
  content: "";
  display: block;
  width: 13vw;
  height: 12vw;
  background-image: url("../../../custom/images/arrow_white_down.svg");
  background-repeat: no-repeat;
  background-size: contain;

  transform: rotate(95deg);
    margin-left: auto;

    margin-right: calc(0px - (100vw - (var(--outside-padding-inner) * 2)) * .05);
    margin-top: 3rem;
}

.blue_block img {
    max-width: calc(var(--col) * 10);
    height: auto;
    max-height: 60vh;
    border-radius: 13px;
    /* margin-right: auto; */
    object-fit: cover;
}


.blue_block .wrapper[data-layout="image"] .image {
    display: grid;
    grid-auto-rows: auto;
    /* max-width: 50%; */
    margin-left: 0;
    width: min-content;
}


/* .blue_block .wrapper[data-layout="image"] .image::before {
  content: none;
}

.blue_block .wrapper[data-layout="image"] .image::after {
  content: "";
  display: block;
  width: 28rem;
  height: 24rem;
  background-image: url("../../../custom/images/arrow_white_down.svg");
  background-repeat: no-repeat;
  background-size: contain;
} */


.blue_block .wrapper[data-layout="image"] figure.has_caption::after {
    content: "";
    grid-area: 2 / 1;
    background: linear-gradient(to top, rgba(0, 0, 0, 1) 0%, transparent 60%);
    z-index: 0;
    height: 100%;
    width: auto;
    border-bottom-left-radius: 13px;
    border-bottom-right-radius: 13px;
}


.blue_block .wrapper[data-layout="image"] .upper-part {
    width: calc(var(--col) * 6);
    align-items: flex-start;
}

.blue_block .wrapper[data-layout="image"] img {
    /* max-height: none; */
        max-height: 80vh;
        width: max-content;
        
        max-width: calc(var(--col) * 11);
        object-fit: contain;
}

.blue_block .wrapper[data-layout="image"] figure img {
    grid-area: 2 / 1;
}

.blue_block .wrapper[data-layout="image"] figure figcaption {
    grid-area: 2 / 1;
}

.blue_block .wrapper[data-layout="image"] {
    flex-direction: row-reverse;
    justify-content: flex-end;

}

.blue_block .wrapper[data-layout="image"] > * {
    flex-direction: column;
    justify-content: flex-start;
}

.blue_block .wrapper[data-layout="image"] > * > *{
    width: auto;
    max-width: 100%;
}

/* MOBILES STYLING */

@media screen and (max-width: 1520px) {
.blue_block .wrapper[data-layout="image"] {
    gap: 5rem 5%;
}
    
}


@media screen and (max-width: 1420px) {
    .blue_block .wrapper[data-layout="image"] {
    display: flex;
    flex-direction: column;
    }

    .blue_block .wrapper[data-layout="image"] .upper-part {
    width: 100%;
}

.blue_block .wrapper[data-layout="image"] .image::before {
    content: none;
}

.blue_block .wrapper[data-layout="image"] .image {
    gap: 0;
    width: 100%;
}

.blue_block .wrapper[data-layout="image"] figure img {
    grid-area: 2 / 1;
    width: 100%;
    object-fit: cover;
    max-height: 100vh;
}

.blue_block img,
    .blue_block .wrapper[data-layout="image"] img {
        width: 100%;
        max-width: 100%;
    }

}

@media screen and (max-width: 1280px) {
    .blue_block .upper-part {
        flex-direction: column;
        gap: 5rem;
    }

    .blue_block .headline {
        width: 100%;
    }
    .blue_block .text {
        max-width: 100%;
    }

    .blue_block .image::before {
        display: none;
    }

    /* .blue_block img,
    .blue_block .wrapper[data-layout="image"] img {
        width: 100%;
        max-width: 100%;
    } */

    .blue_block .wrapper[data-layout="image"] .image {
        display: flex;
        flex-direction: column;
    }

}


@media screen and (max-width: 745px) {
    .blue_block .image {
        width: 100%;
    }

    /* .blue_block .headline {
        hyphens: auto;
    } */
}

@media screen and (max-width: 525px) {

.blue_block .wrapper[data-layout="image"] figure figcaption {
    padding: 4rem 0rem;
    display: flex;
    gap: 2rem;
}

.blue_block .wrapper[data-layout="image"] figure figcaption::before {
    content: "";
    display: block;
    width: 60vw;
    height: 9vw;
    background-image: url(../../../custom/images/arrow_white_down.svg);
    background-repeat: no-repeat;
    background-size: contain;
    margin-top: -2rem;
    margin-left: 2rem;
}

}

@media screen and (max-width: 370px) {
.blue_block .wrapper[data-layout="image"] figure figcaption::before {
    content: none;
}
}