.card-sm {
    position: relative;
    display: grid;
    grid-template-rows: auto 1fr;
    width: 290px;
    height: 179.23px;
    gap: 6.18px;
    border-radius: 6.18px;
    padding: 6.18px;
}

.card-md {
    position: relative;
    display: grid;
    grid-template-rows: auto 1fr;
    width: 469px;
    height: 290px;
    gap: 6.18px;
    border-radius: 6.18px;
    padding: 6.18px;
}

.card-lg {
    position: relative;
    display: grid;
    grid-template-rows: auto 1fr;
    width: 758.84px;
    height: 469.22px;
    gap: 6.18px;
    border-radius: 6.18px;
    padding: 6.18px;
}

.card-vertical-sm {
    position: relative;
    display: grid;
    grid-template-rows: auto 1fr;
    width: 179.23px;
    height: 290px;
    gap: 6.18px;
    border-radius: 6.18px;
    padding: 6.18px;
}

.card-vertical-md {
    position: relative;
    display: grid;
    grid-template-rows: auto 1fr;
    width: 290px;
    height: 469px;
    gap: 6.18px;
    border-radius: 6.18px;
    padding: 6.18px;
}

.card-vertical-lg {
    position: relative;
    display: grid;
    grid-template-rows: auto 1fr;
    width: 469.22px;
    height: 758.84px;
    gap: 6.18px;
    border-radius: 6.18px;
    padding: 6.18px;
}

/* mini-card */

.card-mini-xs {
    position: relative;
    display: grid;
    grid-template-rows: auto 1fr;
    width: 290px;
    height: 68px;
    gap: 6.18px;
    border-radius: 6.18px;
    padding: 6.18px;
}
.card-mini-sm {
    position: relative;
    display: grid;
    grid-template-rows: auto 1fr;
    width: 290px;
    height: 68.46px;
    gap: 6.18px;
    border-radius: 6.18px;
    padding: 6.18px;
}

/* customs */
.card-sm-row3{
    position: relative;
    display: grid;
    grid-template-rows: auto auto 1fr;
    width: 290px;
    height: 179.23px;
    gap: 6.18px;
    border-radius: 6.18px;
    padding: 6.18px;
}
.card-md-row3{
    position: relative;
    display: grid;
    grid-template-rows: auto auto 1fr;
    width: 469px;
    height: 290px;
    gap: 6.18px;
    border-radius: 6.18px;
    padding: 6.18px;
}

/* card-rec */
.card-rec-sm{
    position: relative;
    display: grid;
    grid-template-rows: auto 1fr;
    width: 179.23px;
    height: 179.23px;
    gap: 6.18px;
    border-radius: 6.18px;
    padding: 6.18px;
}

.card-mini-sm{
    position: relative;
    display: grid;
    grid-template-rows: auto 1fr;
    width: 290px;
    height: 110.77px;
    gap: 6.18px;
    border-radius: 6.18px;
    padding: 6.18px;
}