/* =========================
   PAGE
   ========================= */

body {
    margin: 0;
    min-height: 100vh;
    background: black;
    overflow-x: hidden;
}

/* =========================
   GRID LAYOUT
   ========================= */

.grid-container {
    width: min(1400px, 95%);
    margin: 0 auto;
    padding: 2rem 0;
}

.card-grid {
    display: grid;
    gap: 2rem;

    /* Mobile first */
    grid-template-columns: 1fr;
}

/* Tablet */
@media (min-width: 768px) {
    .card-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Desktop */
@media (min-width: 1200px) {
    .card-grid {
        grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    }
}

/* =========================
   CARD
   ========================= */

.creator-card {
    width: 100%;
    box-sizing: border-box;

    padding: 1.5rem;
    border-radius: 14px;

    display: flex;
    flex-direction: column;
}

/* =========================
   HEADER
   ========================= */

.card-header {
    display: grid;
    grid-template-columns: 40% 1fr;
    height: 280px;
    /* overflow: hidden; */
    margin-top: -40px;
}

.info {
    padding: 12px;
}

.pfp {
    width: 100%;
    height: 70%;
    object-fit: cover;
    display: block;
    margin-top: 35px;
}


.name-mod {
    opacity: 0.6;
    margin-top: -0.5rem;
}

/* =========================
   BIO
   ========================= */

.bio {
    margin-top: 1rem;
}

h4.bio {
    padding-bottom: 0.5rem;
    border-bottom: 1px solid;
}

/* =========================
   WORK PREVIEW
   ========================= */

.work-preview {
    display: grid;
    grid-template-columns: repeat(3, 1fr);

    gap: 0.5rem;
    list-style: none;

    padding: 0;
    margin: 1rem 0;
}

.work-preview img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    display: block;
}

/* =========================
   CARD FOOTER
   ========================= */

.card-bottom {
    margin-top: auto;
    justify-content: center;
    align-items: center;
}

/* =========================
   PAYMENT LIST
   ========================= */

.payment {
    display: grid;
    grid-template-columns: repeat(3, auto);

    gap: 1rem 4rem;

    padding: 0;
    margin: 1rem 0;

    list-style: none;
    justify-content: center;
}

.payment li {
    padding: 0;
}

.yes {
    list-style-type: "✓ ";
}

.no {
    list-style-type: "✕ ";
}

/* =========================
   BUTTON
   ========================= */

.contact-btn {
    display: flex;

    text-decoration: none;
    text-transform: uppercase;

    padding: 0.75rem 1.25rem;
    border-radius: 4px;

    justify-content: center;
    align-items: center;
}