.child {
    padding: var(--spacing-xxl) 0;
    background: var(--gray);
}

.child_items {
    padding: var(--spacing-lg) 0 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-lg);
    position: relative;
}

.child_item {
    position: relative;
    flex-basis: 100%;

    @media (min-width: 760px) {
        flex-basis: calc(100% / 3 - var(--spacing-lg) * 2 / 3);
    }
}

.child_item a {
    color: var(--color);
    text-decoration: none;
}

.child_item {
    padding: var(--spacing-xxs) var(--spacing-xxs) var(--spacing-sm);
    background: var(--gray);
}

.child_item:first-child:before {
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    top: calc(var(--spacing-xs) * -1);
    left: calc(var(--spacing-xs) * -1);
    border-top: 3px solid var(--color);
    border-left: 3px solid var(--color);
    z-index: -1;
}

.child_item:last-child::before {
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    top: calc(var(--spacing-xs) * 1);
    left: calc(var(--spacing-xs) * 1);
    border-bottom: 3px solid var(--color);
    border-right: 3px solid var(--color);
    border-top: 0;
    border-left: 0;
    z-index: -1;
}

.child_item img {
    width: 100%;
    aspect-ratio: 2 / 1;
    object-fit: cover;
}

.child_item h5 {
    padding: var(--spacing-sm) var(--spacing-md);
    text-align: center;
}