.container-detail-wrapper {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin-right: auto;
    margin-left: auto;
    box-sizing: border-box;
}

.container-detail-inner {
    width: 100%;
    position: relative;
    box-sizing: border-box;
    transition: max-height 0.4s ease-in-out;
    margin-top: var(--margin-top-desktop, 0px);
}

.container-detail-content-wrap {
    width: 100%;
}

.container-detail-inner.has-read-more.is-collapsed {
    max-height: var(--collapsed-height, 300px);
    overflow: hidden;
}

.container-detail-inner.has-read-more.is-expanded {
    max-height: 10000px;
}

.container-detail-inner .read-more-gradient {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100px;
    background: linear-gradient(to bottom, rgba(240, 244, 248, 0), var(--color-brand-primary-100));
    pointer-events: none;
    z-index: 2;
}

.read-more-btn-wrap {
    display: flex;
    justify-content: center;
    width: 100%;
    margin-top: 15px;
    position: relative;
    z-index: 3;
}

.container-read-more-trigger {
    color: var(--color-red-text-primary);
    background-color: transparent;
    border: 0;
    cursor: pointer;
    text-decoration: underline;
    font-size: 18px;
}

.container-read-more-trigger:hover {
    color: var(--fd-color-red-500);

 }

@media (min-width: 768px) {
    .container-detail-wrapper[data-align="center"] { 
        align-items: center; 
    }
    .container-detail-wrapper[data-align="start"] { 
        align-items: flex-start; 
    }
    .container-detail-wrapper[data-align="end"] { 
        align-items: flex-end; 
    }
}

@media (max-width: 767px) {
    .container-detail-inner {
        margin-top: var(--margin-top-mobile, 0px); 
        max-width: var(--max-width-mobile, 100%) !important;
    }
    .container-detail-wrapper {
        align-items: center !important;
    }
}