.how-to-use-mode {


    .header,
    .main-section {
        display: none;
    }

    .body {
        background: white;
        color: black;
    }

    .container {
        width: 1100px;
    }

    footer {
        box-shadow: none;
    }
}

.features-list {
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;

    a.btn {
        background: dimgray;
    }
}

.product-section {
    margin: 0;
    padding: 1rem 0;

    .media {
        flex: 6;
    }

    .description {
        flex: 4;
    }
}

video {
    box-shadow: 0 0 8px 0px var(--sl-gray-dark);
}

video:not(.full-height) {
    /* height: 400px;           why do we need this? */
}