@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap');
:root {
    --white: hsl(0, 0%, 100%);
    --slate-300: hsl(212, 45%, 89%);
    --slate-500: hsl(216, 15%, 48%);
    --slate-900: hsl(218, 44%, 22%);
  }
  
*{
    font-family: "Outfit", serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    margin: 0;
    padding:0;
    box-sizing: border-box;

  }
  #full-width{
    width: 100%;
    height: 100vh;
    background-color: var(--slate-300);
    
  }
  .container{
    height: 100vh;
  }
  .content{
    width: 20%;
    padding: 0.8rem;
    background-color: var(--white);
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 1.15rem;
  }
  .img-container img{
    width: 100%;
    border-radius: 1.15rem;

  }
  .text-container{
    padding: 1.4rem 0.63rem;
    text-align: center;
  }
  .text-container .heading
  {
    margin: 0px 0px 1rem 0px;
    
  }
  .text-container .heading p {
    font-weight: 800;
    font-size: 1.125rem;
  }
  .text-container .description{
    font-weight: 400;
    font-size: 0.88rem;
    color: var(--slate-500);
    margin:0 0 0.9rem 0px;
  }

  @media screen and (max-width: 375px){
    .content{
      width: 85%;
      padding: 1rem;
  }
  .text-container .heading p {
    
    font-size: 1.30rem;
  }
  .text-container .description{
    font-size: 1rem;

   
  }

}