Adding new padding-top property to the image class of bulma in the custom local main.scss

[lohithn4]

Hi i am trying to add new padding property

is-4by1{ padding-top:25%} to the below class with no success.

existing main code in image.sass file.

.image
  display: block
  position: relative
  img
    display: block
    height: auto
    width: 100%
    &.is-rounded
      border-radius: $radius-rounded
  &.is-fullwidth
    width: 100%
  // Ratio
  &.is-square,
  &.is-1by1,
  &.is-1by2,
  &.is-1by3
    img,
    .has-ratio
      @extend %overlay
      height: 100%
      width: 100%
  &.is-square,
  &.is-1by1
    padding-top: 100%
  &.is-1by2
    padding-top: 200%
  &.is-1by3
    padding-top: 300%

this is what i tried so far which doesn't work in my main.scss.

.image.is-4by1.is-4by1{padding-top:25%}

// Import Bulma's core
@import "~bulma/sass/utilities/_all";

// Import Bulma and Buefy styles
@import "~bulma";
@import "~buefy/src/scss/buefy";

PS: the source is in sass file and i am tring to access and add new property in the scss file.