.problems {
    color: var(--color-lighter);
    text-align: center;
    position: relative;
    padding: var(--spacing-x-lg) var(--spacing-md);
    width: 100%;
    background-color: var(--color-darker);
}

.problems-subheading {
    color: var(--color-light);
}

.problems-wrapper {
    display: flex;
    flex-direction: column;
    margin-top: var(--spacing-x-lg);
    gap: var(--spacing-lg);
}

.problem {
    color: white;
}

.problem-image {
    position: relative;
    width: 100px;
    height: 100px;
    margin: 0 auto var(--spacing-lg);
}

.problem-image > img {
    width: 100px;
    height: 100px;
}

.problem-image-cross {
    padding: 0;
    position: absolute;
    top: -40px;
    left: -40px;
}

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

    .problems-wrapper {
        flex-direction: row;
    }

    .problem {
        width: 33.33%;
    }

}

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

    .problems {
        padding: var(--spacing-section) 0;
    }
    

}