/* Jump to sections
  (Use Cmd+F and search for these codes):
  Browser Reset: BR01A2B3
  Base / Global Styles: BS56V7W8
  Project Layouts: PL78F9G0
  BTS Card Layouts: BC12H3I4
  Portsea Card Layouts: PC34J5K6
  SP Managed Card Layouts: SM56L7M8
  RLAMLS Card Layouts: RL78N9O0
  Frosh Toons Card Layouts: FT01A2B3
  Ice Cream in Space Card Layouts: ICIS04C5D6
  Lost the Pot Card Layouts: LTP07E8F9
  Dream Factory Card Layouts: DF10G1H2
*/

/* —————————————————————————————————————————————————————————————— */
/*   Flashcard Layouts [FL90P1Q2] */
/*   #region Flashcard Layouts */

#flashcard-hero-image .img-placeholder {
  grid-row: 1 / 3;
  grid-column: 3 / 5;
}
#flashcard-hero-image .card-title {
  grid-row: 4;
  grid-column: 1 / 3;
}

#flashcard-top-title .card-title {
  grid-row: 0;
  grid-column: 1 / 4;
  align-self: start;
  transform: translateY(-50%);
}
#flashcard-top-title .img-placeholder {
  grid-row: 3 / 5;
  grid-column: 3 / 5;
}

#flashcard-vertical-title .card-title {
  grid-row: 1 / 5;
  grid-column: 3;
  writing-mode: sideways-lr;
  justify-self: end;
}
#flashcard-vertical-title .img-placeholder {
  grid-row: 1 / 5;
  grid-column: 4;
}

#flashcard-full-image .img-placeholder {
  grid-row: 1 / 5;
  grid-column: 1 / 5;
}

#flashcard-centered-title .card-title {
  grid-row: 1 / 5;
  grid-column: 1 / 5;
  justify-self: center;
  align-self: center;
}

#flashcard-dual-image .card-title {
  grid-row: 0;
  grid-column: 1 / 4;
  align-self: start;
  transform: translateY(-50%);
}
#flashcard-dual-image .card-text {
  grid-row: 2;
  grid-column: 1 / 3;
}
#flashcard-dual-image .placeholder-one {
  grid-row: 3 / 5;
  grid-column: 1 / 3;
}
#flashcard-dual-image .placeholder-two {
  grid-row: 3 / 5;
  grid-column: 3 / 5;
}

#flashcard-triple-image .placeholder-one {
  grid-row: 1 / 2;
  grid-column: 1 / 2;
  width: 150%;
  height: 150%;
  transform: translateX(25%);
}
#flashcard-triple-image .placeholder-two {
  grid-row: 3 / 5;
  grid-column: 1;
  width: 150%;
  transform: translateX(10%);
}
#flashcard-triple-image .placeholder-three {
  grid-row: 1 / 5;
  grid-column: 3 / 5;
  justify-self: end;
  width: 60%;
}
#flashcard-triple-image .card-text {
  grid-row: 3;
  grid-column: 3;
  z-index: 2;
  align-self: top;
  transform: translateX(calc(-50% + 20px));
}

#flashcard-tall-image .card-text {
  grid-row: 1 / 3;
  grid-column: 3;
}
#flashcard-tall-image .img-placeholder {
  grid-row: 1 / 3;
  grid-column: 4 / 5;
  height: 110%;
}

#flashcard-centered-media .img-placeholder {
  grid-row: 1 / 5;
  grid-column: 1 / 5;
  aspect-ratio: 16 / 9;
  width: 50%;
  height: auto;
  justify-self: center;
  align-self: center;
}
#flashcard-centered-media .card-text {
  grid-row: 4;
  grid-column: 2 / 4;
  transform: translateY(-30px);
}

#flashcard-bottom-image .card-title {
  grid-row: 1;
  grid-column: 1 / 4;
  align-self: start;
  transform: translateY(-50%);
}
#flashcard-bottom-image .card-text {
  grid-row: 1;
  grid-column: 3 / 5;
  transform: translateY(-20px);
}
#flashcard-bottom-image .img-placeholder {
  grid-row: 3 / 5;
  grid-column: 1 / 5;
}

#flashcard-text-right .card-text {
  grid-row: 1 / 5;
  grid-column: 4;
  justify-self: end;
  width: 80%;
}

#flashcard-image-text .card-text {
  grid-row: 3 / 5;
  grid-column: 1;
  transform: translateY(-20px);
}
#flashcard-image-text .img-placeholder {
  grid-row: 1 / 5;
  grid-column: 2 / 5;
}

#flashcard-title-text-image .card-title {
  grid-row: 1;
  grid-column: 1 / 3;
  align-self: start;
}
#flashcard-title-text-image .card-text {
  grid-row: 3 / 5;
  grid-column: 1;
  align-self: start;
}
#flashcard-title-text-image .img-placeholder {
  grid-row: 1 / 3;
  grid-column: 3 / 5;
}

#flashcard-image-grid .card-title {
  grid-row: 1;
  grid-column: 1 / 3;
  align-self: start;
}
#flashcard-image-grid .card-text {
  grid-row: 1;
  grid-column: 3 / 5;
  align-self: start;
}
.flashcard:nth-of-type(14) .img-placeholder:nth-child(n+1) {
  grid-row: 3;
}
.flashcard:nth-of-type(14) .img-placeholder:nth-child(n+5):nth-child(-n+8) {
  grid-row: 4;
}

#flashcard-three-column .card-title {
  grid-row: 1;
  grid-column: 1 / 3;
  align-self: start;
}
#flashcard-three-column .card-text {
  grid-row: 1;
  grid-column: 3 / 5;
  align-self: start;
  justify-self: end;
}
#flashcard-three-column .placeholder-one {
  grid-row: 2 / 5;
  grid-column: 2;
}
#flashcard-three-column .placeholder-two {
  grid-row: 2 / 5;
  grid-column: 3;
}
#flashcard-three-column .placeholder-three {
  grid-row: 2 / 5;
  grid-column: 4;
}

#flashcard-inverse {
  background: var(--color-primary);
  color: var(--white);
}
#flashcard-inverse .card-text {
  grid-row: 1;
  grid-column: 3 / 5;
  align-self: start;
  justify-self: end;
  color: var(--white);
}

