@import url(../../css/main.css);
@import url(../button/button.css);
@import url(../avatar/avatar.css);
:root{
    --white:white;
    --grey:grey;
}
/* || Basic card component  */
.card {
    border-radius: 0.5rem;
    box-shadow: 0.01rem 0.01rem 0.4rem;
}
.card-basic{
    padding:  1rem;
    max-width: 28rem;
}
.card-basic .btn {
    width: 100%;
}
.card-basic h3{
    margin:0rem;
    font-size: 2.5rem;
}
.card-basic p {
    color: var(--grey);
    font-size: 1.3rem;
}
/* || Social media card  */
.card-social-media {
    max-width:30rem;
}

.card-media-header {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    padding: 0rem 1.2rem 0rem 0rem;
}

.card-media-header h3,
.card-media-header p {
    margin: 0;
}
.card-media-first{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
}
.card-media-first P{
    font-size: 1.3rem;
    color: var(--grey);
}
.card-media-first h3{
    font-size: 2.7rem;
}
.card-media-header i{
    font-size: 2rem;
}
.card-social-main-img img{
    width: 100%;
}
.card-social-discrip {
    padding: 1rem;
}
.card-social-discrip p{
    margin: 0;
    font-size: 1.4rem;
}
.card-icons{
    display: flex;
    justify-content: space-between;
}
.card-icons i{
    margin: 0.8rem;
    font-size: 2rem;
}

/* || Dismissible Image Card */
.card-dismiss{
    max-width: 30rem;
}
.card-dismiss-img img{
    width: 100%;
} 
.card-dismiss-img{
    position: relative;
}
.card-dismiss-img i{
    position: absolute;
    top: 0;
    right: 0;
    margin: 0.7rem;
    color: var(--white);
}
.card-dismiss-title{
    margin:1rem;
}
.card-dismiss-title h3{
    margin: 0;
    font-size: 2.5rem;
}
.card-dismiss-title p{
    margin: 0rem 1rem;
    font-size: 1.3rem;
    color: var(--grey);
}
.card-dismiss-content{
    margin: 1rem;
}
.card-dismiss-footer i{
    font-size: 2rem;
}
.card-dismiss-footer{
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* || card-text-overlay */
.card-text-overlay img{
    width: 100%;
    height: 100%;
    border-radius: 0.5rem;
}
.card-text-overlay{
    position: relative;
    max-width: 30rem;
    height: 30rem;
}
.card-text-overlay-header{
    padding: 0rem 1rem;
    width: 100%;
    display: flex;
    justify-content: space-between;
    color: var(--white);
    position: absolute;
    top: 0;
}
.card-text-overlay-header h3,.card-text-overlay-header p {
    margin: 0;
}
.card-text-overlay-header h3{
    font-size: 2.5rem;
}
.card-text-overlay-header i {
    font-size: 2rem;
    margin-right: 2rem;
}

.card-text-overlay-footer .card-icons{
    position: absolute;
    bottom: 0;
    color: var(--white);
    display: flex;
    justify-content: space-between;
    width: 100%;
}

/* || Ecom card  */
.card-ecommerce{
    max-width: 30rem;
}
.card-ecom-header{
    display: flex;
    flex-wrap:wrap;
    position: relative;

}
.card-ecom-header img{
    width: 100%;
}
.card-ecom-header-offer-icon{
    position: absolute;
    color: var(--white);
    left: 2rem;
}
.card-ecom-header-offer-icon i{
    font-size: 6rem;
    color: red;
}
.card-ecom-header-offer-icon p{
    position: absolute;
    top: 0.5rem;
    left: 1rem;
    font-size: 1.5rem;
    margin: 0;
    color: var(--white);
}
.card-ecom-title,.card-ecom-price,.card-ecom-footer{
    margin: 1rem;
}
.card-ecom-title h3{
    font-size: 2.3rem;
}
.card-ecom-title p,.card-ecom-title h3{
    margin: 0;
}
.card-ecom-title p{
    color: var(--grey);
    font-size: 1.2rem;
}
.card-ecom-price,.price-show,.price-change{
    display: flex;
    flex-wrap:wrap;
    align-items: center;
    justify-content: space-between;
}
.price-show{
    font-size: 2rem;
}
.price-show p{
    margin: 0.7rem;
    color: red;
}