@import url('https://fonts.googleapis.com/css2?family=Big+Shoulders:opsz,wght@10..72,100..900&family=Lexend+Deca:wght@100..900&display=swap');

html {
  box-sizing: border-box;
}

*,
*::before,
*::after {
  box-sizing: inherit;
  padding: 0;
  margin: 0;
}

:root {
  --space-3xs: clamp(0.3125rem, 0.3125rem + 0vw, 0.3125rem);
  --space-2xs: clamp(0.5625rem, 0.5405rem + 0.0939vw, 0.625rem);
  --space-xs: clamp(0.875rem, 0.853rem + 0.0939vw, 0.9375rem);
  --space-s: clamp(1.125rem, 1.081rem + 0.1878vw, 1.25rem);
  --space-m: clamp(1.6875rem, 1.6215rem + 0.2817vw, 1.875rem);
  --space-l: clamp(2.25rem, 2.162rem + 0.3756vw, 2.5rem);
  --space-xl: clamp(3.375rem, 3.243rem + 0.5634vw, 3.75rem);
  --space-2xl: clamp(4.5rem, 4.3239rem + 0.7512vw, 5rem);
  --space-3xl: clamp(6.75rem, 6.4859rem + 1.1268vw, 7.5rem);

  /* ---------------------------------- color --------------------------------- */
  --clr-gold500: oklch(0.7082 0.1512 61.38);
  --clr-cyan800: oklch(0.4737 0.0807 203.41);
  --clr-green950: oklch(0.3438 0.0589 192.89);
  /* paragraphs */
  --clr-transparentwhite: oklch(1 0 0 / 75%);
  /* background, headings, buttons */
  --clr-gray100: oklch(0.9619 0 0);

  /* ---------------------------------- fonts --------------------------------- */
  --font-BigShoulders: "Big Shoulders", sans-serif;
  --font-LexendDeca: "Lexend Deca", sans-serif;
  --weights-700: 700;
  --weights-400: 400;

  /* font 16px-20px */
  --step-0-1620: clamp(1rem, 0.912rem + 0.3756vw, 1.25rem);
  --step-1-1620: clamp(1.2rem, 1.0724rem + 0.5446vw, 1.5625rem);
  --step-2-1620: clamp(1.44rem, 1.2593rem + 0.7709vw, 1.9531rem);

  /* font29px-35px */
  --step-0-2935: clamp(1.8125rem, 1.6805rem + 0.5634vw, 2.1875rem);
  --step-1-2935: clamp(2.175rem, 1.978rem + 0.8404vw, 2.7344rem);
  --step-2-2935: clamp(2.61rem, 2.3255rem + 1.2138vw, 3.418rem);
}

body::before {
  content: "";
  width: 100%;
  height: 100%;
  background: var(--clr-gray100);
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;
}

main {
  margin: var(--space-s);
  display: grid;
  grid-template-areas:
    "sedans"
    "suvs"
    "luxury"
  ;
}

main section {
  padding: var(--space-xl);
  /* selama dikembangkan popup windows Learn more */
  /* display: none; */
}

section h3 {
  font-family: var(--font-BigShoulders);
  font-weight: var(--weights-700);
  text-transform: uppercase;
  padding-block: var(--space-m);
  font-size: var(--step-0-2935);
  color: var(--clr-gray100);
}


section p,
section button {
  font-family: var(--font-LexendDeca);
  font-weight: var(--weights-400);
  font-size: var(--step-0-1620);
}

section button {
  text-decoration: none;
  background-color: var(--clr-gray100);
  padding: var(--space-xs);
  border-radius: 25px;
  padding-inline: var(--space-m);
  border: none;
}



section p {
  color: var(--clr-transparentwhite);
  margin-bottom: var(--space-l);
}

.section-sedans {
  grid-area: sedans;
  background-color: var(--clr-gold500);
  border-radius: 8px 8px 0 0;
}

.section-sedans button:active {
  background-color: #EB5B00;
  color: var(--clr-transparentwhite);
}

.section-suvs button:active {
  background-color: #468A9A;
  color: var(--clr-transparentwhite);
}

.section-luxury button:active {
  background-color: #006A67;
  color: var(--clr-transparentwhite);
}

.section-suvs {
  grid-area: suvs;
  background-color: var(--clr-cyan800);
}


.section-luxury {
  grid-area: luxury;
  background-color: var(--clr-green950);
  border-radius: 0 0 8px 8px;

}

.section-sedans button {
  color: var(--clr-gold500);

}

.section-luxury button {
  color: var(--clr-green950);
}

.section-suvs button {
  color: var(--clr-cyan800);
}

section p {
  line-height: 1.8;
}

/* Learn More Information */
article{
  margin: var(--space-m);
  display: flex; 
  align-items: center;
  flex-direction: column;
  border: 2px solid black;
  padding: var(--space-s);
  background-color: #31326F;
  border-radius: 7px;
  border: none;
  /* position: relative; */
  position: fixed;
  top: 0;
  left: 0;
}

article h2, article p{
  color: #E7F2EF;
  
}

article p{
  font-family: var(--font-LexendDeca);
  font-size: var(--step-0-1620);

}
h2{
  font-size: var(--step-0-2935);
  font-family: var(--font-BigShoulders);
  padding-bottom: var(--space-m);
}

/* cancel icon Learn More */
article svg{
  width: 10%;
  /* height: 20%; */
  position: absolute;
  top: 10px;
  /* left: 520px; */
  right: 30px;
  bottom: 0;
}

.hidden{
  display: none;
}

@media screen and (min-width: 480px) {
  main section {
    padding: var(--space-s);
  }

  article svg{
    width: 5%;
  }
}

/* desktop size */
@media screen and (min-width: 768px) {
  main {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(10px, 1fr));
    grid-template-areas:
      "sedans suvs luxury"
    ;

  }

  section button {
    margin-top: var(--space-xl);
    margin-bottom: var(--space-m);
  }

  .section-sedans {
    border-radius: 8px 0 0 8px;
  }

  .section-luxury {
    border-radius: 0 8px 8px 0;
  }

  section p {
    line-height: 1.8;
  }

  
}

@media screen and (min-width: 968px) {
  article{
    margin-inline: var(--space-3xl);
  }
}

@media screen and (min-width: 1205px) {
  main section {
    padding: var(--space-xl);
  }

  article svg{
    width: 4%;
  }

}