#flashcard-split-background {
  padding: 0;
  background: var(--color-primary);
}
#flashcard-split-background .bg-fill {
  grid-row: 1 / 3;
  grid-column: 1 / 5;
  background: var(--white);
  border-radius: 20px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 20px;
  padding: 40px 20px 0px 20px;
}
#flashcard-split-background .card-text {
  grid-row: 1;
  grid-column: 1 / 2;
  align-self: start;
}
#flashcard-split-background .project-info {
  grid-row: 3;
  grid-column: 1 / 5;
  align-self: start;
}

#flashcard-tall-right .card-title {
  grid-row: 1;
  grid-column: 1 / 4;
  align-self: start;
}
#flashcard-tall-right .card-text {
  grid-row: 3;
  grid-column: 1;
  align-self: start;
}
#flashcard-tall-right .img-placeholder {
  grid-row: 1 / 5;
  grid-column: 3 / 5;
}

#flashcard-colored-top {
  padding: 0;
  background: var(--color-primary);
}
#flashcard-colored-top .bg-fill {
  grid-row: 1;
  grid-column: 1 / 5;
  background: var(--white);
  border-radius: 20px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(1, 1fr);
  gap: 20px;
  padding: 40px 20px 0px 20px;
}
#flashcard-colored-top .card-text {
  grid-row: 1;
  grid-column: 2 / 5;
  align-self: start;
  justify-self: start;
}
#flashcard-colored-top .project-info {
  grid-row: 2;
  grid-column: 1 / 5;
  align-self: start;
}
/*   #endregion Flashcard Layouts */
/* —————————————————————————————————————————————————————————————— */

/* —————————————————————————————————————————————————————————————— */
/*   Browser Reset [BR01A2B3] */
/*   #region Browser Reset */
body {
  background: var(--baby-pink);
  margin: 0;
  padding: 0;
  min-height: 100vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

.container {
  flex: 1;
  position: relative;
  width: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 30vh 0;
}
/*   #endregion Browser Reset */
/* —————————————————————————————————————————————————————————————— */

/* —————————————————————————————————————————————————————————————— */
/*   Base / Global Styles [BS56V7W8] */
/*   #region Base / Global Styles */
.flashcard {
  background: var(--white);
  border-radius: 20px;
  padding: 40px 20px 0px 20px;
  height: 920px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(4, 1fr);
  gap: 20px;
  position: sticky;
  top: 50%;
  transform: translateY(-50%) scale(0.9);
  margin: 0 20px 15vh;
}

.progress-marker {
  position: fixed;
  top: 50%;
  right: 20px;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 100;
}

.marker {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--color-primary);
  opacity: 0.3;
  transition: opacity 0.3s ease;
  text-decoration: none;
}

.marker.active {
  opacity: 1;
}

.home-marker {
  width: auto;
  height: auto;
  background: none;
}

.home-marker i {
  color: var(--color-primary);
  font-size: 16px;
  opacity: 0.3;
  transition: opacity 0.3s ease;
}

.home-marker.active i {
  opacity: 1;
}

.project-info {
  grid-column: 1 / -1;
  grid-row: 5;
  display: flex;
  justify-content: space-between;
}

.img-placeholder {
  background: #ccc;
  border-radius: 8px;
}


.card-title {
  color: var(--color-primary);
  margin: 0;
  padding: 0;
  align-self: center;
}

.card-text {
  color: var(--color-primary);
  margin: 0;
  padding: 0;
  justify-self: start;
}

.nav-buttons {
  display: flex;
  justify-content: space-between;
  padding: 0 100px;
}

.nav-buttons h4 {
  color: purple;
  cursor: pointer;
}

/*   #endregion Base / Global Styles */
/* —————————————————————————————————————————————————————————————— */

/* —————————————————————————————————————————————————————————————— */
/*   BTS Card Layouts [BC12H3I4] */
/*   #region BTS Card Layouts */
.bts-flashcard {
  border: #800080 4px solid;
}

#bts-card1 .img-placeholder {
  grid-row: 1 / 5;
  grid-column: 1 / 5;
  background-image: url(../Assets/wrk/BTS/BTS\ HERO.png);
  background-size: cover;
  background-position: center;
}

#bts-card2 .card-text {
  grid-row: 1 / 5;
  grid-column: 4;
  justify-self: end;
  width: 80%;
}

#bts-card3 .img-placeholder {
  grid-row: span 1;
  grid-column: span 1;
  aspect-ratio: 16 / 9;
  align-self: center;
}

#bts-card3 .placeholder-one {
  background-image: url(../Assets/wrk/BTS/BTS00.png);
  background-size: cover;
  background-position: center;
}

#bts-card3 .placeholder-two {
  background-image: url(../Assets/wrk/BTS/BTS02.png);
  background-size: cover;
  background-position: center;
}

#bts-card3 .placeholder-three {
  background-image: url(../Assets/wrk/BTS/BTS03.png);
  background-size: cover;
  background-position: center;
}

#bts-card3 .placeholder-four {
  background-image: url(../Assets/wrk/BTS/BTS04.png);
  background-size: cover;
  background-position: center;
}

#bts-card3 .placeholder-five {
  background-image: url(../Assets/wrk/BTS/BTS05.png);
  background-size: cover;
  background-position: center;
}

#bts-card3 .placeholder-six {
  background-image: url(../Assets/wrk/BTS/BTS06.png);
  background-size: cover;
  background-position: center;
}

#bts-card3 .placeholder-seven {
  background-image: url(../Assets/wrk/BTS/BTS07.png);
  background-size: cover;
  background-position: center;
}

#bts-card3 .placeholder-eight {
  background-image: url(../Assets/wrk/BTS/BTS08.png);
  background-size: cover;
  background-position: center;
}

#bts-card3 .placeholder-nine {
  background-image: url(../Assets/wrk/BTS/BTS09.png);
  background-size: cover;
  background-position: center;
}

#bts-card3 .placeholder-ten {
  background-image: url(../Assets/wrk/BTS/BTS10.png);
  background-size: cover;
  background-position: center;
}

#bts-card3 .placeholder-eleven {
  background-image: url(../Assets/wrk/BTS/BTS11.png);
  background-size: cover;
  background-position: center;
}

#bts-card3 .placeholder-twelve {
  background-image: url(../Assets/wrk/BTS/BTS12.png);
  background-size: cover;
  background-position: center;
}

