.dark {
     background: #ffffff;
}

.light {
     background: #f3f5f7;
}

a,
a:hover {
     text-decoration: none;
     transition: color 0.3s ease-in-out;
}

#pageHeaderTitle {
     margin: 2rem 0;
     text-transform: uppercase;
     text-align: center;
     font-size: 2.5rem;
}

/* Cards */
.postcard {
     flex-wrap: wrap;
     display: flex;

     box-shadow: 0 4px 21px -12px rgba(0, 0, 0, 0.66);
     border-radius: 10px;
     margin: 0 0 2rem 0;
     overflow: hidden;
     position: relative;
     color: #ffffff;

     &.dark {
          background-color: #ffffff;
     }
     &.light {
          background-color: #e1e5ea;
     }

     .t-dark {
          color: #18151f;
     }

     a {
          color: inherit;
     }

     h1,
     .h1 {
          margin-bottom: 0.5rem;
          font-weight: 500;
          line-height: 1.2;
     }

     .small {
          font-size: 80%;
     }

     .postcard__title {
          font-size: 1.25rem;
          color: #334155 !important;
          font-weight: 700;
     }

     .postcard__title:hover {
          color: #6366f1 !important;
     }

     .postcard__img {
          max-height: 180px;
          width: 100%;
          object-fit: cover;
          position: relative;
          padding: 15px;
          border-radius: 26px !important;
     }

     .postcard__img_link {
          display: contents;
     }

     .postcard__bar {
          width: 50px;
          height: 10px;
          margin: 10px 0;
          border-radius: 5px;
          background-color: #ffffff;
          transition: width 0.2s ease;
     }

     .postcard__text {
          padding: 1.5rem;
          position: relative;
          display: flex;
          flex-direction: column;
     }

     .postcard__preview-txt {
          overflow: hidden;
          text-overflow: ellipsis;
          height: 100%;
          color: #6f7e93 !important;
     }

     .postcard__tagbox {
          display: flex;
          flex-flow: row wrap;
          font-size: 14px;
          margin: 20px 0 0 0;
          padding: 0;
          justify-content: center;

          .tag__item {
               display: inline-block;
               background: rgba(255, 255, 255, 0.4);
               border-radius: 3px;
               padding: 2.5px 10px;
               margin: 0 5px 5px 0;
               cursor: default;
               user-select: none;
               transition: background-color 0.3s;

               &:hover {
                    background: rgba(255, 255, 255, 0.8);
               }
          }
     }

     &:before {
          content: "";
          position: absolute;
          top: 0;
          right: 0;
          bottom: 0;
          left: 0;
          background-image: white;
          opacity: 1;
          border-radius: 10px;
     }

     &:hover .postcard__bar {
          width: 100px;
     }
}

@media screen and (min-width: 769px) {
     .postcard {
          flex-wrap: inherit;

          .postcard__title {
               font-size: 1.5rem;
          }

          .postcard__tagbox {
               justify-content: start;
          }

          .postcard__img {
               max-width: 300px;
               max-height: 100%;
               transition: transform 0.3s ease;
          }

          .postcard__text {
               padding: 3rem;
               width: 100%;
          }

          .media.postcard__text:before {
               content: "";
               position: absolute;
               display: block;
               background: #ffffff;
               top: -20%;
               height: 130%;
               width: 55px;
          }

          &:hover .postcard__img {
               transform: scale(1.1);
          }

          &:nth-child(2n + 1) {
               flex-direction: row;
          }

          &:nth-child(2n + 0) {
               flex-direction: row-reverse;
          }

          &:nth-child(2n + 1) .postcard__text::before {
               left: -12px !important;
          }

          &:nth-child(2n + 0) .postcard__text::before {
               right: -12px !important;
          }
     }
}
@media screen and (min-width: 1024px) {
     .postcard__text {
          padding: 2rem 3.5rem;
     }

     .postcard__text:before {
          content: "";
          position: absolute;
          display: block;

          top: -20%;
          height: 130%;
          width: 55px;
     }

     .postcard.dark {
          .postcard__text:before {
               background: #ffffff;
          }
     }
     .postcard.light {
          .postcard__text:before {
               background: #ffffff;
          }
     }
}

/* COLORS */
.postcard .postcard__tagbox .green.play:hover {
     background: main-green;
     color: black;
}
.green .postcard__title:hover {
     color: green;
}
.green .postcard__bar {
     background-color: green;
}
/* .green::before {
	background-image: linear-gradient(
		-30deg,
		green-rgb-015,
		transparent 50%
	);
}
.green:nth-child(2n)::before {
	background-image: linear-gradient(30deg, green-rgb-015, transparent 50%);
} */

.postcard .postcard__tagbox .blue.play:hover {
     background: blue;
}
.blue .postcard__title:hover {
     color: blue;
}
.blue .postcard__bar {
     background-color: rgb(0, 0, 0);
}
/* .blue::before {
	background-image: linear-gradient(-30deg, blue-rgb-015, transparent 50%);
}
.blue:nth-child(2n)::before {
	background-image: linear-gradient(30deg, blue-rgb-015, transparent 50%);
} */

