:root {
    /* Colors - Audience only */
    --color-tag: #374151;
    --color-audience-item-bg: #ffffffe6;
    --color-audience-item-border: #e5e7eb99;
    --color-audience-after-border: #fd768a33;
    --color-audience-after-start: #fd768a1a;
    --color-audience-after-end: #2535801a;
    
    /* Fonts */
    --font-primary: "Georgia", serif;
    --font-size-title-mobile: 36px;
    --line-height-title: 1.2;
    
    /* Spacing & Border Radius */
    --border-radius-audience: 15px;
    --padding-audience-item: 20px;
    --padding-audience-after: 25px;
    --gap-audience: 15px;
    
    /* Transitions */
    --transition-normal: 0.3s ease;
    
    /* Box Shadows */
    --shadow-audience-hover: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.1) 0px 2px 4px -2px;
}

.audience__section {
    position: relative;
    padding: 30px 0;
}

.audience__title {
    font-family: var(--font-primary);
    padding: 30px 0 15px;
    font-size: var(--font-size-title-mobile);
    font-weight: 400;
}

.audience__description {
    color: var(--color-tag);
}

.audience__list {
    margin: 30px 0;
    display: grid;
    gap: var(--gap-audience);
}

.audience__item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: var(--padding-audience-item);
    border: 1px solid var(--color-audience-item-border);
    border-radius: var(--border-radius-audience);
    background-color: var(--color-audience-item-bg);
    -webkit-transition: all var(--transition-normal);
    transition: all var(--transition-normal);
    cursor: pointer;
}

@supports (backdrop-filter: blur(8px)) or (-webkit-backdrop-filter: blur(8px)) {
    .audience__item {
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        background-color: var(--color-audience-item-bg);
    }
}

@supports (background-color: oklab(0.92 0 0)) {
    .audience__item {
        background-color: oklab(0.999994 0.0000455678 0.0000200868 / 0.9);
        border-color: oklab(0.928 -0.000571842 -0.00597269 / 0.6);
    }
}

.audience__item:hover {
    background-color: oklab(0.999994 0.0000455678 0.0000200868 / 0.9);
    border-color: oklab(0.729884 0.16093 0.0369245 / 0.3);
    box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.1) 0px 2px 4px -2px;
}

.audience__item:hover {
    background-color: #ffffffe6;
    border-color: #fd768a4d;
    box-shadow: var(--shadow-audience-hover);
}

@supports (background-color: oklab(0.92 0 0)) {
    .audience__item:hover {
        background-color: oklab(0.999994 0.0000455678 0.0000200868 / 0.9);
        border-color: oklab(0.729884 0.16093 0.0369245 / 0.3);
    }
}

.audience__item--content {
    display: flex;
    flex-direction: column;
    gap: 5px;
    align-items: flex-start;
}

.audience__item--title {
    font-weight: 700;
    color: #253580;
}

.audience__item--description {
    color: var(--color-tag);
}

.audience__after-block {
    border: 1px solid var(--color-audience-after-border);
    border-radius: var(--border-radius-audience);
    padding: var(--padding-audience-after);
    background-image: linear-gradient(to right bottom,
            var(--color-audience-after-start) 0%,
            var(--color-audience-after-end) 100%);
    background-image: -webkit-linear-gradient(top left,
            var(--color-audience-after-start) 0%,
            var(--color-audience-after-end) 100%);
    background-image: -moz-linear-gradient(top left,
            var(--color-audience-after-start) 0%,
            var(--color-audience-after-end) 100%);
    background-image: -o-linear-gradient(top left,
            var(--color-audience-after-start) 0%,
            var(--color-audience-after-end) 100%);
}

@supports (border-color: oklab(0.729884 0.16093 0.0369245 / 0.2)) {
    .audience__after-block {
        border-color: oklab(0.729884 0.16093 0.0369245 / 0.2);
        background-image: linear-gradient(to right bottom,
                oklab(0.729884 0.16093 0.0369245 / 0.1) 0%,
                oklab(0.36342 -0.000455797 -0.127774 / 0.1) 100%);
    }
}

.audience__after-text {
    color: var(--color-tag);
}
.audience__after-text p{
    margin: 0;
}
@media screen and (min-width: 768px) {
    .audience__list {
        grid-template-columns: 1fr 1fr;
    }
}

@media screen and (min-width: 992px) {
    .audience__list {
        grid-template-columns: 1fr 1fr 1fr;
    }
}