#bts-card3 .placeholder-thirteen {
  background-image: url(../Assets/wrk/BTS/BTS13.png);
  background-size: cover;
  background-position: center;
}

#bts-card3 .placeholder-fourteen {
  background-image: url(../Assets/wrk/BTS/BTS14.png);
  background-size: cover;
  background-position: center;
}

#bts-card3 .placeholder-fifteen {
  background-image: url(../Assets/wrk/BTS/BTS15.png);
  background-size: cover;
  background-position: center;
}

#bts-card3 .placeholder-sixteen {
  background-color: #000000;
  background-size: cover;
  background-position: center;
}

#bts-card4 .card-text {
  grid-row: 2;
  grid-column: 2 / 4;
  align-self: flex-end;
}

#bts-card4 .img-placeholder {
  grid-row: 3;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-color: #ffffff;
}

#bts-card4 .placeholder-one {
  grid-row: 3;
  background-image: url(../Assets/wrk/BTS/BTS\ \ Laptop\ Man\ 100.jpg);

}
#bts-card4 .placeholder-two {
  grid-row: 3;
  background-image: url(../Assets/wrk/BTS/BTS\ Buiness\ 100.jpg);
}
#bts-card4 .placeholder-three {
  grid-row: 3;
  background-image: url(../Assets/wrk/BTS/BTS\ \ School\ 100.jpg);
}

#bts-card4 .placeholder-four {
  grid-row: 3;
  background-image: url(../Assets/wrk/BTS/BTS\ \ Computer\ Kid\ 100.jpg);
}

#bts-card5 .card-text {
  grid-row: 1 / 5;
  grid-column: 1;
  align-self: flex-end;
}
#bts-card5 .placeholder-one {
  grid-row: 1 / 3;
  grid-column: 3 / 5;
  background-image: url(../Assets/wrk/BTS/BTS09.png);
  background-size: cover;
  background-position: center;
}
#bts-card5 .placeholder-two {
  grid-row: 3 / 5;
  grid-column: 3 / 5;
  background-image: url(../Assets/wrk/BTS/BTS06.png);
  background-size: cover;
  background-position: center;
}

#bts-card6 .card-text {
  grid-row: 3 / 5;
  grid-column: 1;
  transform: translateY(-20px);
}
#bts-card6 .img-placeholder {
  grid-row: 1 / 5;
  grid-column: 2 / 5;
  background-image: url(../Assets/wrk/BTS/BTS\ Portal.png);
  background-size: cover;
  background-position: center;
}

#bts-card7 .card-text {
  grid-row: 3 / 5;
  grid-column: 1;
  transform: translateY(-20px);
}

#bts-card7 .img-placeholder {
  grid-row: 1 / 5;
  grid-column: 2 / 5;
  background-image: url(../Assets/wrk/BTS/BTS01.png);
  background-size: cover;
  background-position: center;
}

#bts-card8 .card-text {
  grid-row: 3 / 5;
  grid-column: 1;
  transform: translateY(-20px);

}
#bts-card8 .img-placeholder {
  grid-row: 1 / 5;
  grid-column: 2 / 5;
  background-image: url(../Assets/wrk/BTS/BTS07.png);
  background-size: cover;
  background-position: center;
}

#bts-card9 .card-text {
  grid-row: 3 / 5;
  grid-column: 1;
  align-self: start;
}
#bts-card9 .img-placeholder {
  grid-row: 3 / 5;
  grid-column: 2 / 5;
  aspect-ratio: 16 9;
  background-image: url(../Assets/wrk/BTS/BTS10.png);
  background-size: cover;
  background-position: center;
}

#bts-card10 .card-text {
  grid-row: 1;
  grid-column: 4;
  align-self: start;
}
#bts-card10 .img-placeholder {
  grid-row: 3 / 5;
  grid-column: 2 / 5;
  aspect-ratio: 16 9;
  background-image: url(../Assets/wrk/BTS/BTS11.png);
  background-size: cover;
  background-position: center;
}

#bts-card11 .card-text {
  grid-row: 1 / 3;
  grid-column: 1;
  align-self: start;
}

#bts-card11 .img-placeholder {
  grid-row: 1 / 3;
  grid-column: 2 / 5;
  aspect-ratio: 16 9;
  background-image: url(../Assets/wrk/BTS/BTS12.png);
  background-size: cover;
  background-position: center;
}

#bts-card12 .card-text {
  grid-row: 3 / 4;
  grid-column: 4;
  align-self: start;
}

#bts-card12 .img-placeholder {
  grid-row: 1 / 3;
  grid-column: 2 / 5;
  aspect-ratio: 16 9;
  background-image: url(../Assets/wrk/BTS/BTS13.png);
  background-size: cover;
  background-position: center;
}

/*   #endregion BTS Card Layouts */
/* —————————————————————————————————————————————————————————————— */

/* —————————————————————————————————————————————————————————————— */
/*   Portsea Card Layouts [PC34J5K6] */
/*   #region Portsea Card Layouts */
.portsea-flashcard {
  background-color: #4D6568;
  border: #DBDBCE 4px solid;
  color: #DBDBCE;
}

.portsea-flashcard .card-text, .portsea-flashcard .card-title {
  color: #DBDBCE;
}

#portsea-card1 {
  background-color: #DBDBCE;
  border: #4D6568 4px solid;
  color: #4D6568;
}

#portsea-card1 .img-placeholder {
  grid-row: 1 / 5;
  grid-column: 1 / 5;
  background-image: url(../Assets/wrk/Portsea/Portsea-lowres01.webp);
  background-size: cover;
  background-position: center;
}

#portsea-card2 {
  background-color: #DBDBCE;
  border: #4D6568 4px solid;
   color: #4D6568;
}

#portsea-card2 .card-text {
  grid-row: 1 / 5;
  grid-column: 4;
  justify-self: end;
  width: 80%;
   color: #4D6568;
}

#portsea-card3 .card-text {
  grid-row: 4;
  grid-column: 1 / 3;
  align-self: start;
}
#portsea-card3 .placeholder-one{
  grid-row: 3;
  grid-column: 3;
  background-image: url(../Assets/wrk/Portsea/Brickwork.png);
  background-size: cover;
  background-position: center;
}
#portsea-card3 .placeholder-two{
  grid-row: 3;
  grid-column: 4;
  background-image: url(../Assets/wrk/Portsea/Mews\ Garage\ Doors.png);
  background-size: cover;
  background-position: center;
}
#portsea-card3 .placeholder-three{
  grid-row: 4;
  grid-column: 3;
  background-image: url(../Assets/wrk/Portsea/Pyrus\ Chanticlear\ Treas.png);
  background-size: cover;
  background-position: center;
}
#portsea-card3 .placeholder-four{
  grid-row: 4;
  grid-column: 4;
  background-image: url(../Assets/wrk/Portsea/Timber\ Cobbles.png);
  background-size: cover;
  background-position: center;
}

