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

body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
ol,
ul {
  margin: 0;
  padding: 0;
  font-weight: normal;
}

ol,
ul {
  list-style: none;
}

body {
  min-height: 100vh;
  text-rendering: optimizeSpeed;
  line-height: 1.5;
}

img,
picture {
  max-width: 100%;
  display: block;
}

/* resets */

@font-face {
  font-family: "Brice";
  src: url("assets/fonts/Brice/Brice-SemiBold.otf") format("opentype");
}

@font-face {
  font-family: "Satoshi-Medium";
  src: url("assets/fonts/Satoshi/OTF/Satoshi-Medium.otf") format("opentype");
}

.logo {
  width: 95%;
  /* display: flex; */
  /* justify-content: center;
  align-items: center; */
  grid-column: 4/5;
  grid-row: 1/2;
}

.container {
  display: grid;
  /* justify-content: center; */
  /* align-content: center; */
  justify-items: center;
  row-gap: 2rem;
}

.content {
  display: grid;
  row-gap: 0.5rem;
  /* grid-template-columns: minmax(auto, max-content); */
  /* grid-template-columns: repeat(5, minmax(10px, 1fr)); */
  justify-content: center;
  /* align-content: center; */
  justify-items: center;
  align-items: center;
}

.item1 {
  grid-column: 1/2;
  grid-row: 1/2;
}

.item2 {
  grid-column: 2/3;
  grid-row: 1/2;
}

.item3 {
  grid-column: 3/4;
  grid-row: 1/2;
}

.item4 {
  grid-column: 3/4;
  grid-row: 2/3;
}

.item5 {
  grid-column: 4/5;
  grid-row: 2/3;
}

.hashtag {
  font-size: 7rem;
  grid-column: 1/3;
  grid-row: 2/3;
  line-height: 0.8;
  color: #0b25b7;
  font-family: "Brice";
}

.btmbanner {
  font-size: 1.7rem;
  grid-column: 1/5;
  grid-row: 3/4;
  background-color: #0b25b7;
  color: #ead0ca;
  padding: 0 1.4rem 1rem 1.4rem;
  line-height: 1.4;
}

.btmbanner h1 {
  font-family: "Brice";
}

.btmbanner p {
  font-family: "Satoshi-Medium";
}

.sidebanner {
  font-size: 3.8rem;
  writing-mode: sideways-lr;
  /* writing-mode: vertical-rl; */
  /* text-orientation: sideways-right;
  text-orientation: vertical-lr; */
  grid-column: 5/6;
  grid-row: 1/4;
  color: #0b25b7;
  background-color: #ead0ca;
  padding: 9rem 0 6rem 0;
  font-family: "Brice";
}

.hts {
  grid-column: 1/6;
  grid-row: 4/5;
  font-size: 5rem;
  color: #0b25b7;
  font-family: "Brice";
}

.cassie {
  display: grid;
  justify-content: center;
  justify-items: center;
  align-items: center;
  column-gap: 1rem;
}

.cassie img:first-child {
  grid-column: 1/2;
  grid-row: 1/4;
}

.cassie > p {
  grid-column: 2/3;
  grid-row: 1/2;
  font-size: 3rem;
  font-family: "Satoshi-Medium";
  color: #0b25b7;
}

.cassie img:nth-child(3) {
  grid-column: 2/3;
  grid-row: 2/4;
}

.cassie img:nth-child(4) {
  grid-column: 3/4;
  grid-row: 1/3;
}

.cassie img:nth-child(5) {
  grid-column: 3/4;
  grid-row: 3/4;
}

.cassie img:nth-child(6) {
  grid-column: 4/5;
  grid-row: 1/4;
}

.rue {
  display: grid;
  justify-content: center;
  justify-items: center;
  align-items: center;
  column-gap: 1rem;
}

.rue img:first-child {
  grid-column: 1/2;
  grid-row: 1/2;
}

.rue img:nth-child(2) {
  grid-column: 1/3;
  grid-row: 2/3;
}

.rue img:nth-child(3) {
  grid-column: 2/3;
  grid-row: 1/2;
}

.rue img:nth-child(4) {
  grid-column: 3/4;
  grid-row: 2/3;
}

.rue > p {
  grid-column: 3/4;
  grid-row: 1/2;
  font-size: 3rem;
  font-family: "Satoshi-Medium";
  color: #0b25b7;
}

.rue img:nth-child(6) {
  grid-column: 4/5;
  grid-row: 1/3;
}

.jules {
  display: grid;
  justify-content: center;
  justify-items: center;
  align-items: center;
  column-gap: 1rem;
}

.jules img:first-child {
  grid-column: 1/2;
  grid-row: 1/4;
}

.jules > p {
  grid-column: 2/3;
  grid-row: 1/2;
  font-size: 3rem;
  font-family: "Satoshi-Medium";
  color: #0b25b7;
}

.jules img:nth-child(3) {
  grid-column: 2/3;
  grid-row: 2/4;
}

.jules img:nth-child(4) {
  grid-column: 3/4;
  grid-row: 1/3;
}

.jules img:nth-child(5) {
  grid-column: 3/4;
  grid-row: 3/4;
}

.jules img:nth-child(6) {
  grid-column: 4/5;
  grid-row: 2/4;
}

.insta {
  display: grid;
  justify-content: center;
  justify-items: center;
}

.insta img:first-child {
  grid-column: 1/3;
  grid-row: 1/4;
}

.insta img:nth-child(2) {
  grid-column: 2/4;
  grid-row: 2/5;
}

.insta img:nth-child(3) {
  grid-column: 3/5;
  grid-row: 1/4;
}

.insta img:nth-child(4) {
  grid-column: 4/6;
  grid-row: 2/5;
}

.insta img:nth-child(5) {
  grid-column: 5/7;
  grid-row: 1/4;
}

section {
  display: grid;
  grid-template-columns: repeat(3, minmax(10px, 1fr));
  /* grid-template-columns: minmax(auto, max-content); */
  /* grid-auto-rows: max-content; */
  /* gap: 2rem; */
  width: 83.5%;
  justify-content: center;
  align-items: center;
  justify-items: center;
}

article img {
  width: 80%;
}

footer {
  display: grid;
  align-items: center;
  width: 90%;
  column-gap: 2rem;
}

footer h1 {
  grid-column: 1/2;
  grid-row: 1/2;
  font-family: "Satoshi-Medium";
}

footer p {
  grid-column: 1/2;
  grid-row: 2/3;
  width: 82%;
  font-family: "Satoshi-Medium";
}

footer img:nth-child(3) {
  grid-column: 1/2;
  grid-row: 3/4;
}

footer ul {
  grid-column: 2/3;
  grid-row: 2/4;
  align-self: start;
  font-family: "Satoshi-Medium";
}

footer ul li {
  padding: 0.3rem;
}

footer img:nth-child(5) {
  grid-column: 2/3;
  grid-row: 4/5;
}

.tag {
  font-size: 3rem;
}

.container p:nth-child(7) {
  font-size: 4rem;
  font-family: "Brice";
  color: #0b25b7;
}

.tag p {
  font-family: "Satoshi-Medium";
  color: #0b25b7;
}

.tag h1 {
  font-family: "Brice";
  color: #0b25b7;
}