body {
    background-color: var(--secondary-color);
}

.container-about {
    min-height: 100vh;
}

.about-header {
    font-size: 35px;
}

.features-container {
    min-width: calc(var(--feature-img-width) + 6rem);
}

.feature-header h1 {
    font-variant: small-caps;
}
.feature-header h5 {

}
#feature-lalenia .feature-header {
    position: relative;
    left: 5px;
    border-right: var(--feature-header-border-width) solid var(--primary-text);
}
#feature-lalenia .feature-header h1,
#feature-lalenia .feature-header h5 {
    padding-right: var(--feature-header-padding-width);
}
#feature-ethan .feature-header {
    position: relative;
    right: 5px;
    border-left: var(--feature-header-border-width) solid var(--primary-text);
}
#feature-ethan .feature-header h1,
#feature-ethan .feature-header h5 {
    padding-left: var(--feature-header-padding-width);
}

.feature-header {
    border-bottom: var(--feature-header-border-width) solid transparent;
}
.feature-header > h1 {
    border-bottom: var(--feature-header-border-width) solid var(--primary-text);
}

.feature-img {
    width: var(--feature-img-width);
    border: var(--feature-header-border-width) solid transparent;
}

#feature-lalenia .feature-img {
    border-top: var(--feature-header-border-width) solid var(--primary-text);
    border-right: var(--feature-header-border-width) solid var(--primary-text);
    border-bottom: var(--feature-header-border-width) solid var(--primary-text);
}
#feature-ethan .feature-img {
    border-top: var(--feature-header-border-width) solid var(--primary-text);
    border-left: var(--feature-header-border-width) solid var(--primary-text);
    border-bottom: var(--feature-header-border-width) solid var(--primary-text);
}

@media screen and (max-width: 1250px) {
    .features-container {
        margin-left: 0px !important;
        margin-right: 0px !important;
    }

    .feature-container > .d-flex:first-child {
        flex-direction: column !important;
    }

    .feature-header {
        position: initial !important;
        border: 0px solid transparent !important;
    }

    .feature-header h1,
    .feature-header h5 {
        align-self: center !important;
    }

    .feature-text > h5 {
        text-align: center !important;
    }

    div:has(> .feature-img) {
        justify-content: space-around;
    }

    .feature-img {
        margin-top: 3rem !important;
        border: var(--feature-header-border-width) solid var(--primary-text) !important;
    }
}

:root {
    --feature-img-width: 400px;

    --feature-header-border-width: 5px;
    --feature-header-padding-width: 5px;
}