prices.css

@font-face {
  font-family: Gilroy-Light;
  src: url(fonts/gilroy-light.otf);
}

@font-face {
  font-family: Gilroy-BoldItalic;
  src: url(fonts/gilroy-bolditalic.otf);
}

@font-face {
  font-family: Gilroy-SemiBold;
  src: url(fonts/gilroy-semibold.otf);
}

@font-face {
  font-family: Gilroy-LightItalic;
  src: url(fonts/gilroy-lightitalic.otf);
}

@font-face {
  font-family: Gilroy-Medium;
  src: url(fonts/gilroy-medium.otf);
}

@font-face {
  font-family: Gilroy-Bold;
  src: url(fonts/gilroy-bold.otf);
}

html {
  /* Set font size for easy rem calculations
   * default document font size = 16px, 1rem = 16px, 100% = 16px
   * (100% / 16px) * 10 = 62.5%, 1rem = 10px, 62.5% = 10px
  */
  font-size: 62.5%;
  scroll-behavior: smooth;
}

/* 912px / 16px = 57em */
@media (max-width: 57em) {
  html {
    font-size: 50%;
  }
}

body {
  margin: 0;
  padding: 0;
  background-color: #fff;
  width: 100%;
}

#container {
  display: grid;
  grid-template-columns: 14% auto 40%;
  grid-template-rows: auto;
  max-width: 1920px;
  min-width: 400px;
  margin-left: auto;
  margin-right: auto;
}

#top_container {
  background-color: #000;
  grid-area: top;
  display: flex;
  padding-bottom: 74px;
}

#logo {
  width: 239.5px;
  height: auto;
  margin-top: 197px;
  margin-left: auto;
  display: block;
}

/* 1120px / 16px = 70em */
@media (max-width: 70em) {
  #logo {
    margin-right: 20%;
  }
}

/* 848px / 16px = 53em */
@media (max-width: 53em) {
  #logo {
    margin-right: 15%;
  }
}

/* 608px / 16px = 38em */
@media (max-width: 38em) {
  #logo {
    margin-right: 29px;
  }
}

#vertical_line {
  background-color: #33ff98ff;
  width: 3px;
  height: 311px;
  margin-left: 22.66%;
  margin-right: 29px;
  margin-bottom: auto;
}

/* 1120px / 16px = 70em */
@media (max-width: 70em) {
  #vertical_line {
    margin-left: 0px;
  }
}

.nav {
  background-color: #fff;
  height: 407px;
  width: 37px;
  writing-mode:vertical-rl;
  margin-top: 130px;
  margin-right: 17.5vw;
}

/* 608px / 16px = 38em */
@media (max-width: 38em) {
  .nav {
  margin-right: auto;
  }
}

/* 1920px / 16px = 120em */
@media (min-width: 120em) {
  .nav {
    margin-right: 336px;
  }
}

nav ul {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0px;
  padding-top: 9px;
  padding-bottom: 9px;
  margin: 0px;
  margin-right: 2.5px;
}

nav li {
  display:inline-block;
  list-style-type: none;
  font-family: Gilroy-Light;
  font-size: 25px;
}

nav a:link {
  text-decoration: none;
  color: #000;
}

nav a:visited {
  text-decoration: none;
  color: #000;
}

nav a:hover {
  text-decoration: none;
  font-family: Gilroy-Medium;
}

nav a:active {
  text-decoration: none;
  font-family: Gilroy-Medium;
}

.rotate {
  display: block;
  -moz-transform: rotate(-180deg);
  -webkit-transform: rotate(-180deg);
  -o-transform: rotate(-180deg);
  transform: rotate(-180deg);
}

#first_line {
  grid-area: first_line;
  background-color: #33ff98ff;
  width: 943px;
  height: 3px;
  margin-left: auto;
  margin-right: 0;
  margin-top: 111px;
}

/* 943px / 16px = 59em */
@media (max-width: 59em) {
  #first_line {
    width: 100%;
  }
}

#info_box {
  display: flex;
  justify-content: flex-end;
  background-color: #000;
  color: #fff;
  grid-area: info_box;
  font-size: 2.5rem;
  font-family: Gilroy-Light;
  padding-top: 90px;
  padding-bottom: 90px;
  padding-right: 120px;
  padding-left: 33%;
  margin-top: 24px;
  margin-bottom: 100px;
}

/* 1152px / 16px = 72em */
@media (max-width: 72em) {
  #info_box {
    padding-left: 20%;
  }
}

/* 544px / 16px = 34em */
@media (max-width: 34em) {
  #info_box {
    padding: 60px;
  }
}

