/* Styles for Collection Essay Intro/Outro Images */
.pg_collection {

    ._container._main_content {
        max-width: 100% !important;
        padding: 0 1rem;
        display: flex;
        gap: 1rem;
        flex-direction: column;
        align-items: stretch;

        @media (min-width: 992px) {
            max-width: aute !important;
            flex-direction: row;
            justify-content: space-between;
            gap: 4rem;
        }


        .collection-titles-wrapper {
            flex-grow: 1;

            #collection-title {
                white-space: nowrap;
            }
            #collection-subtitle {
                margin: 0;
                font-size: 1rem;
                font-variant: small-caps;
                color: #fff;
            }
        }

        #collection-intro-text {
            &.lead {
                max-width: 100% !important;
                font-size: .875rem;
                font-style: italic;
                @media (min-width: 1200px) {
                    max-width: 80% !important;
                    margin-left: auto;
                    margin-right: unset;
                }
                @media (min-width: 1600px) {
                    max-width: 50% !important;
                }
            }
        }


        #collection-conclusion-section {
            width: 100%;
            margin: 0 auto;

                #collection-conclusion-text {
                    width: 100%;
                    text-align: left;
                    @media (min-width: 992px) {
                        width: 75%;
                        margin: 0 auto;
                        text-align: center;
                    }
                }

        }
    }
 

    #collection-intro-image {
        max-width: 100%;
        height: auto;
        max-height: 500px;
        border-radius: 6px;
        box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    }

    #collection-outro-images img {
        object-fit: cover;
        border-radius: 4px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    }

    .card {
        .card-body {
            .card-title {
                margin: 0;
                font-size: 1rem;
            }
        }
    }
}