.brochure {
    padding: 0 var(--space-4);
    margin-bottom: 74px;
    position: relative;
}

.brochure:before {
    content: "";
    position: absolute;
    right: 0;
    top: 6px;
    width: 100%;
    height: calc(100% - 10px);
    background: #efefef;
}

.brochure>.inner {
    margin: 0 auto;
    max-width: 288px;
}

.brochure>.inner>div {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 16px;
}

.brochure>.inner>div:nth-child(even) {
    gap: 0;
    margin-right: 14px;
}

.brochure>.inner>div:nth-child(even) .content {
    margin-left: 23px;
    min-width: 150px;
}

.brochure>.inner>div .img-cont {
    position: relative;
    min-height: 122px;
    min-width: 93px;
    z-index: 1;
    margin-left: var(--space-2);
}

.brochure>.inner>div .img-cont img {
    position: absolute;
    left: 0;
    bottom: 0;
    box-shadow: 0px 0px 8px 0px rgb(0 0 0 / 17%);
}

.brochure>.inner>div .img-cont img:first-child {
    left: 11px;
}

.brochure>.inner>div .img-cont img:nth-child(even) {
    transform: rotate(-7.24deg);
    bottom: 3px;
    left: 0px;
}

.brochure>.inner>div:nth-child(even) .img-cont {
    order: 1;
}

.brochure>.inner>div .content {
    margin-left: var(--space-3);
    position: relative;
    min-width: 159px;
}

.brochure>.inner>div .content::before {
    content: "";
    position: absolute;
    right: 0;
    top: -13px;
    width: 174px;
    height: 3px;
    background: var(--dark-blue);
}

.brochure>.inner>div .content::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: -16px;
    width: 174px;
    height: 3px;
    background: var(--dark-blue);
}

.brochure>.inner>div:nth-child(even) .content::after, .brochure>.inner>div:nth-child(even) .content::before {
    width: 198px;
    right: -24px;
}

.brochure>.inner>div .title {
    font-family: var(--font-display-alt);
    font-size: 17px;
    line-height: 18px;
    color: var(--dark-gray);
    font-weight: 700;
    display: block;
    padding-right: var(--space-px);
}

.brochure>.inner>div .title i {
    color: var(--blue);
    vertical-align: text-bottom;
    margin-left: var(--space-1);
}

@media (hover: hover) {
    .brochure>.inner>div .title:hover {
        text-decoration: none;
    }
}

@media (min-width: 880px) {
    .brochure {
        margin-bottom: 95px;
    }
    .brochure:before {
        top: 13px;
        height: calc(100% + -17px);
        left: calc(50%);
        transform: translateX(-50%);
        max-width: 1170px;
    }
    .brochure>.inner {
        display: flex;
        max-width: 968px;
        justify-content: space-between;
        row-gap: var(--space-10);
        flex-wrap: wrap;
    }
    .brochure>.inner>div .img-cont {
        min-width: 142px;
        min-height: 184px;
        gap: 0;
    }
    .brochure>.inner>div:nth-child(even) .img-cont {
        order: 0;
    }
    .brochure>.inner>div:nth-child(even) {
        gap: 9px;
        margin-right: 9px;
    }
    .brochure>.inner>div .content {
        margin-left: 15px;
        min-width: 231px;
    }
    .brochure>.inner>div:nth-child(even) .content {
        min-width: 231px;
    }
    .brochure>.inner>div .title {
        font-size: 25px;
        line-height: 27px;
        max-width: 231px;
    }
    .brochure>.inner>div .title i {
        margin-left: var(--space-2);
    }
    .brochure>.inner>div:nth-child(even) .content::after, .brochure>.inner>div:nth-child(even) .content::before, .brochure>.inner>div .content::before, .brochure>.inner>div .content::after {
        height: 5px;
        width: 263px;
        right: 0;
    }
    .brochure>.inner>div .content::before {
        top: -18px;
    }
    .brochure>.inner>div .content::after {
        bottom: -22px;
    }
}

@media (min-width: 90em) {
    .brochure:before {
        left: calc(50% - 11px);
    }
}