:root {
    --contrastColor: #000;
    --contrastColorRGB: 0, 0, 0;
    --contrastColorInverted: #fff;
    --baseTransition: all .3s ease-in-out;
}

.accordion {
    padding-bottom: clamp(2.7777777778rem, 1.2762762763rem + 8.4459459459vw, 8.3333333333rem);
}

.accordion-inner {
    max-width: var(--reducedWidth);
    width: var(--baseWidth);
    margin: auto;
    position: relative;
}

.accordion-inner .informations {
    text-align: center;
    padding-bottom: clamp(2.2222222222rem, 1.6216216216rem + 3.3783783784vw, 4.4444444444rem);
}

.accordion-inner .accordion {
    width: 100%;
    overflow: hidden;
}

.accordion-inner .accordion-label {
    display: block;
    width: 100%;
    padding: 20px 65px 20px 20px;
    font-weight: 600;
    margin-bottom: 5px;
    border-radius: 10px;
    font-family: var(--headline);
    cursor: pointer;
    position: relative;
    box-shadow: 0 2px 15px 0 rgba(var(--contrastColorRGB), 0.1);
    box-sizing: border-box;
    color: var(--fontColor);
    transition: var(--baseTransition);
}

.accordion-inner .accordion-label::after {
    content: "";
    display: block;
    width: 44px;
    height: 44px;
    mask: url(img/arrow-down.svg) no-repeat center center/15px auto;
    background-color: var(--fontColor);
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%) rotate(0deg);
}

.accordion-inner .accordion-content {
    height: 0;
    padding: 0 20px;
    transition: var(--baseTransition);
    overflow: hidden;
}

.accordion-inner input {
    position: absolute;
    opacity: 0;
    z-index: -1;
}

.accordion-inner input:checked+.accordion-label {
    color: var(--secondColor);
    transition: var(--baseTransition);
}

.accordion-inner input:checked+.accordion-label::after {
    transform: translateY(-50%) rotate(-180deg);
    background-color: var(--mainColor);
}

.accordion-inner input:checked~.accordion-content {
    height: auto;
    /* padding: 20px 30px 40px 30px; */
}