.guide {
}

.guide-wrapper {

    display: flex;
}

.guide-wrapper>* {
    width: 50%;
    border-left: solid 8px;
    padding: var(--spacing-lg) var(--spacing-md-lg);
}

.guide-form>* {
    text-align: center;
}

.guide-form {
    border-color: var(--color-secondary-light);
    background-color: var(--color-primary-light);
}

.guide-heading {
    color: var(--color-secondary-light);
    padding: 0 0 var(--spacing-md);
}

.guide-cover {
    width: 50%;
    margin: 0 auto;
}

.guide-input-wrapper {
    margin-top: var(--spacing-md);
    display: flex; 
    align-items: center;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.guide-email-input {
    text-align: center;
    background-color: var(--color-white);
}

.guide-cta {
    background-color: var(--color-secondary-light);
    color: var(--color-white);
}

.guide-cta:hover {
    background-color: rgb(66, 158, 157, 0.7);
    color: var(--color-white);
}

.guide-points {
    background: linear-gradient( to bottom right, var(--color-primary-dark) 66%, var(--color-primary-light));
    color: var(--color-white);
    border-color: var(--color-highlight);
}

.guide-points-heading {
    color: var(--color-highlight);
    padding: 0 0 var(--spacing-md);
    text-align: center;
}

.guide-point {
    margin-bottom: var(--spacing-md);
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.guide-point > img {
    width: 24px;
    height: 24px;
}

@media screen and (min-width: 600px) {

    

}