/* Styles for the [motorsport_driver_card] shortcode */
.mm-card-section * {
    box-sizing: border-box;
}

.mm-card-section {
    font-family: "Exo", sans-serif; /* You may need to import this font in your theme */
    text-align: center;
    padding: 20px 0; /* Add some padding so it's not glued to edges */
}

.mm-card-section img {
    width: 100%;
    vertical-align: middle;
}

.mm-card-section .card__border, 
.mm-card-section .card__border-line,
.mm-card-section .card__inner {
   -webkit-clip-path: polygon(50% 0, 100% 20%, 100% 80%, 50% 100%, 0% 80%, 0% 20%);
    clip-path: polygon(50% 0, 100% 20%, 100% 80%, 50% 100%, 0% 80%, 0% 20%);
}

.mm-card-section .card {
    -webkit-filter: drop-shadow(0px 0px 5px var(--color)) drop-shadow(0px 0px 15px var(--color));
    filter: drop-shadow(0px 0px 5px var(--color)) drop-shadow(0px 0px 15px var(--color));
    position: relative;
    max-width: 400px;
    margin: auto;
}

.mm-card-section .card__border {
    position: absolute;
    width: 98%;
    height: 102%;
    background: var(--color);
    left: 1%;
    top: 1%;
}

.mm-card-section .card__border-line {
    position: absolute;
    width: 95%;
    height: 99%;
    left: 2.5%;
    top: 2.5%;
    background: linear-gradient(to bottom, #FF8700 33%, hsl(0, 0%, 0%) 70%); /* Note: You might want to make the top color dynamic too */
}

.mm-card-section .card__inner {
    background: linear-gradient(179deg, var(--color), #e3a83b 90%); /* Note: You might want to make the bottom color dynamic too */
    padding: 0.5rem 0.2rem 0rem;
    width: 92%;
    margin-top: 4.8%;
    margin-left: 4%;
}

.mm-card-section .card__img {
    display: flex;
    padding: 0 1rem;
    background: repeating-linear-gradient(126deg, hsla(0, 0%, 100%, 0.219) 0%, #ffffff57 1.2%, transparent 1.19%, transparent 4%, transparent 4.1%);
}

@media screen and (max-width: 550px) {
    .mm-card-section .card__img {
        padding: 0 .2rem;
    }
}

.mm-card-section .img__team {
    flex: 1 1 30%;
    background: hsla(0, 0%, 0%, 0.82);
    display: flex;
    padding: 0.3rem;
    align-items: center;
    padding-top: 15%;
}

.mm-card-section .img__athlete {
    flex: 1 1 75%;
    padding-top: 8%;
}

.mm-card-section .img__athlete img {
    width: 120%;
    object-fit: cover;
    object-position: top;
    margin-left: -11%;
}

.mm-card-section .card__type {
    width: min-content;
    white-space: nowrap;
    margin: auto;
    padding: 0 10%;
    border-radius: 5px;
    background: var(--bg-color);
    color: var(--text-color, #fff); /* Added fallback text color */
    font-size: 1.5rem;
    margin-top: -6%;
}

@media screen and (max-width: 500px) {
    .mm-card-section .card__type {
        font-size: min(1.2rem, 5vw);
    }
}

.mm-card-section .card__text {
    position: relative;
    padding-bottom: 16%;
}

.mm-card-section .card__text:before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: url('https://i.pinimg.com/originals/80/7d/ce/807dcedf950725fea6b935cdb6ffb4a6.jpg'); /* Sand texture */
    opacity: 0.3;
    z-index: -1;
}

.mm-card-section .name {
    font-size: 2.8rem;
    margin: 2% 0 0;
    position: relative;
    color: #000;
}

.mm-card-section .name:before {
    content: '';
    background: linear-gradient(to right, transparent, #3730305c , black, #0000004f , transparent);
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 5%;
}

@media screen and (max-width: 500px) {
    .mm-card-section .name {
        font-size: min(10vw, 2.5rem);
    }
}

.mm-card-section .points {
    font-size: 4rem;
    margin: 0rem 0 10%;
    position: relative;
    color: #000;
}

.mm-card-section .points:before {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -2px;
    transform: translateX(-50%);
    width: 25%;
    height: 5%;
    background: black;
}

@media screen and (max-width: 500px) {
    .mm-card-section .points {
        font-size: min(12vw, 3.5rem);
    }
}