#portsea-card4 {
  grid-template-columns: 1fr 1fr 1.5fr;
  grid-template-rows: 1fr 1fr 1fr;
}

#portsea-card4 .project-info {
  grid-row: 4;      /* or 3, depending on where you want it */
}

#portsea-card4 .card-text {
  grid-row: 3;
  grid-column: 3;
  justify-self: end;
  align-self: flex-end;
  transform: translateY(-20px);
}
#portsea-card4 .placeholder-one {
  grid-row: 1 / 4;
  grid-column: 1 / 3;
  background-size: cover;
  background-position: center;
  justify-self: start;
  background-image: url(../Assets/wrk/Portsea/Portsea-lowres02\ lock\ up.jpg);
  width: 100%;
  height: 100%;
}

#portsea-card4 .placeholder-two {
  grid-row: 1 / 3;
  grid-column: 3;
  justify-self: end;
  background-size: cover;
  background-position: center;
  background-image: url(../Assets/wrk/Portsea/Portsea-lowres02\ wood.jpg);
      width: 100%;
  height: 100%;
}

#portsea-card5 .card-title {
  grid-row: 1;
  grid-column: 1 / 3;
  align-self: start;
}
#portsea-card5 .card-text {
  grid-row: 3 / 5;
  grid-column: 1;
  align-self: start;
}
#portsea-card5 .img-placeholder {
  grid-row: 1 / 3;
  grid-column: 3 / 5;
  background-image: url(../Assets/wrk/Portsea/Portsea-lowres04.webp);
  background-size: cover;
  background-position: center;
}

#portsea-card6 .img-placeholder {
  grid-row: 1 / 5;
  grid-column: 1 / 5;
    background-image: url(../Assets/wrk/Portsea/Portsea-lowres04.webp);
  background-size: cover;
  background-position: center;
}

#portsea-card7 {
  grid-template-columns: 2fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr 1fr;
}

#portsea-card7 .placeholder-one {
  grid-row: 1 / 5;
  grid-column: 1 / 2;
  background-color: #4D6568;
}
#portsea-card7 .placeholder-two {
  grid-row: 1 / 3;
  grid-column: 2 / 4;
  background-color: #DBDBCF;
}
#portsea-card7 .placeholder-three {
  grid-row: 3 / 5;
  grid-column: 2;
  background-color: #2A373F;
}

#portsea-card7 .placeholder-four {
  grid-row: 3;
  grid-column: 3;
  background-color: #654C0C;
}

#portsea-card7 .placeholder-five {
  grid-row: 4;
  grid-column: 3;
  background-color: #A8A8A8;
}

#portsea-card7 .card-text {
  grid-row: 3;
  grid-column: 3;
  z-index: 2;
  align-self: top;
  transform: translateX(calc(-50% + 20px));
}


#portsea-card8 {
  grid-template-columns: 3fr 3fr 1fr;
  grid-template-rows: 1fr 1fr;
}

#portsea-card8 .project-info{
  grid-row: 3;
}
#portsea-card8 .card-text {
  grid-row: 2;
  grid-column: 3;
}
#portsea-card8 .placeholder-one {
  grid-row: 1 / 3;
  grid-column: 1;
  background-image: url(../Assets/wrk/Portsea/Portsea-lowres05\ 2.jpg);
  background-size: cover;
  background-position: center;
}
#portsea-card8 .placeholder-two {
  grid-row: 1 / 3;
  grid-column: 2;
    background-image: url(../Assets/wrk/Portsea/Portsea-lowres05\ 8.jpg);
  background-size: cover;
  background-position: center;
}

#portsea-card9 {
  grid-template-columns: 2fr 1fr 0.25fr;
  grid-template-rows: 1fr 0.25fr 0.25fr 1fr;
}

#portsea-card9 .placeholder-one {
  grid-row: 1 / 3;
  grid-column: 1;
  background-image: url(../Assets/wrk/Portsea/Portsea-lowres09.webp);
  background-size: cover;
  background-position: center;
}
#portsea-card9 .placeholder-two {
  grid-row: 3 / 5;
  grid-column: 1;
  background-image: url(../Assets/wrk/Portsea/Portsea-lowres08.webp);
  background-size: cover;
  background-position: center;
}

#portsea-card9 .placeholder-three {
  grid-row: 4;
  grid-column: 2;
  background-image: url(../Assets/wrk/Portsea/Portsea-lowres07.webp);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-color: #DBDBCF;
}
#portsea-card9 .card-text {
  grid-row: 2 / 4;
  grid-column: 2 / 4;
  width: 75%;
  justify-self: end;
  align-self: flex-end;
}

#portsea-card10 {
  grid-template-columns: 0.25fr 1fr 2fr;
  grid-template-rows: 1fr 0.25fr 0.25fr 1fr;
}

#portsea-card10 .placeholder-one {
  grid-row: 1 / 3;
  grid-column: 3;
  background-image: url(../Assets/wrk/Portsea/Portsea-lowres10.webp);
  background-size: cover;
  background-position: center;
}
#portsea-card10 .placeholder-two {
  grid-row: 3 / 5;
  grid-column: 3;
  background-image: url(../Assets/wrk/Portsea/Portsea-lowres11.webp);
  background-size: cover;
  background-position: center;
}
#portsea-card10 .placeholder-three {
  grid-row: 1;
  grid-column: 2;
  background-image: url(../Assets/wrk/Portsea/Portsea-lowres12.webp);
  background-size: cover;
  background-position: center;
}
#portsea-card10 .card-text {
  grid-row: 2 / 4;
  grid-column: 1 / 3;
  width: 75%;
  align-self: start;
  justify-self: end;
}

#portsea-card11{
  grid-template-columns: 1fr;
  grid-template-rows: 1fr 0.25fr 0.25fr 1fr;
}
#portsea-card11 .img-placeholder{
  grid-row: 2 / 5;
  grid-column: 1;
  background-image: url(../Assets/wrk/Portsea/Portsea-lowres13.webp);
  background-size: cover;
  background-position: bottom;
}

