﻿.block__accordion {
    padding: var(--padding-lg) 0;
    display: flex;
    flex-flow: column;
    gap: 4rem;
}

.accordion__items {
    display: flex;
    flex-flow: column;
    gap: 2.5rem;
}

.accordion__item {
    position: relative;
}

    .accordion__item input {
        position: absolute;
        top: 0;
        left: 0;
        opacity: 0;
    }

    .accordion__item label {
        font-family: var(--secondfont);
        font-size: 2.4rem;
        color: var(--white);
        font-weight: 700;
        text-transform: uppercase;
        position: relative;
        display: inline-flex;
        align-items: center;
        margin-bottom: 1.5rem;
        transform: rotate(.5deg);
        transition: var(--transition-default);
    }

    .accordion__item:nth-child(even) label {
        transform: rotate(-.5deg);
    }

    .accordion__item label svg {
        width: 1.6rem;
        height: auto;
        margin-right: 2.4rem;
        transition: var(--transition-default);
    }

        .accordion__item label svg path {
            fill: var(--bordercolor);
        }

    .accordion__item input:checked ~ label {
        color: var(--bordercolor);
    }

        .accordion__item input:checked ~ label svg {
            transform: rotate(180deg);
        }

    .accordion__item div {
        padding-left: 4rem;
        max-height: 0;
        overflow: hidden;
        transition: var(--transition-default);
    }

    .accordion__item input:checked ~ div {
        height: auto;
        max-height: 100vh;
    }

@media(min-width: 992px) {
    .accordion__item label {
        font-size: 3.2rem;
        cursor: pointer;
    }

        .accordion__item label:hover,
        .accordion__item input:checked ~ label {
            color: var(--bordercolor);
            transform: rotate(0deg);
        }
}
