.text-and-media {

}

.text-and-media .container-fluid {
    padding: 32px;
}

.text-and-media .content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    margin: 0 auto;
    width: 100%;
    max-width: 390px;
}

.text-and-media .image {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.text-and-media .content:not(:has(.text)) .image {
    width: 100%;
}

.text-and-media .content:not(:has(.image)) .text {
    width: 100%;
}

.text-and-media .motif {
    position: absolute;
    top: 0;
    left: 0;
    width: 130px;
    height: 130px;
    opacity: 0.6;
    /*mix-blend-mode: overlay;*/
}

.text-and-media .image .img {
    width: 100%;
    max-width: 476px;
    height: 430px;
    object-fit: cover;
}

.text-and-media .image.edge-to-edge .img {
    width: 100%;
    max-width: 100%;
}

.text-and-media .content:not(:has(.text)) .image .img {
    width: 100%;
    max-width: 100%;
    height: 430px;
    object-fit: cover;
}

.text-and-media .video .thumbnail {
    position: relative;
    cursor: pointer;
    margin-bottom: 0;
    padding: 0px;
    border: 0;
    border-radius: 0;
}

.text-and-media .video .thumbnail .play {
    position: absolute;
    inset: 0;
    width: 20%;
    height: 20%;
    margin: auto;
}


.text-and-media .text {
    display: flex;
    flex-direction: column;
    gap: 64px;
}

.text-and-media .text ul,
.text-and-media .text ol {
    margin-block: 0 !important;
    padding-block: 0 !important;
}

.text-and-media .text.center-aligned {
    text-align: center;
}

.text-and-media .text .header {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.text-and-media .text .header .description:has(p) {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.text-and-media .actions {
    display: flex;
    flex-direction: row;
    gap: 32px;
}

.text-and-media .text.center-aligned .actions {
    justify-content: center;
}

/*edge to edge*/
.text-and-media .container-fluid:has(.image.edge-to-edge) {
    padding: 0px;
}

.text-and-media .content:has(.image.edge-to-edge) {
    gap: 0px;
}

.text-and-media .content .image.edge-to-edge p {
    display: none;
}

.text-and-media .content:has(.image.edge-to-edge) .text {
    padding: 32px;
}

@media (min-width: 800px) {

    .text-and-media {

    }

    .text-and-media .content {
        flex-direction: row;
        align-items: center;
        gap: 48px;
    }

    .text-and-media .content:has(.text) .image,
    .text-and-media .content:has(.image) .text {
        width: 100%;
    }

    .text-and-media .content:not(:has(.edge-to-edge)) {
        max-width: 1000px;
    }

    .text-and-media .content:has(.image.edge-to-edge) {
        max-width: 100%;
        width: 100%;
    }

    .text-and-media .content .image.edge-to-edge {
        width: 50%;
    }

    .text-and-media .content:not(:has(.text)) .image.edge-to-edge {
        width: 100%;
    }

    .text-and-media .content:has(.image.edge-to-edge) .text {
        width: 50%;
    }

}