Carding with SCSS

Hi @AdityaDwiNugroho,

Good job on this component, it's pretty close to the design!

A couple tips:

• Even though the box-shadow you used is nice, you could make the component look more like the design by getting the box-shadow from the Figma file.

• You don't need all this code:

$breakpoint-tiny: 380px;
$breakpoint-small: 480px;
$breakpoint-medium: 768px;
$breakpoint-large: 1024px;

@mixin respond-to($breakpoint) {
    @if $breakpoint == tiny {
        @media (max-width: $breakpoint-tiny) { @content; }
    } @else if $breakpoint == small {
        @media (max-width: $breakpoint-small) { @content; }
    } @else if $breakpoint == medium {
        @media (max-width: $breakpoint-medium) { @content; }
    } @else if $breakpoint == large {
        @media (max-width: $breakpoint-large) { @content; }
    }
}

The component only needs to look good on two screen sizes.

• You could try breaking up your SCSS in multiple SCSS files. Relevant documentation.

• Try to not use absolute values too much like here:

width: 320px;
height: 497px;

If you set the width and height of the card in pixels like this and you would add more content to the card you would run into overflow issues. It's always good to leave either width or height as auto so the content can still flow.

Let me know if you would like more feedback or if you have any questions.