#portsea-card12 {
 grid-template-columns: 3fr 1fr;
 grid-template-rows: 1fr;;
}

#portsea-card12 .project-info {
  grid-row: 2
}

#portsea-card12 .img-placeholder {
  grid-row: 1 /2;
  grid-column: 1/2;
  background-image: url(../Assets/wrk/Portsea/Portsea-lowres14.webp);
  background-size: cover;
  background-position: center left;
}

#portsea-card13{
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(4, 1fr);
}

#portsea-card13 .img-placeholder {
  grid-row: span 1;
  grid-column: span 1;
  aspect-ratio: 16 / 9;
  align-self: center;
}

#portsea-card13 .placeholder-one {
  background-image: url(../Assets/wrk/Portsea/Portsea-lowres-storyboard01.jpg);
  background-size: cover;
  background-position: center;
}


#portsea-card13 .placeholder-two {
  background-image: url(../Assets/wrk/Portsea/Portsea-lowres-storyboard02.jpg);
  background-size: cover;
  background-position: center;
}

#portsea-card13 .placeholder-three {
  background-image: url(../Assets/wrk/Portsea/Portsea-lowres-storyboard03.jpg);
  background-size: cover;
  background-position: center;
}

#portsea-card13 .placeholder-four {
  background-image: url(../Assets/wrk/Portsea/Portsea-lowres-storyboard04.jpg);
  background-size: cover;
  background-position: center;
}

#portsea-card13 .placeholder-five {
  background-image: url(../Assets/wrk/Portsea/Portsea-lowres-storyboard05.jpg);
  background-size: cover;
  background-position: center;
}

#portsea-card13 .placeholder-six {
  background-image: url(../Assets/wrk/Portsea/Portsea-lowres-storyboard06.jpg);
  background-size: cover;
  background-position: center;
}

#portsea-card13 .placeholder-seven {
  background-image: url(../Assets/wrk/Portsea/Portsea-lowres-storyboard07.jpg);
  background-size: cover;
  background-position: center;
}

#portsea-card13 .placeholder-eight {
  background-image: url(../Assets/wrk/Portsea/Portsea-lowres-storyboard08.jpg);
  background-size: cover;
  background-position: center;
}

#portsea-card13 .placeholder-nine {
  background-image: url(../Assets/wrk/Portsea/Portsea-lowres-storyboard09.jpg);
  background-size: cover;
  background-position: center;
}

#portsea-card13 .placeholder-ten {
  background-image: url(../Assets/wrk/Portsea/Portsea-lowres-storyboard10.jpg);
  background-size: cover;
  background-position: center;
}

#portsea-card13 .placeholder-eleven {
  background-image: url(../Assets/wrk/Portsea/Portsea-lowres-storyboard11.jpg);
  background-size: cover;
  background-position: center;
}

#portsea-card13 .placeholder-twelve {
  background-image: url(../Assets/wrk/Portsea/Portsea-lowres-storyboard12.jpg);
  background-size: cover;
  background-position: center;
}

#portsea-card13 .placeholder-thirteen {
  background-image: url(../Assets/wrk/Portsea/Portsea-lowres-storyboard13.jpg);
  background-size: cover;
  background-position: center;
}

#portsea-card13 .placeholder-fourteen {
  background-image: url(../Assets/wrk/Portsea/Portsea-lowres-storyboard14.jpg);
  background-size: cover;
  background-position: center;
}

#portsea-card13 .placeholder-fifteen {
  background-image: url(../Assets/wrk/Portsea/Portsea-lowres-storyboard15.jpg);
  background-size: cover;
  background-position: center;
}

#portsea-card13 .placeholder-sixteen {
  background-image: url(../Assets/wrk/Portsea/Portsea-lowres-storyboard16.jpg);
  background-size: cover;
  background-position: center;
}

#portsea-card13 .placeholder-seventeen {
  background-image: url(../Assets/wrk/Portsea/Portsea-lowres-storyboard17.jpg);
  background-size: cover;
  background-position: center;
}

#portsea-card13 .placeholder-eighteen {
  background-image: url(../Assets/wrk/Portsea/Portsea-lowres-storyboard18.jpg);
  background-size: cover;
  background-position: center;
}

#portsea-card13 .placeholder-nineteen {
  background-image: url(../Assets/wrk/Portsea/Portsea-lowres-storyboard19.jpg);
  background-size: cover;
  background-position: center;
}

#portsea-card13 .placeholder-twenty {
  background-image: url(../Assets/wrk/Portsea/Portsea-lowres-storyboard20.jpg);
  background-size: cover;
  background-position: center;
}
/*   #endregion Portsea Card Layouts */
/* —————————————————————————————————————————————————————————————— */

/* —————————————————————————————————————————————————————————————— */
/*   SP Managed Card Layouts [SM56L7M8] */
/*   #region SP Managed Card Layouts */
.spmanaged-flashcard {
  border: #ffffff 4px solid;
}

#spmanaged-card1 {
  border: #EFC716 4px solid;
  color: #EFC716;
}
#spmanaged-card1 .img-placeholder {
  grid-row: 1 / 5;
  grid-column: 1 / 5;
  background-image: url(../Assets/wrk/SPManaged/SPManaged-lowres00.webp);
  background-size: cover;
  background-position: center; 
}

#spmanaged-card2 {
  border: #4E2760 4px solid;
  color: #4E2760;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 3fr 0.5fr;
  column-gap: 50px;
}

#spmanaged-card2 .project-info{
  grid-row: 3;
}

#spmanaged-card2 .card-text {
  grid-row: 2;
  grid-column: 2 / 4;
  align-self: center;
  color: #4E2760;
}

#spmanaged-card2 .placeholder-one {
  grid-row: 1 / 2;
  grid-column: 1;
  background-image: url(../Assets/wrk/SPManaged/Logo.jpg);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-color: #ffffff;
}

#spmanaged-card2 .placeholder-two {
  grid-row: 1 / 2;
  grid-column: 2;
  background-image: url(../Assets/wrk/SPManaged/Logo\ Line.jpg);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-color: #ffffff;
}

