/* Topic Group
--------------------------------------------- */

.topic-group {
    padding-block: 4rem;
}

.topic-group .content-wrapper .content {
    grid-column: 1 / -1;
}

.topic-header {
    display: grid;
    width: 100%;
    margin-block-end: 2rem;
    grid-template-columns: repeat(var(--grid_columns), 1fr);
    gap: 0 var(--grid_gap);
    text-align: center;
}

.topic-header > * {
    grid-column: 2 / -2;
}

.topic-header h2 {
    margin-block-start: 0;
    margin-block-end: .5rem;
    font-size: 3.35rem;
}

.topic-items {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.topic-item {
    display: grid;
    grid-template-columns: repeat(var(--grid_columns), 1fr);
    align-items: center;
    padding: 2rem;
    gap: var(--grid_gap);
    background: var(--white);
    border-radius: var(--border_radius);
    box-shadow: 0px 0px 40px rgba(0, 0, 0, 0.1);
}

.topic-item[data-animate] {
    opacity: 0;
    translate: 0 1rem;
    transition: all .5s ease, backround 0s;
    will-change: opacity, transform;
}

.topic-item[data-animate].animate {
    opacity: 1;
    translate: 0 0;
}

.topic-item:nth-child(odd) {
    background: var(--tan) url('../../images/bright-blue-splat.svg') no-repeat;
    background-position: 1% -5rem;
    background-size: 28% auto;
}

.topic-item:nth-child(even) {
    background: var(--white) url('../../images/yellow-splat.svg') no-repeat;
    background-position: 1% 2rem;
    background-size: 30% auto;
}

.topic-item:has(.topic-item-image) {
    background-image: none;
}

.topic-item-image {
    grid-column: 1 / span 4;
    align-self: flex-start;
    border-radius: var(--border_radius);
    object-fit: contain;
}

.topic-item-content {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    padding-inline-start: 2rem;
    grid-column: 5 / span 6;
}

.topic-item:not(:has(.topic-item-image)) .topic-item-content {
    padding-block: 2rem;
}

.content-wrapper .topic-item-content > * {
    margin-block: 0;
}

@media (max-width: 1300px) {
    .topic-item-content {
        grid-column: 5 / span 7;
    }
}

@media (max-width: 1200px) {
    .topic-item-image {
        grid-column: 1 / span 5;
    }
    .topic-item-content {
        grid-column: 6 / span 7;
        padding-inline-end: 2rem;
    }
}

@media (max-width: 1250px) {
    .topic-header h2 {
        font-size: 3.5rem;
    }
    .topic-header > * {
        grid-column: 1 / -1;
    }
    .topic-item:nth-child(odd) {
        background-size: 35% auto;
    }
    
    .topic-item:nth-child(even) {
        background-size: 35% auto;
    }
}

@media (max-width: 800px) {
    .topic-header h2 {
        font-size: 3.25rem;
    }
    .topic-item-image {
        grid-column: 1 / -1;
    }
    .topic-item-content {
        grid-column: 1 / -1;
        padding: 0;
    }
    .topic-item:not(:has(.topic-item-image)) .topic-item-content {
        padding: 0;
    }
    .topic-item:nth-child(even) {
        background-position: -170% -24rem;
        background-size: 120% auto;
    }
    .topic-item:nth-child(odd) {
        background-position: -170% -24rem;
        background-size: 120% auto;
    }
}

@media (max-width: 700px) {
    .topic-header h2 {
        font-size: 3rem;
    }
}

@media (max-width: 600px) {
    .topic-item-image {
        grid-column: 1 / -1;
    }
    .topic-item:nth-child(even) {
        background-position: -175% -15rem;
        background-size: 120% auto;
    }
    .topic-item:nth-child(odd) {
        background-position: -175% -11rem;
        background-size: 120% auto;
    }
    .topic-item:nth-child(odd):not(:has(.topic-item-image)) {
        background-position: -190% -40rem;
        background-size: 120% auto;
    }
}