/* CSS STYLES SECTION */

/* ###################################### */
/* ######### STYLE CSS ################## */
/* ###################################### */


/* ###################################### */
/* ############# HEADER ################# */
/* ###################################### */
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: var(--dflt-bg);
  height: auto;
  padding: 3.2rem;
  position: relative;
}

.header-gallery {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: var(--dflt-bg);
  height: auto;
  padding: 3.2rem;
  position: relative;
}

.header-img {
  background-image: url(/img/GlasgowTartan.jpg);
  opacity: .8;
  border-start-start-radius: 2.2rem;
  border-start-end-radius: 2.2rem;
}

.logo {
  height: 9.6rem;
  background-color: #fff;
  /* opacity: .5; */
  /* border-radius: 1.1rem; */
}

.logo-shadow {
  box-shadow: 7px 9px 1px rgb(0, 0, 0, .7);
  /* border: 1px solid #dee2e6; */
  border-radius: var(--br-shdo);
  background-color: var(--dflt-bg);
}

.header-list {
  display: flex;
  list-style: none;
  align-items: center;
  gap: 1.0rem;
}

.header-link:link,
.header-link:visited {
  display: inline-block;
  font-size: 1.6rem;
  font-weight: 500;
  color: #000;
  text-decoration: none;
  padding: 4.8px 9.6px 4.8px 9.6px;
  background-color: rgba(0, 183, 24, 0.899);
  /* border-radius: 1.1rem; */
  transition: all 0.3s;
}

.header-link:hover,
.header-link:active {
  color: #fff;
  /* box-shadow: inset 0 0 0 2px #888; */
  /* border: 1px solid currentColor; */
}


/* MAIN TITLE */
/* "Pics 'n' Stuff" */
.title {
  text-align: center;
  font-family: "Genos", sans-serif;
  background-image: linear-gradient(#2f9e44, #40c057);
}


/* ###################################### */
/* ############## HERO ################## */
/* ###################################### */

.hero {
  display: flex;
  width: 100%;
  gap: 2.4rem;


}

.gradient {
  background-image: linear-gradient(#40c057, #51cf66, #c92a2a, #f03e3e, #862e9c, #ae3ec9)
    /* background-image: url(/img/GlasgowTartan.jpg); */
}

.hero-col {
  flex: 1;
}

.hero-crest-img {
  width: 75%;
  margin-left: 6.5rem;
}

.shadow {
  box-shadow: 5px 7px 8px rgb(0, 0, 0, 0.5);
  /* border: 1px solid #dee2e6; */
  border-radius: var(--br-shdo);
  background-color: var(--dflt-bg);
}

/* ###################################### */
/* ####### FAMILY SYMBOLS ############### */
/* ###################################### */

.family {
  display: flex;
  gap: 2rem;
  max-width: 100rem;
}

.family-text {
  flex: 60%;
}

.arms-img {
  display: flex;
  flex: 40%;
  justify-content: center;
}

.crest-img {
  width: 100%;
  border: 1px solid black;
  border-radius: var(--br-img);
  background-color: rgba(236, 255, 244, 0.736);
  overflow: hidden;
}

.figure {
  display: table;
  text-align: center;
}

.poem {
  margin-left: 4rem;
}

.cite {
  font-size: 1.0rem;
}

.cite-link:link,
.cite-link:visited {
  color: #333;
  text-decoration: none;
}

.cite-link:hover,
.cite-link:active {
  color: blue;
}

.description-em {
  font-size: 1.6rem;
  color: #777;
}


.tartan {
  display: flex;
  gap: 2rem;
  max-width: 80rem;
}

.tartan-text {
  flex: 70%;
}

.tartan-img {
  width: 30rem;
  flex: 30%;
}

.bottom-space {
  margin-bottom: 6.4rem;
}

/* ###################################### */
/* ########## GALLERY ################### */
/* ###################################### */

.gallery-title {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-items: center;
  padding: 3.2rem;
}

.gallery-title h2 {
  margin-bottom: 3.2rem;
}

.gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.6rem;
  padding: 1.6rem;
  align-items: center;
  text-align: center;

}

.gallery-description {
  text-align: center;
  margin-left: 0;
}

.gallery a {
  font-size: 1.8rem;
  font-weight: 400;
  color: var(--fnt-clr);
  text-decoration: none;
}

.gallery-item {
  /* padding: 0 0 1.6rem 0; */
  margin-bottom: 1.6rem;
}

.gallery-img {
  max-width: 100%;
  margin-bottom: 0.8rem;
  transition: all 0.4s;
}

.gallery-img:hover {
  transform: scale(1.5);
}