#spmanaged-card2 .placeholder-three {
  grid-row: 1 / 2;
  grid-column: 3;
  background-image: url(../Assets/wrk/SPManaged/Logo\ Small.jpg);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-color: #ffffff;
}


#spmanaged-card3 {
  border: #A3C265 4px solid;
  color: #A3C265;
}

#spmanaged-card3 .img-placeholder {
  grid-row: 1 / 5;
  grid-column: 1 / 5;
  background-image: url(../Assets/wrk/SPManaged/SPmanaged-lowres03.webp);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-color: #A3C265;
}

#spmanaged-card4 {
  grid-template-columns: repeat(8, 1fr);
  grid-template-rows: 1fr;
  border: #F28BCA 4px solid;
  color: #F28BCA;
}

#spmanaged-card4 .placeholder-one {
  grid-column: span 1;
  grid-row: span 1;
  background-color: #DDA7B7;
}

#spmanaged-card4 .placeholder-two {
  grid-column: span 1;
  grid-row: span 1;
    background-color: #EB4C72;
}

#spmanaged-card4 .placeholder-three {
  grid-column: span 1;
  grid-row: span 1;
    background-color: #4E2760;
}

#spmanaged-card4 .placeholder-four {
  grid-column: span 1;
  grid-row: span 1;
    background-color: #111230;
}

#spmanaged-card4 .placeholder-five {
  grid-column: span 1;
  grid-row: span 1;
    background-color: #2766AD;
}

#spmanaged-card4 .placeholder-six {
  grid-column: span 1;
  grid-row: span 1;
    background-color: #A3C265;
}

#spmanaged-card4 .placeholder-seven {
  grid-column: span 1;
  grid-row: span 1;
    background-color: #EFC717;
}

#spmanaged-card4 .placeholder-eight {
  grid-column: span 1;
  grid-row: span 1;
    background-color: #DD8E29;
}

#spmanaged-card4 .project-info {
  grid-row: 2;
}

#spmanaged-card5 {
  border: #EB4C72 4px solid;
  color: #EB4C72;
  background-image: url('../Assets/wrk/SPManaged/SPmanaged-lowres05.jpg');
  background-size: cover;
  background-position: top left;
}

#spmanaged-card6 {
  grid-template-columns: 2fr 2fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  color: #DDA7B7;
  border: #DDA7B7 4px solid;
}

#spmanaged-card6 .project-info {
  grid-row: 4;
}

#spmanaged-card6 .card-text {
  grid-row: 2 / 4;
  grid-column: 3;
  color: #DDA7B7;
  align-self: flex-end;
}
#spmanaged-card6 .placeholder-one{
  grid-row: 2;
  grid-column: 1;
  background-image: url(../Assets/wrk/SPmanaged/SPmanaged-lowres07.webp);
  background-size: cover;
  background-position: center;
}
#spmanaged-card6 .placeholder-two{
  grid-row: 2;
  grid-column: 2;
  background-image: url(../Assets/wrk/SPmanaged/SPmanaged-lowres07.webp);
  background-size: cover;
  background-position: center;
}
#spmanaged-card6 .placeholder-three{
  grid-row: 3;
  grid-column: 1;
  background-image: url(../Assets/wrk/SPmanaged/SPmanaged-lowres07.webp);
  background-size: cover;
  background-position: center;
}
#spmanaged-card6 .placeholder-four{
  grid-row: 3;
  grid-column: 2;
  background-image: url(../Assets/wrk/SPmanaged/SPmanaged-lowres07.webp);
  background-size: cover;
  background-position: center;
}

#spmanaged-card7{
  color: #2766AD;
  border: #2766AD 4px solid;
}

#spmanaged-card7 .card-text {
  grid-row: 3;
  grid-column: 1 / 3;
    color: #2766AD;

}

#spmanaged-card7 .placeholder-one {
  grid-row: 1 / 3;
  grid-column: 3 / 5;
  background-image: url(../Assets/wrk/SPManaged/SPmanaged-lowres06.webp);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-color: #2766AD;
  aspect-ratio: 16 / 9;
  align-self: center;
}

#spmanaged-card7 .placeholder-two {
  grid-row: 3 / 5;
  grid-column: 3 / 5;
  background-image: url(../Assets/wrk/SPManaged/SPmanaged-lowres09.webp);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-color: #A3C265;
  aspect-ratio: 16 / 9;
  align-self: center;
}

#spmanaged-card8 {
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(5, 1fr);
  color: #DD8E29;
  border: #DD8E29 4px solid;
  color: #DD8E29;
}

#spmanaged-card8 .project-info {
  grid-row: 6;
}
#spmanaged-card8 .placeholder-one{
  grid-row: 1 / 5;
  grid-column: 2 / 6;
  background-image: url(../Assets/wrk/SPManaged/SPmanaged-lowres10.webp);
  background-size: cover;
  background-position: center;
}

#spmanaged-card8 .placeholder-two {
  grid-row: 4 / 6;
  grid-column: 1 / 3;
  z-index: 5;
  background-image: url(../Assets/wrk/SPManaged/SPmanaged-lowres08.webp);
  background-size: cover;
  background-position: center;
}


/*   #endregion SP Managed Card Layouts */
/* —————————————————————————————————————————————————————————————— */

/* —————————————————————————————————————————————————————————————— */
/*   RLAMLS Card Layouts [RL78N9O0] */
/*   #region RLAMLS Card Layouts */
.rlamls-flashcard {
  border: #6CCCD9 4px solid;
  background-color: #110C47;
  color: #6CCCD9;
} 

#rlamls-body .card-title,
#rlamls-body .card-text {
  color: #6CCCD9;
  }

#rlamsl-body {
  background: #0A072C;
}
/* body, #rlamsl-body > h1,h2,h3,h4,h5,h6{
  color: #6CCCD9;
}

#rlamls-card1 .card-title {
  grid-row: 1 / 5;
  grid-column: 3;
  writing-mode: sideways-lr;
  justify-self: end;
}*/

#rlamls-card1 .img-placeholder {
  grid-row: 1 / 5;
  grid-column: 1 / 5;
  background-image: url(../Assets/wrk/RLAMLS/RLAMLS-lowres01.webp);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

#rlamls-card2 .img-placeholder {
  grid-row: 1 / 5;
  grid-column: 3 / 5;
  background-image: url(../Assets/wrk/RLAMLS/RLAMLS-lowres03.jpeg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
#rlamls-card2 .card-text {
  grid-row: 3 / 5;
  grid-column: 0;
  align-self: start;
}

