style.css

* {
  border: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: "Open Sans", sans-serif;
  font-weight: 300;
}

main {
  display: grid;
  grid-template-rows: 1fr 13.7vw;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-areas:
    "main-image main-image main-image main-image"
    "bottom-image-1 bottom-image-2 bottom-image-3 bottom-image-4";
  grid-gap: 2px;
  margin: 0 auto;
  min-height: calc(100vh - 50px);
}

a {
  text-decoration: none;
}

nav,
.searchbar-container,
.main-image-content,
.main-image h4,
.main-image,
nav > * {
  display: flex;
  align-items: center;
}

nav > *,
.main-image,
.main-image-content {
  justify-content: center;
}

nav {
  width: 90%;
  max-width: 1200px;
  height: 35px;
  margin: 0 auto;
  position: absolute;
  top: 7%;
  left: 5%;
  right: 5%;
  background: linear-gradient(to top, #5f5f5f, #464646 40%, #bdbdbd);
  border-radius: 4px;
}

nav > * {
  height: 100%;
  padding: 10px 20px;
  flex: 1;
  text-align: center;
  font-size: 12px;
  font-weight: 400;
  text-shadow: 0 -1px #444;
}

nav > *,
.main-image > *,
nav svg {
  color: white;
}

nav > *:not(:last-child) {
  border-right: 1px solid rgb(98, 98, 98);
}

nav > *:not(:last-child):hover {
  background:
    radial-gradient(
      rgba(35, 35, 35, 0.3),
      rgba(35, 35, 35, 0.3) 70%,
      rgba(100, 100, 100, 0.3) 100%
    );
}

nav svg {
  height: 22px;
  margin-top: -5px;
}

.searchbar-container {
  flex: 2.3;
}

.searchbar-container form input {
  align-self: center;
  border-radius: 10px;
  background-image: url(./assets/images/searchbar.png);
  background-position-y: -0.25px;
  background-position-x: -0.75px;
  background-repeat: no-repeat;
  padding-left: 20px;
  width: 74%;
}

.searchbar-container form input:focus,
.searchbar-container form input:active {
  background-position-y: -20.25px;
  outline: none;
}

.searchbar-container form {
  width: 100%;
  height: 100%;
  margin-top: -7px;
}

.main-image {
  flex-direction: column;
  grid-area: main-image;
  background: url(./assets/images/hero-image.jpg);
  background-size: cover;
  background-position: 50% 100%;
  padding-top: 100px;
  padding-bottom: 100px;
}

.main-image-content {
  flex-direction: column;
}

.main-image h1 {
  font-size: 4.1vw;
}

.main-image h3 {
  font-size: 1.9vw;
  text-align: center;
  width: 60%;
  margin-top: 20px;
  margin-bottom: 20px;
}

.main-image h4 {
  font-size: 1.5vw;
}

footer .site-links span {
  border-right: 1px solid #ccc;
  padding-left: 5px;
  padding-right: 5px;
}

.main-image h4:hover span {
  text-decoration: underline;
}

.main-image h4 i {
  font-size: 13px;
  align-self: top;
  border: 1px solid white;
  padding: 6px 6px 6px 8px;
  border-radius: 100%;
  margin-left: 10px;
}

.sub-image-iphone5s {
  grid-area: bottom-image-1;
  background: url(./assets/images/iphone5s-image.jpg);
}

.sub-image-iphone5c {
  grid-area: bottom-image-2;
  background: url(./assets/images/iphone5c-image.jpg);
}

.sub-image-happy-birthday {
  grid-area: bottom-image-3;
  background: url(./assets/images/happy-birthday-image.jpg);
}

.sub-image-supplier {
  grid-area: bottom-image-4;
  background: url(./assets/images/supplier-image.jpg);
}

.sub-image {
  background-size: contain;
}

footer {
  width: 60%;
  margin: 10px auto 20px auto;
  font-size: 0.7vw;
  padding-top: 10px;
}

.site-links {
  float: right;
}

.shopping-links,
.copyright-span,
.privacy-span,
.site-links {
  color: #6e6e6e;
  font-size: 10px;
  font-weight: 500;
}

.copyright-info a,
.shopping-links a,
footer .site-links span a {
  text-decoration: none;
  color: #08c;
  font-weight: 500;
}

.site-links .US-logo-image {
  width: 12px;
  height: auto;
  border-right: none;
}

.site-links .US-logo-container {
  border-right: none;
}

.shopping-links {
  margin-bottom: 5px;
}

.copyright-span {
  border-right: 1px solid #ccc;
  padding-right: 5px;
  clear: both;
}

.privacy-span {
  padding-left: 5px;
}

@media all and (max-width: 255px) {
  nav {
    width: 240px;
  }

  main {
    width: 100%;
  }
}