/* Combined CSS for article highlights with enhancements */

/* General styling for the article */
article.highlights {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* Creates three columns of equal width */
    gap: 10px; /* Adds space between columns */
    padding: 10px;
    box-shadow: 0px 2px 6px #00000088;
    margin-top: 10px;
    margin-bottom: 20px;
}

/* Small screen optimization */
@media screen and (max-width: 900px) {
    article.highlights {
        display: flex; /* Switch to flex layout for stacking */
        flex-direction: column; /* Stack items vertically */
        align-items: stretch; /* Stretch items to fill the container */
    }
}

/* Styling for images and blockquotes */
article.highlights img,
article.highlights blockquote {
    width: 100%; /* Ensures each item takes full width of its column */
    box-sizing: border-box; /* Include padding and border in the element's total width and height */
}

article.highlights img {
    height: 100%; /* Ensures images take up full height of the column */
    object-fit: cover; /* Makes sure images cover the entire area */
}

article.highlights blockquote {
    padding: 20px; /* Adds padding around the text */
    margin: 0;
    position: relative;
    font-style: italic; /* Gives the quote a more traditional look */
    height: 100%; /* Ensures blockquote takes up full height of the column */
}

    /* Styling for quotation marks */
    article.highlights blockquote::before,
    article.highlights blockquote::after {
        content: '"'; /* Adds quotation marks */
        font-size: 3em; /* Adjust size for styling */
        position: absolute;
        color: #999; /* Change color for styling */
    }

    article.highlights blockquote::before {
        left: 5px; /* Position at the start of the blockquote */
        top: -5px; /* Align vertically with the text */
    }

    article.highlights blockquote::after {
        /* You can add styling here if needed */
    }

/* Styling for spotlight header */ .spotlight header h2 {
    font-family: "museo-sans-display", sans-serif;
    font-weight: 900;
    font-style: normal;
    color: var(--titan-blue);
    font-size: 3rem;
    text-transform: uppercase;
    letter-spacing: 0rem;
    margin: 0;
}

.spotlight header em, .spotlight header strong {
    display: block;
    margin-top: 10px;
    margin-bottom: 10px;
    padding: 0;
}

.spotlight {
    visibility: hidden;
}

    .spotlight.active {
        visibility: visible;
    }