#rlamls-card3 .card-text {
  grid-row: 1 / 3;
  grid-column: 1 / 1;
  width: 80%;
  justify-self: start;
}

#rlamls-card3 .img-placeholder {
  grid-row: 4 / 5;
  grid-column: 1 / 5;
  background-image: url(../Assets/wrk/RLAMLS/RLAMLS-lowres04_Letters_CROP.jpg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

#rlamls-card4 .card-text {
  grid-row: 1 / 3;
  grid-column: 1 / 1;
  width: 80%;
  justify-self: start;
}

#rlamls-card4 .img-placeholder {
  grid-row: 3 / 5;
  grid-column: 1 / 5;
  background-image: url(../Assets/wrk/RLAMLS/RLAMLS-lowres10_invert.png);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-color: black;
}

#rlamls-card5 .img-placeholder {
  grid-row: 1 / 5;
  grid-column: 1 / 5;
  aspect-ratio: 16 / 9;
  width: 50%;
  height: auto;
  justify-self: center;
  align-self: center;
    background-image: url(../Assets/wrk/RLAMLS/RLAMLS-lowres05.jpeg);
  background-size: cover;
  background-position: center;
}

#rlamls-card5 .card-text {
  grid-row: 4;
  grid-column: 2 / 4;
  transform: translateY(-30px);
}
#rlamls-card6 {
  display: grid; 
  grid-template-columns: repeat(6, 1fr); 
  grid-template-rows: repeat(4, 1fr); 
  gap: 25px 25px; 
  grid-template-areas: 
    "image-1 image-1 . . image-4 image-4"
    "image-1 image-1 . . . ."
    ". image-2 . . image-5 image-6"
    ". image-3 image-3 . text-1 text-1"; 
}


#rlamls-card6 .placeholder-one {
  grid-area: image-1;
  background-image: url(../Assets/wrk/RLAMLS/Lock\ up.png);
  background-size: cover;
  background-position: center;
}
#rlamls-card6 .placeholder-two {
  grid-area: image-2;
  background-image: url(../Assets/wrk/RLAMLS/Lock\ up\ small.png);
  background-size: cover;
  background-position: center;
}

#rlamls-card6 .placeholder-three {
  grid-area: image-3;
  background-image: url(../Assets/wrk/RLAMLS/Lock\ up\ medium.png);
  background-size: cover;
  background-position: center;
}

#rlamls-card6 .placeholder-four {
   grid-area: image-4;
  background-image: url(../Assets/wrk/RLAMLS/Logo\ Full.png);
  background-size: cover;
  background-position: center;
}

#rlamls-card6 .placeholder-five {
  grid-area: image-5;
    background-image: url(../Assets/wrk/RLAMLS/Logo\ LS.png);
  background-size: cover;
  background-position: center;
}

#rlamls-card6 .placeholder-six {
 grid-area: image-6;
  background-image: url(../Assets/wrk/RLAMLS/Logo\ S.png);
  background-size: cover;
  background-position: center;
}

#rlamls-card6 .card-text {
  grid-area: text-1;
  z-index: 2;
}

#rlamls-card7 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    gap: 25px 25px;
}

#rlamls-card7 .placeholder-one {
  grid-row-start: 2;
  background-image: url(../Assets/wrk/RLAMLS/ABI.png);
  background-size: cover;
  background-position: center;
}
#rlamls-card7 .placeholder-two {
  grid-row-start: 2;
  background-image: url(../Assets/wrk/RLAMLS/TRI.png);
  background-size: cover;
  background-position: center;
}
#rlamls-card7 .placeholder-three {
  grid-row-start: 2;
  background-image: url(../Assets/wrk/RLAMLS/CAM.png);
  background-size: cover;
  background-position: center;
}
#rlamls-card7 .placeholder-four{
  grid-row-start: 2;
  background-image: url(../Assets/wrk/RLAMLS/ARC.png);
  background-size: cover;
  background-position: center;
}
#rlamls-card7 .placeholder-five {
  grid-row-start: 2;
  background-image: url(../Assets/wrk/RLAMLS/VIS.png);
  background-size: cover;
  background-position: center;
}

#rlamls-card7 .card-text {
    grid-column: span 3 / span 3;
    grid-column-start: 2;
    grid-row-start: 3;
}

#rlamls-card8 {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
}

#rlamls-card8 .card-title {
  grid-row: 1;
  grid-column: 1 / 3;
  align-self: start;
}
#rlamls-card8 .card-text {
  grid-row: 1;
  grid-column: 3 / 5;
  align-self: start;
  justify-self: end;
}
#rlamls-card8 .placeholder-one {
  grid-row: 1 / 5;
  grid-column: 1;
      background-color: #ffffff;
}
#rlamls-card8 .placeholder-two {
  grid-row: 1 / 5;
  grid-column: 2;
      background-color: #6ECBD9;
}
#rlamls-card8 .placeholder-three {
  grid-row: 1 / 5;
  grid-column: 3;
  background-color: #5C5FAC;
}

#rlamls-card8 .placeholder-four {
  grid-row: 1 / 5;
  grid-column: 4;
  background-color: #28236B;
}

#rlamls-card8 .placeholder-five {
  grid-row: 1 / 5;
  grid-column: 5;
  background-color: #0b0b0b;
}

#rlamls-card9 {
  display: grid; 
  grid-template-columns: 1fr 1fr 1fr 1fr; 
  grid-template-rows: 1fr 1fr 1fr 1fr; 
  gap: 25px 30px; 
  grid-template-areas: 
    "Text-1 Text-1 Image-2 Image-2"
    "Image-1 Image-1 Image-2 Image-2"
    "Image-1 Image-1 Text-2 Image-3"
    "Image-1 Image-1 Text-2 Image-3"; 
}
#rlamls-card9 .placeholder-one {
  grid-area: Image-1;
    background-image: url(../Assets/wrk/RLAMLS/Group\ 78.png);
  background-size: cover;
  background-position: center;
}
#rlamls-card9 .placeholder-two {
  grid-area: Image-2;
  background-image: url(../Assets/wrk/RLAMLS/Group\ 43.png);
  background-size: cover;
  background-position: center;
}
#rlamls-card9 .placeholder-three {
  grid-area: Image-3;
    background-image: url(../Assets/wrk/RLAMLS/Group\ 42.png);
  background-size: cover;
  background-position: center;
}
#rlamls-card9 .card-text-one {
  grid-area: Text-1;
}

