:root {
  --fw-regular: 400;
  --fw-bold: 700;

  --fs-100: 0.85rem;
  --fs-200: 0.925rem;
  --fs-300: 1rem;
  --fs-400: 1.125rem;
  --fs-500: 1.25rem;
  --fs-600: 1.5rem;
  --fs-700: 1.75rem;
  --fs-800: 2rem;
  --fs-900: 5rem;

  --primary-main-background: hsl(233, 47%, 7%);
  --primary-card-background: hsl(244, 38%, 16%);
  --primary-card-image: hsla(276, 90%, 41%, 0.5);
  --primary-accent: hsl(277, 64%, 61%);

  --secondary-heading-stats: hsl(0, 0%, 100%);
  --secondary-paragraph: hsla(0, 0%, 100%, 0.75);
  --secondary-stat-headings: hsla(0, 0%, 100%, 0.6);
}
  
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

img,
svg {
  display: block;
  max-width: 100%;
}

html {
    font-size: 15px;
}

body {
    min-height: 100vh;
    font-optical-sizing: auto; 
    position: relative;
    font-family: "Inter", "Lexend Deca", serif;
    background-color: var(--primary-main-background);
}

main {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(95%, 350px);
    display: grid;
    grid-template-rows: repeat(3, 1fr);
    gap: 2rem;
    place-items: center;
    background-color: var(--primary-card-background);
    border-radius: 10px;
}

@media screen and (min-width: 992px) {
    main {
        width: min(80%, 900px);
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1fr;
    }
}

#card-image {
    width: 100%;
    height: 100%;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    background: 
        linear-gradient(
            var(--primary-card-image),
            var(--primary-card-image)
        ),
        url("./images/image-header-mobile.jpg") no-repeat;
    background-size: cover;
}

@media screen and (min-width: 992px) {
    #card-image {
        grid-column: 2 / span 1;
        grid-row: 1;
        border-top-left-radius: 0px;
        border-bottom-right-radius: 10px;
        border-top-right-radius: 10px;
        background: 
            linear-gradient(
                var(--primary-card-image),
                var(--primary-card-image)
            ),
            url("./images/image-header-desktop.jpg") no-repeat;
    }
}


#card-main {
    width: 75%;
    text-align: center;
    grid-row: 2 / span 2;
    display: grid;
    grid-template-rows: repeat(1fr, 4);
    gap: 1rem;
}

@media screen and (min-width: 992px) {
    #card-main {
        max-width: 80%;
        margin-top: 10%;
        margin-bottom: 10%;
        grid-row: 1;
        grid-column: 1 / span 1;
        text-align: left;
        gap: 1.5rem;
    }
}

#preview {
    grid-row: 1 / span 1;
    font-family: 'Inter';
    font-size: var(--fs-700);
    color: var(--secondary-heading-stats);
    font-weight: var(--fw-bold);
    align-self: center;
}

#preview span {
    font-family: 'Inter';
    font-size: var(--fs-700);
    color: var(--primary-accent);
    font-weight: var(--fw-bold);
}

#explanatory-text {
    color: var(--secondary-paragraph);
    letter-spacing: 1.2;
    line-height: 1.4;
    font-family: 'Inter';
}

#business-entities {
    display: grid;
    grid-template-rows: repeat(3, 1fr);
    margin-top: 10%;
    margin-bottom: 10%;
    gap: var(--fs-700);
}

@media screen and (min-width: 992px) {
    #business-entities {
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: 1fr;
        margin-bottom: 0;
    }
}

.entity {
    text-align: center;
}

@media screen and (min-width: 992px) {
    .entity {
        text-align: left;
    }
}

.entity-title {
    color: var(--secondary-heading-stats);
    font-weight: var(--fw-bold);
    font-family: 'Inter';
    font-size: var(--fs-700);
}

.entity-text {
    color: var(--secondary-stat-headings);
    text-transform: uppercase;
    font-size: var(--fs-100);
    font-weight: var(--fw-regular);
    font-family: 'Lexend Deca';
}