style.scss

// @forward "_font-family";
@forward "_default-setting";

$g-fonts: "Lexend Deca", sans-serif;
$h-fonts: "Big Shoulders Display", cursive;
$p-color: hsla(0, 0%, 100%, 0.75);
$h-color: hsl(0, 0%, 95%);
$first: hsl(31, 77%, 52%);
$second: hsl(184, 100%, 22%);
$third: hsl(179, 100%, 13%);

// * {
//     box-sizing: border-box
//     }
body {
  min-height: 100vh;
  display: grid;
  // justify-content: center;
  // align-items: center;
  place-items: center;
  font-family: $g-fonts;
  //   background: $h-color;
  // max-width: 1440px;

  & .container {
    @media screen and (max-width:600px) {
        flex-direction: column;
    }
    display: flex;
    width: 92%;
    max-width: 1100px;
    //  justify-content: center;
    //  align-items: center;
    flex-flow: row nowrap;
    border-radius: 0.5rem;
    
      & ._container-El:nth-child(1) {
        background: $first;
        & div {
          color: $first;
        }
      }
      & ._container-El:nth-child(2) {
        background: $second;
        & div {
          color: $second;
        }
      }
      & ._container-El:nth-child(3) {
        background: $third;
        & div {
          color: $third;
        }
    }
        & ._container-El {
      width: 100%;
      padding: 3rem;
      
        & h1 {
          display: block;
          margin: 3rem 0;
          text-transform: uppercase;
          font-family: $h-fonts;
          color: $h-color;
          font-size: 2rem;
        }
        & p {
          color: $p-color;
        }
        & div {
          margin: 5rem 0 1rem 0;
          background-color: $h-color;
          width: clamp(9rem, 60%, 12rem);
          padding: 1rem;
          text-align: center;
          border-radius: 2rem;
          font-weight: 600;
        }

        & div:nth-of-type(1):hover {
          cursor: pointer;
          background: $first;
          color: $h-color;
          transition: all 300ms ease;
          border: 3px solid $h-color;
        }
        & div:nth-of-type(1):hover {
          cursor: pointer;
          background: $first;
          color: $h-color;
          transition: all 300ms ease;
          border: 3px solid $h-color;
        }
        & div:nth-of-type(1):hover {
          cursor: pointer;
          background: $first;
          color: $h-color;
          transition: all 300ms ease;
          border: 3px solid $h-color;
        }
      }
    }
  }