/* Courtesy: frontendmentor.io */

@import url('https://fonts.googleapis.com/css2?family=Karla&display=swap');

*, *::before, *::after {
 box-sizing: border-box;
}

:root {
 /* colors */
 --cyan: hsl(179, 62%, 43%);
 --cyan-light: hsla(179, 62%, 45%, 0.523);
 --bright-yellow: hsl(71, 73%, 54%);
 --light-gray: hsl(204, 43%, 93%);
 --grayish-blue: hsl(218, 22%, 67%);
 --white: rgba(255, 255, 255, 0.945);

 /* fonts */
 --font-normal: 0.6rem;
 --font-big: 1.2rem;

 --shadow: grey;
}

.text-white {
 color: var(--white);
}

.text-yellow {
 color: var(--bright-yellow);
}

.font-normal {
 font-size: var(--font-normal);
}

.font-big {
 font-size: var(--font-big);
}

body {
 margin: 0;
 padding: 0;
 font-family: 'Karla', sans-serif;
 background-color: var(--grayish-blue);
}

.card {
 /* width: 85%; */
 margin: 4em auto;
 display: flex;
 flex-direction: column;
}

.section__one,
.section__two,
.section__three {
 padding: 0.5rem 1.1rem 0.75rem;
}

.section__one {
 background-color: var(--white);
 border-radius: 4px 4px 0 0;
}

.section__two {
 background-color: var(--cyan);
 /* display: inline-block; */
}

.costing {
 margin-top: -1rem;
 display: flex;
 align-items: center;
}

.cost {
 /* font-size: 1.2rem; */
 font-weight: bold;
}

.duration {
 opacity: 0.5;
 font-size: 0.75rem;
 /* align-self: center; */
 /* vertical-align: middle; */
}

.section__three {
 background-color: var(--cyan-light);
 border-radius: 0 0 4px 4px;
}

.section__one .heading__one {
 color: var(--cyan);
}

.section__one .details {
 line-height: 1.75;
 opacity: 0.6;
}

.section__two {
 padding-bottom: 1rem;
}

/* .section__two .heading__two, .section__three .heading__three {
 
} */

.section__two .details {
 margin-top: -1em;
 margin-bottom: 1.7rem;
 opacity: 0.8;
}

.section__two .btn {
 display: block;
 text-align: center;
 background-color: var(--bright-yellow);
 padding: 1em 5em;
 border-radius: 4px;
 text-decoration: none;
 box-shadow: 0 0.1rem 1.5rem var(--shadow);
}

.section__two .btn:focus, .section__two .btn:hover {
 opacity: 0.8;
}

.section__three p {
 line-height: 0.5;
 opacity: 0.8;
}


@media screen and (min-width: 375px) {
 .card {
  max-width: 210px;
 }
}

@media screen and (min-width: 1440px) {
 .card {
  max-width: 420px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
 }

 .section__one {
  grid-column: 1 / 3;
 }

 .section__two {
  grid-column: 1 / 2;
 }

 .section__three {
  grid-column: 2 / 3;
 }

 .section__one,
 .section__two,
 .section__three {
  padding: 1rem 1.1rem 1rem;
 }
}


/* frontendmentor.io attribution */

.attribution { font-size: 11px; text-align: center; }
.attribution a { color: hsl(228, 45%, 44%); }