Preview

HTML

SCSS

*, ::after, ::before {
  box-sizing: border-box;
}

/* css element */

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700;900&display=swap');

ul.card-payment {
  list-style: none;
  margin: 0;
  padding: 20px;
  background-color: #ffffff;
  border-radius: 15px;
  width: 100%;
  max-width: 370px;

  li {
    position: relative;
    margin-bottom: 15px;
    
    &:last-child {
      margin-bottom: 0;
    }
    
    input[type="radio"] {
      position: absolute;
      visibility: hidden;
      
      &:checked {
        + {
          .card-content {
            background-color: #1A2B38;

            .check {
              border-color: #ffffff;
              
              &::before {
                background-color: #ffffff;
              }
            }
            
            .info {
              h3 {
                color: #ffffff;
              }
              
              .number {
                span {
                  color: #9DA8B7;
                }
                
                svg {
                  fill: #9DA8B7;
                }
              }
            }
          }
        }
      }
    }
    
    .card-content {
      position: relative;
      display: -ms-flexbox;
      display: flex;
      -ms-flex-wrap: wrap;
      flex-wrap: wrap;
      -ms-flex-align: center;
      align-items: center;
      background-color: #F1F5F9;
      border-radius: 15px;
      padding: 15px 25px;
      z-index: 2;
      cursor: pointer;
      -webkit-transition: all 0.2s linear;
      
      .brand {
        width: 41px;
        
        svg {
          vertical-align: middle;
        }
      }
      
      .info {
        font-family: 'Roboto', sans-serif;
        margin-left: 20px;
        width: 100%;
        max-width: 202px;
        
        .number {
          position: relative;
          display: -ms-flexbox;
          display: flex;
          -ms-flex-wrap: wrap;
          flex-wrap: wrap;
          -ms-flex-align: center;
          align-items: center;
          
          span {
            color: #8492A6;
            font-size: 12px;
            font-weight: 400;
            
            &.first {
            margin-right: 6px;
          }
          
              &.last {
                margin-left: 6px;
              }
          }
          
          svg {
            width: 25px;
            vertical-align: middle;
            margin: 0 6px;
            fill: #8492A6;
          }
        }
        
        h3 {
          margin: 0 0 8px 0;
          font-weight: 700;
          font-size: 14px;
          color: #162B39;
        }
      }
      
      .check {
        border: 2px solid #8492A6;
        border-radius: 100%;
        height: 16px;
        width: 16px;
        transition: border .25s linear;
        -webkit-transition: border .2s linear;
        position: relative;
      }
    }
    .check {
      &::before {
        display: block;
        position: absolute;
        content: '';
        border-radius: 100%;
        height: 8px;
        width: 8px;
        top: 2px;
        left: 2px;
        transition: background 0.2s linear;
        -webkit-transition: background 0.2s linear;
      }
    }
    &:hover {
      .card-content {
        .check {
          border-color: #ffffff;
        }
        background-color: #1A2B38;
        .info {
          h3 {
            color: #ffffff;
          }
          .number {
            span {
              color: #9DA8B7;
            }
            svg {
              fill: #9DA8B7;
            }
          }
        }
      }
    }
  }
}

@media (max-width:767px) {
  ul.card-payment {
    li {
      .card-content {
        display: block;
        
        .info {
          margin-left: 0;
          margin: 20px 0;
          width: 100%;
        }
      }
    }
  }
}