#prices_heading {
  grid-area: prices_heading;
  font-family: Gilroy-BoldItalic;
  margin-left: 33%;
  margin-top: 7px;
  font-size: 6rem;
}

/* 1152px / 16px = 72em */
@media (max-width: 72em) {
  #prices_heading {
    margin-left: 20%;
  }
}

.section {
  width: 60%;
  justify-self: center;
  font-family: Gilroy-Light;
  font-size: 2.5rem;
}

/* 544px / 16px = 34em */
@media (max-width: 34em) {
  .section {
    width: 80%;
  }
}

#corporate {
  grid-area: corporate;
}

.section_header {
  font-family: Gilroy-BoldItalic;
  font-size: 4.5rem;
  margin-bottom: 33px;
}

.offer {
  font-size: 2.5rem;
  font-family: Gilroy-SemiBold;
}

.price {
  font-size: 2.5rem;
  font-family: Gilroy-LightItalic;
}

#second_line {
  grid-area: second_line;
  background-color: #33ff98ff;
  width: 1571px;
  height: 3px;
  margin-left: 0;
  margin-right: auto;
  margin-top: 52.5px;
  margin-bottom: 87.5px;
}

/* 1571px / 16px = 99em */
@media (max-width: 99em) {
  #second_line {
    width: 100%;
  }
}

#applications {
  grid-area: applications;
}

#third_line {
  grid-area: third_line;
  background-color: #33ff98ff;
  width: 650px;
  height: 3px;
  margin-left: auto;
  margin-right: 0;
  margin-top: 78px;
  margin-bottom: 100px;
}

/* 650px / 16px = 41em */
@media (max-width: 41em) {
  #third_line {
    width: 100%;
  }
}

#prints {
  grid-area: prints;
  margin-bottom: 30px;
}

#web {
  grid-area: web;
  background-color: #000;
  color: #fff;
  width: auto;
  justify-self: stretch;
  padding-top: 72px;
  padding-bottom: 47px;
  padding-left: 7.57%;
  margin-bottom: 54px;
}

#note {
  grid-area: note;
  font-family: Gilroy-LightItalic;
  color: #86888a;
  margin-bottom: 10.5px;
}

#footer_container {
  grid-area: footer;
  display: grid;
  grid-template-columns: auto 98px 21px 80px 10.5px 80px 17.5%;
  grid-template-areas: ". lang . fb . insta .";
  width: 100%;
  max-width: 1920px;
  margin-left: auto;
  margin-right: auto;
}

#language_wrapper {
  grid-area: lang;
  width: 98px;
  height: 88px;
  display: flex;
  color: #000;
  font-family: Gilroy-Light;
  font-size: 2.5rem;
  justify-content: space-evenly;
  align-items: center;
}

#language_wrapper a:link {
  text-decoration: none;
  color: #000;
}

#language_wrapper a:visited {
  text-decoration: none;
  color: #000;
}

#language_wrapper a:hover {
  text-decoration: none;
  font-family: Gilroy-Bold;
}

#language_wrapper a:active {
  text-decoration: none;
  font-family: Gilroy-Bold;
}

#language_line {
  background-color: #000;
  width: 3px;
  height: 38px;
  margin-bottom: 6px;
}

#fb_wrapper {
  background-color: #000;
  grid-area: fb;
  width: 80px;
  height: 88px;
}

#facebook_link {
  display: block;
  height: 65px;
  width: 63.5px;
  margin:auto;
  margin-top: 5px;
}

#insta_wrapper {
  background-color: #000;
  grid-area: insta;
  width: 80px;
  height: 88px;
}

#instagram_link {
  display: block;
  height: 65px;
  width: 63.5px;
  margin:auto;
  margin-top: 5px;
}

#container {
  grid-template-areas:
    "top top top"
    "first_line first_line first_line"
    "info_box info_box prices_heading"
    "corporate corporate corporate"
    "second_line second_line second_line"
    "applications applications applications"
    "third_line third_line third_line"
    "prints prints prints"
    ". web web"
    "note note note"
    "footer footer footer";
}

/* 1152px / 16px = 72em */
@media (max-width: 72em) {
  #container {
    grid-template-areas:
    "top top top"
    "first_line first_line first_line"
    "prices_heading prices_heading prices_heading"
    "info_box info_box info_box"
    "corporate corporate corporate"
    "second_line second_line second_line"
    "applications applications applications"
    "third_line third_line third_line"
    "prints prints prints"
    ". web web"
    "note note note"
    "footer footer footer";
  }
}