﻿.anniversary-stats {
    display: grid;
    gap: 1rem;
    grid-template:
        'stat1   stat2   stat3'
        'head1   head2   head3'
        'bullet1 bullet2 bullet3';
}

.stat {
    margin-bottom: 1lh;
    height: calc(3lh + (35px * 1.5));
}

.header {
    height: 2lh;
}

.anni-col1 .stat {
    grid-area: stat1;
}

.anni-col1 .header {
    grid-area: head1;
}

.anni-col1 .bullets {
    grid-area: bullet1;
}

.anni-col2 .stat {
    grid-area: stat2;
}

.anni-col2 .header {
    grid-area: head2;
}

.anni-col2 .bullets {
    grid-area: bullet3;
}

.anni-col3 .stat {
    grid-area: stat3;
}

.anni-col3 .header {
    grid-area: head3;
}

.anni-col3 .bullets {
    grid-area: bullet2;
}

.anni-magic-margin {
    margin: 0 1rem 0 0;
}

@media screen and (max-width: 768px) {
    .anniversary-stats {
        gap: 0;
        grid-template:
            'stat1'
            'head1'
            'bullet1'
            'stat2'
            'head2'
            'bullet2'
            'stat3'
            'head3'
            'bullet3';
    }

    .stat {
        height: inherit;
    }

    .header {
        height: inherit;
    }

    .anni-magic-margin {
        margin: 0 auto 1rem auto;
    }
    .width-45-react {
        margin: 0 1rem 0 1rem;
    }
}

.anni-separator-violet, .anni-separator-orange, .anni-separator-green {
    width: 80px;
    border: 3px solid;
    margin: 1lh auto 1lh auto;
}

.anni-separator-violet {
    border-color: var(--wic-violet);
}

.anni-separator-orange {
    border-color: var(--wic-orange);
}

.anni-separator-green {
    border-color: var(--anni-green);
}
