hypothetical/resources/sass/sections/_subscription-form.scss

.subscription-form-section-component {
    $trans-speed: 100ms;
    width: pxrem(200);
    border: pxrem(2) solid color.adjust($c-base, $alpha: -0.75);
    border-radius: pxrem(3);
    background-color: color.adjust($c-base, $lightness: 75%);

    .notification {
        padding: pxrem(2);
        text-align: center;
    }

    input {
        margin: pxrem(5);
        width: calc(100% - #{pxrem(10)});
        padding: pxrem(3);
        border: pxrem(2) solid color.adjust($c-base, $alpha: -0.75);
        font-size: pxrem(14);
        text-align: center;
        transition: border-color $trans-speed;

        &:not(:last-child) {
            margin-bottom: 0px;
        }

        &.error {
            border-color: $c-error;
        }

        &::placeholder, &[type="submit"] {
            text-transform: uppercase;
        }

        &[type="submit"] {
            @include font-sans-bold;
            cursor: pointer;
        }
    }
}