/* ================ COLOUR SHORTCUT ================= */
/* div.wrapper-main {
  background-color: gray;
}

div.main-image {
  background: darkblue;
}

div.main-zoomicon {
  background: darkblue;
}

.main-zoomicon a {
  background: darkblue;
}

div.main-description {
  background: darkblue;
}

div.main-caption {
  background: darkblue;
}

div.main-share {
  background: darkslateblue;
} */
/* ================ COLOUR SHORTCUT ================= */

.wrapper-main {
  /* background-color: gray; */
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: auto;
  gap: 0.5em;
}

.main-image {
  /* background: darkblue; */
  grid-column: 1 / 3;
  grid-row: auto;
  margin-bottom: 0.8rem;
  height: fit-content;
}

.main-image a {
  cursor: zoom-in;
}

/* div.main-zoomicon {
  background: darkblue;
  grid-column: 2 / 3;
  grid-row-start: 1;
  align-self: end;
  justify-self: end;
  height: fit-content;
  width: fit-content;
  z-index: 3;
}  */

.main-share {
  /* background: darkslateblue; */
  grid-column: 1 / 3;
  grid-row: auto;
  justify-self: flex-end;
}

.main-zoomicon {
  /* background: rgb(124, 124, 158); */
  grid-column: 2 / 3;
  grid-row: auto;
  /* cursor: zoom-in; */
  justify-self: end;
}

.main-zoomicon button {
  background-color: transparent;
}

.grid-wrapper-share {
  /* background-color: rgb(38, 60, 38); */
  cursor: zoom-in;
  width: fit-content;
  display: grid;
  grid-template-columns: (1fr 1rem);
  justify-self: end;
  gap: 0;
  height: 2rem;
  align-items: flex-start;
}

.grid-wrapper-share img {
  /* background-color: rgb(92, 107, 92); */
  grid-column: 1/2;
  height: 1.3rem;
  filter: invert(14%) sepia(11%) saturate(15%) hue-rotate(12deg) brightness(92%)
    contrast(86%);
  position: relative;
  top: -0.19rem;
}

.grid-wrapper-share:hover img {
  filter: invert(27%) sepia(47%) saturate(11%) hue-rotate(341deg)
    brightness(121%) contrast(101%);
  height: 1.4rem;
  top: -0.16rem;
}

.darkmode .grid-wrapper-share img {
  filter: invert(78%) sepia(0%) saturate(2132%) hue-rotate(349deg)
    brightness(80%) contrast(78%);
}

.darkmode .grid-wrapper-share:hover img {
  filter: invert(78%) sepia(0%) saturate(2132%) hue-rotate(349deg)
    brightness(97%) contrast(78%);
}

.grid-wrapper-share:hover button {
  font-size: 1.05rem;
}

.zoomicon {
  /* background-color: rgb(92, 107, 92); */
  grid-column: 2/3;
  height: 100%;
}

.zoomtext {
  /* background-color: rgb(92, 107, 92); */
  grid-column: 1/2;
  height: 100%;
}

.flex-zoomicon {
  background-color: none;
  display: flex;
  align-items: center;
}

.flex-zoomicon button {
  background-color: transparent;
}

.flex-zoomicon:hover button {
  /* background: darkblue; */
}

.main-zoomicon button {
  /* background-color: darkblue; */
  /* background: transparent; */
  border: none;
  cursor: zoom-in;
  color: hsl(0, 0%, 28%);
  font-size: 0.96rem;
}

.zoombutton-text:hover p {
  cursor: zoom-in;
  font-size: 1.1rem;
  filter: brightness(1.08);
  -webkit-filter: brightness(1.08);
  -moz-filter: brightness(1.08);
}

.darkmode .main-zoomicon button {
  /* background-color: darkblue; */
  /* background: transparent; */
  border: none;
  cursor: zoom-in;
  color: hsl(45, 3%, 70%);
}

.main-description-blurb {
  /* background: darkblue; */
  grid-column: 1 / 2;
  grid-row: auto;
}

.main-description-expand {
  /* background: darkblue; */
  grid-column: 1 / 3;
  grid-row: auto;
}

.main-caption {
  /* background: darkblue; */
  grid-column: 2 / 3;
  grid-row: auto;
  text-align: right;
  height: fit-content;
  font-size: 0.9rem;
}

/* ======= MEDIA QUERIES ======= ======= MEDIA QUERIES =======  */
/* For extremely small screen devices (480px and below) PORTRAIT TINY */
@media only screen and (max-width: 480px) {
  main {
    grid-column: 1 / 25;
  }

  .wrapper-main {
    gap: 0.6rem;
  }

  .main-image {
    grid-row: 1/2;
  }

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

  .main-caption {
    grid-column: 1 / 3;
    grid-row: 3/4;
    margin: 0 0 0 3rem;
  }

  .main-share {
    grid-column: 2 / 3;
    grid-row: 4 / 5;
    margin: 0 0.5rem 0 0;
  }

  .main-description-blurb {
    grid-column: 1 / 3;
    grid-row: 5/6;
    margin: 0;
  }

  .main-description-expand {
    grid-column: 1 / 3;
    grid-row: 5/6;
    margin: 0 1rem 0 1rem;
  }
}

/* For extremely small screen devices (481px and above) PORTRAIT PHONE */
@media only screen and (min-width: 481px) {
  main {
    grid-column: 1 / 25;
  }

  .wrapper-main {
    gap: 0.6rem;
  }

  .main-image {
    grid-row: 1/2;
  }

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

  .main-description-blurb {
    grid-column: 1 / 2;
    grid-row: 3/6;
  }

  .main-description-expand {
    grid-column: 1 / 2;
    grid-row: 5/6;
    position: relative;
    top: -1rem;
  }

  .main-caption {
    grid-column: 2 / 3;
    grid-row: 3/4;
    margin: 0 0 0 1rem;
  }

  .main-share {
    grid-column: 2 / 3;
    grid-row: 4/5;
    margin: 0;
    /* position: relative;
    top: -0.5rem;
    right: 1rem; */
  }
}

/* Small screen devices (600px and above) PORTRAIT TABLET */
@media only screen and (min-width: 600px) {
  main {
    grid-column: 1 / 25;
  }
}

/* Medium screen devices (768px and above) LANDSCAPE TABLET  */
@media only screen and (min-width: 768px) {
  main {
    grid-column: 1 / 17;
  }
}

/* Big screen devices (1024px and above) LANDSCAPE LAPTOP */
@media only screen and (min-width: 1024px) {
  main {
    grid-column: 1 / 17;
  }

  .main-description-expand {
    top: -2.5rem;
  }
}

/* Extra big screen devices (1201px and above) LANDSCAPE TV */
@media only screen and (min-width: 1201px) {
  main {
    grid-column: 1 / 19;
  }

  .main-description-expand {
    top: -2.5rem;
  }
}

/* ======= MEDIA QUERIES ======= ======= MEDIA QUERIES =======  */