@layer fonts{
    /* karla-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Karla';
  font-style: normal;
  font-weight: 400;
  src: url('./fonts/karla-v33-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* karla-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Karla';
  font-style: normal;
  font-weight: 700;
  src: url('./fonts/karla-v33-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
}
@layer colors{
 :root{
    --white:hsl(0, 0%, 100%);
    --gray-500:hsl(218, 22%, 67%);
    --teal-500:hsl(179, 62%, 43%);
    --teal-400:hsl(179, 48%, 52%);
    --teal-100:hsl(204, 43%, 93%);
    --green-400:hsl(71, 73%, 54%);
    
 }
}
@layer spaces{
:root{
--s-8px: calc(8 / 16 * 1rem);
--s-16px: calc(16 / 16 * 1rem);
--s-24px: calc(24 / 16 * 1rem);
--s-40px: calc(40 / 16 * 1rem);
}
}
@layer typography{
    :root{
        --ff:'Karla', sans-serif;
        --fs-32px:calc( 32 / 16 * 1rem);
        --fs-24px:calc( 24 / 16 * 1rem);
        --fs-18px:calc( 18 / 16 * 1rem);
        --fs-16px:calc( 16 / 16 * 1rem);
        --fs-14px:calc( 32 / 16 * 1rem);
        --fs-32px:calc( 32 / 16 * 1rem);
        --line-height-115:1.15;
        --line-height-145:1.45;
        --line-height-165:1.65;
    }
}

@layer reset{
    /* // https://piccalil.li/blog/a-modern-css-reset */

/* Box sizing rules */
*,
*::before,
*::after {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

/* Remove default margin */
body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
  margin: 0;
}

/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role='list'],
ol[role='list'] {
  list-style: none;
}

/* Set core root defaults */
html:focus-within {
  scroll-behavior: smooth;
}

/* Set core body defaults */
body {
  min-height: 100vh;
  text-rendering: optimizeSpeed;
  line-height: 1.5;
}

/* A elements that don't have a class get default styles */
a:not([class]) {
  text-decoration-skip-ink: auto;
}

/* Make images easier to work with */
img,
picture {
  max-width: 100%;
  display: block;
}

/* Inherit fonts for inputs and buttons */
input,
button,
textarea,
select {
  font: inherit;
}

/* Remove all animations, transitions and smooth scroll for people that prefer not to see them */
@media (prefers-reduced-motion: reduce) {
  html:focus-within {
   scroll-behavior: auto;
  }
  
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
}
@layer general{
    body{
        font-family: var(--ff);
        font-size: var(--fs-16px);
        font-weight: 400;
        line-height: var(--line-height-165);
        letter-spacing: -0.5px;
        background-color: var(--teal-100);
    }
    .card__title{
        font-size: var(--fs-24px);
        font-weight: 700;
        line-height: var(--line-height-115);
        letter-spacing: -0.25px;
        color: var(--teal-500);
    }
    .card__subtitle{
        font-size: var(--fs-18px);
        font-weight: 700;
        line-height: var(--line-height-115);
        letter-spacing: -0.25px;
    }
    .card__description--gray-500{
      color: var(--gray-500);
    }
    .card__description span{
        font-size: var(--fs-32px);
        font-weight: 700;
        line-height: var(--line-height-115);
        letter-spacing: -0.4px;
    }
    .reasons{
        list-style: none;
    }
    .reasons > li{
        line-height: var(--line-height-145);
        letter-spacing: 0px;
        
    }
    
}
@layer layout{
.cards{
  display: grid;
  grid-template-columns:1fr;
}
.card--white{
    background-color: var(--white);
}
.card:first-child{
    padding: var(--s-40px);
}
.card:first-child .card__subtitle{
    padding-block: var(--s-24px) var(--s-8px);
    color:var(--green-400);
}
.card--teal-500{
    background-color: var(--teal-500);
}
.card:nth-child(2){
    padding-inline: var(--s-40px);
    color: var(--white);
    
}
.card:nth-child(2) .card__subtitle{
    padding-block: var(--s-24px) var(--fs-16px);
}
.btn-sign{
    display: block;
    margin-inline: auto;
    margin-block: var(--s-24px);
    background-color: var(--green-400);
    color: var(--white);
    border: none;
    padding: 0.5em 5em;
    box-shadow:0 3px 8px -2px hsl(0, 0%, 0%);
    cursor: pointer;
    
}
.btn-sign:hover{
  background-color: var(--teal-100);
  color: var(--green-400);
}
.card:nth-child(3){
    padding: var(--s-24px) var(--s-40px);
    color: var(--white);
}
.card:nth-child(3) .card__subtitle{
    padding-block-end: var(--s-16px);
}
.card--teal-400{
    background-color: var(--teal-400);
}


    @media(width>calc(512 / 16 * 1rem)){
        main{
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100dvh;
        }
    .cards{
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1fr 1fr;
        max-width: calc( 635 / 16 * 1rem);
    }
    .card:first-child{
        grid-column: 1/3;
    }
    }
    

}