.guide-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: var(--spacing-3x) var(--spacing-0x);
    border-bottom: 2px solid var(--colors-neutral---light-200);
    counter-increment: guide-counter;
}

.guide-item:first-child {
    padding-top: 0;
}

.guide-item:last-child {
    padding-bottom: 0;
    border: none;
}

.guide-header {
    display: flex;
    align-items: center;
    gap: var(--spacing-15-x);
    margin-bottom: var(--spacing-3x);
}

.guide-circles {
    display: flex;
}

.guide-circles .guide-number {
    display: flex;
    width: 48px;
    height: 48px;
    padding: var(--spacing-1x);
    justify-content: center;
    align-items: center;
    border-radius: 500px;
    border: 2px solid var(--action-secondary);
}

.guide-circles .guide-number::before {
    content: counter(guide-counter);
    color: var(--action-primary);
    text-align: center;
    font-family: var(--font-family-body), var(--font-family-reserve);
    font-size: var(--font-size-lg);
    font-style: normal;
    font-weight: 600;
    line-height: var(--font-line-height-md);
}

.icon-container {
    width: fit-content;
    padding: var(--spacing-15-x);
    border-radius: 500px;
    background: var(--colors-blue-100);
    margin-left: -10px;
}

.icon-container .icon {
    width: 24px;
    height: 24px;
    background-color: var(--action-primary);
}

.guide-header .guide-title {
    font-size: var(--font-size-lg);
    font-weight: 600;
    line-height: var(--font-line-height-sm);
}