.postcard .postcard__tagbox .red.play:hover {
     background: red;
}
.red .postcard__title:hover {
     color: red;
}
.red .postcard__bar {
     background-color: red;
}
.red::before {
     background-image: linear-gradient(-30deg, red-rgb-015, transparent 50%);
}
.red:nth-child(2n)::before {
     background-image: linear-gradient(30deg, red-rgb-015, transparent 50%);
}

.postcard .postcard__tagbox .yellow.play:hover {
     background: yellow;
     color: black;
}
.yellow .postcard__title:hover {
     color: yellow;
}
.yellow .postcard__bar {
     background-color: yellow;
}
.yellow::before {
     background-image: linear-gradient(-30deg, yellow-rgb-015, transparent 50%);
}
.yellow:nth-child(2n)::before {
     background-image: linear-gradient(30deg, yellow-rgb-015, transparent 50%);
}

@media screen and (min-width: 769px) {
     .green::before {
          background-image: linear-gradient(
               -80deg,
               green-rgb-015,
               transparent 50%
          );
     }
     .green:nth-child(2n)::before {
          background-image: linear-gradient(
               80deg,
               green-rgb-015,
               transparent 50%
          );
     }

     .blue::before {
          background-image: linear-gradient(
               -80deg,
               blue-rgb-015,
               transparent 50%
          );
     }
     .blue:nth-child(2n)::before {
          background-image: linear-gradient(
               80deg,
               blue-rgb-015,
               transparent 50%
          );
     }

     .red::before {
          background-image: linear-gradient(
               -80deg,
               red-rgb-015,
               transparent 50%
          );
     }
     .red:nth-child(2n)::before {
          background-image: linear-gradient(
               80deg,
               red-rgb-015,
               transparent 50%
          );
     }

     .yellow::before {
          background-image: linear-gradient(
               -80deg,
               yellow-rgb-015,
               transparent 50%
          );
     }
     .yellow:nth-child(2n)::before {
          background-image: linear-gradient(
               80deg,
               yellow-rgb-015,
               transparent 50%
          );
     }
}

.card-overlay {
     position: relative;
     overflow: hidden;
     border-radius: 12px;
     box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15); /* Smooth elevation */
     transition: transform 0.3s ease-in-out;
     margin-bottom: 30px;
}

.card-overlay:hover {
     transform: translateY(-5px); /* Slight lift on hover */
}

.card-overlay img {
     width: 100%;
     height: 300px;
     object-fit: cover;
}

.overlay-text {
     position: absolute;
     bottom: 0;
     left: 0;
     width: 100%;
     padding: 20px;
     background: linear-gradient(
          to top,
          rgb(0, 0, 0),
          rgba(0, 0, 0, 0.921),
          rgba(0, 0, 0, 0.846),
          rgba(0, 0, 0, 0.812),
          rgba(0, 0, 0, 0.76),
          rgba(0, 0, 0, 0.6),
          rgba(0, 0, 0, 0.427),
          rgba(0, 0, 0, 0.394),
          rgba(0, 0, 0, 0.325),
          rgba(0, 0, 0, 0.181),
          rgba(0, 0, 0, 0)
     ); /* Smooth fade */
     color: #fff;
}

.overlay-text h5 {
     font-size: 18px;
     font-weight: 700; /* Bolder text */
     margin-bottom: 5px;
     color: white !important;
}

.overlay-text p {
     width: fit-content;
     top: 15px;
     left: 15px;
     background-color: rgba(255, 255, 255, 0.892);
     color: #000000;
     font-size: 12px;
     font-weight: 600;
     padding: 5px 12px;
     margin-top: 10px;
     margin-bottom: -5px;
     border-radius: 10px;
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.author-badge {
     width: fit-content;
     top: 15px;
     left: 15px;
     background-color: rgba(0, 0, 0, 0.792);
     color: #ffffff;
     font-size: 12px;
     font-weight: 600;
     padding: 5px 12px;
     border-radius: 10px;
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Blog Label Style */
.label-tag {
     top: 15px;
     left: 15px;
     background-color: rgba(0, 0, 0, 0.792);
     color: #ffffff;
     padding: 8px 12px;
     border-radius: 10px;
     font-size: 14px;
     font-weight: 500;
     margin-right: 5px;
     margin-bottom: 5px;
     text-decoration: none;
     transition: all 0.3s ease;
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Hover Effect */
.label-tag:hover {
     background-color: #6366f1;
     color: #ffffff;
     cursor: pointer;
     transform: translateY(-2px);
}

/* Responsive Design */
@media (max-width: 768px) {
     .label-tag {
          padding: 6px 10px;
          font-size: 13px;
     }
}

@media (max-width: 576px) {
     .label-tag {
          padding: 5px 8px;
          font-size: 14px;
     }
}