* {
    --highlight-font-color: #82EBEE;
}

.accordion {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows .5s ease-out;
}

.accordion.is-open {
    grid-template-rows: 1fr;
}

.accordion > p {
    overflow: hidden;
    line-height: 1.5rem;
}

.accordion.is-open p {
    padding-top: 1rem;
    padding-bottom: 2rem;
}

.accordion-opener {
    display: flex;
    flex-direction: row;
    gap: 2rem;
    align-items: center;
    cursor: pointer;
}

.accordion-item {
    margin-bottom: 1rem;
}

.plus-container {
    position: relative;
    transition: transform .5s ease-in-out;
}

.accordion-item:hover .line {
    background-color: var(--highlight-font-color);
}

.plus-container.opened {
    transform: rotate(45deg);
}

.line {
    width: 1rem;
    height: .25rem;
    border-radius: .5rem;
    background-color: white;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.line.vertical {
    transform: translate(-50%, -50%) rotate(90deg);
}