.tab-deck {
    display: grid;
}
.tab-deck > .title {
    margin: 0.5em;
}
.tab-deck > .subtitle {
    margin: 0.5em;
}
.tab-deck > .tags {
    display: block;
    padding: 0;
    overflow-y: auto;
}
.tab-deck > .tags span.tag {
    display: block;
    padding: 1.5em;
    border: 5px solid currentColor;
    cursor: pointer;
}
.tab-deck > .tags span.tag.activetab {
    background-color: rgba(var(--red-accent-text, 0,0,0), 0.6);
}
.tab-deck > .tabs {
    display: block;
    padding: 1.5em;
    border: 5px solid transparent;
}
.tab-deck > .tabs > div {
    display: none;
}
.tab-deck > .tabs > div[data-activetab] {
    display: block;
}
.service-info {
    padding-left: 2em;
    padding-right: 2em;
}

@media screen and (max-width: 640px) {
    .tab-deck {
        grid-template-columns: auto;
        padding: 0 0 2em 0;
    }
    .tab-deck > .title {
        grid-column: 1;
        grid-row: 1;
    }
    .tab-deck > .subtitle {
        grid-column: 1;
        grid-row: 2;
    }
    .tab-deck > .tabs {
        grid-column: 1;
        grid-row: 3;
        border: 5px solid currentColor;
    }
    .tab-deck > .tags {
        grid-column: 1;
        grid-row: 4;
        overflow: hidden;
    }
    .tab-deck > .tags span.tag {
        padding-right: calc(2em + 1.5lh);
    }
    .tab-deck > .tags::before {
        content: var(--activetab, "");
        display: block;
        padding: 1.5em;
        padding-right: calc(2em + 1.5lh);
        border: 5px solid currentColor;
        cursor: pointer;
        background-color: rgba(var(--blue-accent-text, 0,0,0), 0.6);
    }
    .tab-deck > .tags::after {
        content: "";
        position: absolute;
        display: block;
        right: 2em;
        top: 2em;
        width: 1.5lh;
        height: 1lh;
        background-image: url(/img/svg-icons/arrow.svg);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center center;
        pointer-events: none;
        transition: transform 0.5s ease;
    }
    .tab-deck > .tags > .container {
        display: block;
        position: absolute;
    }
    .tab-deck > .tags.open {
        overflow: visible;
    }
    .tab-deck > .tags.open > .container {
        display: block;
        background-color: var(--purple-background2);
        width: 100%;
        z-index: 5;
    }
    .tab-deck > .tags.open::after {
        transform: scale(-1, -1);
    }
}
@media screen and (min-width: 641px) {
    .tab-deck {
        grid-template-columns: 40% 1fr;
        padding: 2em;
    }
    .tab-deck > .title {
        grid-column: 1;
        grid-row: 1;
    }
    .tab-deck > .subtitle {
        grid-column: 2;
        grid-row: 1;
    }
    .tab-deck > .tabs {
        grid-column: 2;
        grid-row: 2;
    }
    .tab-deck > .tags {
        grid-column: 1;
        grid-row: 2;
    }
}