@media (pointer:coarse) {
   .media-container .more-container .more-button {
      visibility: visible;
      opacity: 100%;
   }
 }
 .media-container {
   cursor: pointer;
   text-decoration: none;
   display: flex;
   flex-direction: column;
   gap: .75rem;
}

.media-container .img-container {
   overflow: hidden;
   border-radius: .5rem;
   position: relative;
}
.media-container.author .img-container {
   border-radius: 100%;
   left: 50%;
   transform: translateX(-50%);
}
.media-container:hover .thumb-overlay {
   transition: var(--five);
   visibility: visible;
   opacity: 100%;

}
.media-container.author .thumb-overlay {
   justify-content: center;
   padding-bottom: 1.5rem;
}
.media-container .thumb-overlay {
   transition: var(--five);
   visibility: hidden;
   opacity: 0%;
   position: absolute;
   bottom: 0;
   top: 0;
   left: 0;
   right: 0;
   background: rgb(0,0,0);
   background: linear-gradient(0deg, rgba(0,0,0,0.33) 0%, rgba(0,0,0,0.0018382352941176405) 100%);
   display: flex;
   justify-content: flex-end;
   align-items: end;
   padding: 1rem;
   gap: .5rem;
}
.media-container .thumb-overlay button {
   border-radius: 100%;
   border: 1px solid transparent;
   width: 2.5rem;
   height: 2.5rem;
   color: var(--base-content);
   transform: var(--five);
}
.media-container .thumb-overlay button.active {
   font-weight: 900;
   color: var(--primary);
   background-color: var(--base-03);
}
.media-container.author .thumb-img {
   transition: var(--five);
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   object-fit: cover
}
.media-container .thumb-img {
   transform: scale(1);
   transition: var(--five);
}
.media-container:hover .thumb-img {
   transform: scale(1.15);
}
.media-container .details-more-container {
   display: flex;
   gap: .125rem;
}
.media-container .media-details-container h3 {
   color: var(--base-content);
   font-size: var(--text-base);
   font-weight: 600;
   overflow: hidden;
   display: -webkit-box;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 2;
   margin-bottom: .125rem;
}
.media-container .media-details-container .media-info {
   display: flex;
   list-style-type: none;
   font-size: var(--text-sm);
   color: var(--base-mute);
}
.media-container .media-details-container .media-info li:not(:last-of-type)::after {
   content: "•";
   padding: 0 .5rem
}
.media-container .more-container .more-button {
   visibility: hidden;
   opacity: 0;
   background-color: transparent;
   color: var(--base-mute);
   border-radius: 100%;
   border: 1px solid transparent;
   padding: 0;
   height: 2rem;
    min-width: 2rem;
}
.media-container .more-container .more-button:hover {
   background-color: var(--base-01);
   color: var(--base-content);
   border: 1px solid var(--border-color);
}
.media-container:hover .more-container .more-button {
   visibility: visible;
   opacity: 1;
}
.media-container .media-actions-container {
   margin-top: .5rem;
}
.media-container .media-actions-container > .interested-button,
.media-container .media-actions-container > .going-button {
   background-color: var(--border-color);
   color: var(--base-content);
   padding: 0 1rem;
   font-size: var(--text-sm);
   height: 2rem;
   border-radius: 2rem;
   filter: brightness(none);
   border: 1px solid transparent;
}
.media-container .media-actions-container > .interested-button:hover,
.media-container .media-actions-container > .going-button:hover {
   filter: brightness(90%);
}
.media-container .media-actions-container > .interested-button.active,
.media-container .media-actions-container > .going-button.active {
   background-color: var(--base-01);
   border: 1px solid var(--border-color);
}
.media-container .media-actions-container > .interested-button.active:hover,
.media-container .media-actions-container > .going-button.active:hover {
   background-color: var(--base-03);
   filter: brightness(100%);
}
.media-container .action-button > i {
   padding-right: 0.25rem;
}
@media only screen and (min-width: 360px) {
   /* CSS rules */
}
 
@media only screen and (min-width: 500px) {
   /* CSS rules */
}
 
@media only screen and (min-width: 640px) {
   /* CSS rules */
}
 
@media only screen and (min-width: 768px) {
   /* CSS rules */
}
 
@media only screen and (min-width: 1024px) {
   /* CSS rules */
}
 
@media only screen and (min-width: 1280px) {
   /* CSS rules */
}
 
@media only screen and (min-width: 1536px) {
   /* CSS rules */
}