#rlamls-card9 .card-text-two {
  grid-area: Text-2;
  z-index: 2;
  align-self: top;
  transform: translateX(calc(-50% + 20px));
}

#rlamls-card10 .img-placeholder {
  grid-row: 1 / 5;
  grid-column: 1 / 5;
    background-image: url(../Assets/wrk/RLAMLS/RLAMLS-lowres11.webp);
  background-size: cover;
  background-position: center;
}

#rlamls-card11 {
  display: grid; 
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr; 
  grid-template-rows: 1fr 1fr 1fr; 
  gap: 25px 20px; 
  grid-template-areas: 
    "Image-1 Image-1 Image-1 Image-2 Image-2"
    "Image-1 Image-1 Image-1 Image-3 Image-3"
    "Text-1 Text-1 Text-1 Image-4 Image-4"; 
}
#rlamls-card11 .img-placeholder-one{
  grid-area: Image-1;
  height: 125%;
  background-image: url(../Assets/wrk/RLAMLS/RLAMLS-lowres18.jpg);
  background-size: cover;
  background-position: center;

}
#rlamls-card11 .img-placeholder-two {
  grid-area: Image-2;
  background-image: url(../Assets/wrk/RLAMLS/RLAMLS-lowres13.jpg);
  background-size: cover;
  background-position: center;
}
#rlamls-card11 .img-placeholder-three {
  grid-area: Image-3;
  background-image: url(../Assets/wrk/RLAMLS/RLAMLS-lowres15.jpg);
  background-size: cover;
  background-position: center;
}
#rlamls-card11 .img-placeholder-four {
  grid-area: Image-4;
  background-image: url(../Assets/wrk/RLAMLS/RLAMLS-lowres14.jpg);
  background-size: cover;
  background-position: center;
}
#rlamls-card11 .card-text {
  grid-area: Text-1;
  height: 50%;
  align-self: self-end;
}

#rlamls-card11 .project-info {
  grid-row: 4; 
}

/*   #endregion RLAMLS Card Layouts */
/* —————————————————————————————————————————————————————————————— */

/* —————————————————————————————————————————————————————————————— */
/*   Frosh Toons Card Layouts [FT01A2B3] */
/*   #region Frosh Toons Card Layouts */
.ft-flashcard {
  border: var(--color-primary) 4px solid;
  color: var(--color-primary);
}

.ft-flashcard .img-placeholder {
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-color: #ffffff;
}

#ft-card1 .img-placeholder {
  grid-row: 1 / 5;
  grid-column: 1 / 5;
  background-image: url(../Assets/snap/FT/Explorations.jpg);
}
/*   #endregion Frosh Toons Card Layouts */
/* —————————————————————————————————————————————————————————————— */

/* —————————————————————————————————————————————————————————————— */
/*   Ice Cream in Space Card Layouts [ICIS04C5D6] */
/*   #region Ice Cream in Space Card Layouts */
.icis-flashcard {
  border: var(--color-primary) 4px solid;
  color: var(--color-primary);
}

.icis-flashcard .img-placeholder {
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-color: #ffffff;
}

#icis-card1 {
  background-color: #cbcbcb;
}

#icis-card1 .img-placeholder {
  grid-row: 1 / 5;
  grid-column: 1 / 5;
  background-image: url(../Assets/snap/ICIS/ICIS\ Title.png);
  background-color: #cbcbcb;
}
#icis-card2 .img-placeholder {
  grid-row: 1 / 5;
  grid-column: 1 / 5;
  background-image: url(../Assets/snap/ICIS/ICIS_00\ Concept.jpg);
  background-size: cover;
}
#icis-card3 .img-placeholder {
  grid-row: 1 / 5;
  grid-column: 1 / 5;
  background-image: url(../Assets/snap/ICIS/ICIS_01\ Storyboard.jpg);
}

#icis-card4 {
  background-color: #ffffff;
}

#icis-card4 .videoBackground {
  grid-row: 1 / 5;
  grid-column: 1 / 5;
  aspect-ratio: 16 / 9;
  align-self: center;  
}
#icis-card4 .videoBackground video{
  width: 100%;
  height: 100%;
  border-radius: 10px;
  object-fit: cover; /* crop video to fill container */
  display: block;
}

/*   #endregion Ice Cream in Space Card Layouts */
/* —————————————————————————————————————————————————————————————— */

/* —————————————————————————————————————————————————————————————— */
/*   Lost the Pot Card Layouts [LTP07E8F9] */
/*   #region Lost the Pot Card Layouts */
.ltp-flashcard {
  border: var(--color-primary) 4px solid;
  color: var(--color-primary);
}

.ltp-flashcard .img-placeholder {
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-color: #ffffff;
}

#ltp-card1 .img-placeholder {
  grid-row: 1 / 5;
  grid-column: 1 / 5;
  background-image: url(../Assets/snap/LTP/Pot.jpg);
}
#ltp-card2 .img-placeholder {
  grid-row: 1 / 5;
  grid-column: 1 / 5;
  background-image: url(../Assets/snap/LTP/Pot.jpg);
}
#ltp-card3 .img-placeholder {
  grid-row: 1 / 5;
  grid-column: 1 / 5;
  background-image: url(../Assets/snap/LTP/Pot.jpg);
}
/*   #endregion Lost the Pot Card Layouts */
/* —————————————————————————————————————————————————————————————— */

/* —————————————————————————————————————————————————————————————— */
/*   Dream Factory Card Layouts [DF10G1H2] */
/*   #region Dream Factory Card Layouts */
.df-flashcard {
  border: var(--color-primary) 4px solid;
  color: var(--color-primary);
}

.df-flashcard .img-placeholder {
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-color: #ffffff;
}

#df-card1 .img-placeholder {
  grid-row: 1 / 5;
  grid-column: 1 / 5;
  background-image: url(../Assets/snap/DF/factory.jpeg);
}

#df-card2 .img-placeholder {
  grid-row: 1 / 5;
  grid-column: 1 / 5;
  background-image: url(../Assets/snap/DF/DF_01\ Sketch\ Large.jpeg);
}
/*   #endregion Dream Factory Card Layouts */
/* —————————————————————————————————————————————————————————————— */