@import url(global.css);
@import url(color.css);
@import url(typography.css);

#body {
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: column;
  gap: 80px;
  padding-bottom: 80px;
}

/* Top section */

#section-top {
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: row;
}

#back {
  width: fit-content;
  height: auto;
  display: flex;
  flex-direction: row;
  padding: 24px 40px 24px 120px;
  gap: 16px;
  align-items: center;
}
#back:hover {
  background-color: var(--color-grey-400);
}
/* Main section */

#section-main {
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: column;
  padding: 0px 120px 0px 120px;
  gap: 80px;
}

#page-title {
  width: 100%;
  text-align: start;
}

.collection {
  width: 100%;
  height: 600px;
  display: flex;
  flex-direction: row;
  justify-content: end;
  align-items: end;
}

#coastlines {
  background-image: url(photography/coastlines/turfWars-21by9.jpeg);
  background-size: cover;
  background-position: center;
}

.collection-link {
  width: fit-content;
  height: auto;
  display: flex;
  flex-direction: row;
  padding: 24px 40px 24px 40px;
  gap: 16px;
  align-items: center;
}

.collection-link:hover {
  background-color: var(--color-grey-800);
}




/* Responsive design */
@media (max-width: 1440px) {
  #body {
    gap: 64px;
    padding-bottom: 64px;
  }
  #back {
    padding-left: 64px;
  }
  #section-main {
    padding: 0px 64px 0px 64px;
    gap: 64px;
  }
  .collection {
    height: 450px;
  }
  .collection-link {
    padding: 24px 40px 24px 40px;
  }
}

@media (max-width: 1024px) {
  #body {
    gap: 40px;
    padding-bottom: 40px;
  }
  #back {
    padding-left: 40px;
  }
  #section-main {
    padding: 0px 40px 0px 40px;
    gap: 40px;
  }
  .collection {
    height: 400px;
  }
  .collection-link {
    padding: 24px 40px 24px 40px;
  }
}

@media (max-width: 768px) {
  #body {
    gap: 24px;
    padding-bottom: 24px;
  }
  #back {
    padding: 16px 24px 16px 24px;
  }
  #section-main {
    padding: 0px;
    gap: 24px;
  }
  #page-title {
    text-align: center;
  }
  .collection {
    height: 350px;
  }
  .collection-link {
    padding: 16px 24px 16px 24px;
  }
}

@media (max-width: 500px) {
  .collection {
    height: 250px;
  }
}