<style>

a {
    text-decoration: none!important;
    color: inherit!important;
}

/*form.aui .text {
    border-radius: 16px;
    border: 1px solid #564cad;
}*/

.searchBar form div {
    width: 300px;
    margin: auto;
}

p.confiforms-no-items {
    text-align: center;
    margin: 20px 0px;
}

.announcementcard{
    display: flex;
    padding: 10px;
    background-color: #fdfdfd;
    border-radius: 16px;
    width: 900px;
	height: 250px;
    margin: 20px;
    box-shadow: -2.9px 4px 2.4px 0.2px rgba(0, 0, 0, 0.08);
}
.announcementcard:hover{
    box-shadow: -2.9px 4px 10px 0 rgba(0, 0, 0, 0.18);
}

.card-title {
    color: #0B7FBA;
    font-size: 20px;
    font-weight: 600;
    padding: 15px 0px 0px 0px;
}
.card-date {
    font-size: 15px;
    font-weight: 600;
    padding: 15px 0px 0px 0px;
}
.card-description {
    font-size: 15px;
    font-weight: 200;
    color: #000000;
    padding: 20px 10px 0px 0px;
}
.card-specifics {
    font-size: 15px;
    font-weight: 600;
    color: #000000;
    padding: 20px 10px 0px 0px;
}
.announcementcard img {
    height: 90%;
    width: 100%;
    align-items: center;
    object-fit: cover;
    padding: 15px 0px 0px 0px;
}
div#card-footer {
    display: flex;
    align-self: flex-end;
}
div#text-container {
    display: flex;
    flex-direction: column;
}
div#text-encompasser {
    display: flex;
    flex-direction: column;
    padding: 0px 0px 0px 10px;
}
div#imgalign {
    width: 45%;
    display: flex;
    flex-direction: column;
}
div#carousel {
    width: 100%;
    display: flex;
    flex-direction: row;
}
#date-container {
    position: relative;
    top: -231px;
    width: 45%;
    left: 0px;
    padding: 10px;
    text-align: center;
    background-color: #eb9029;
}
#comments-section { 
   display: none; 
}

</style>




<a href="[entry.link]" data-target="card">
	<div class="announcementcard">
		<div class="imgalign">
			<img src="[entry.image.asAttachment.downloadPath]"></img>
			<div id="date-container"><font class="card-date">[entry.date.formatDate(MM-dd-yyyy)]</font></div>
		</div>
	<div id="text-encompasser">
		<div id="text-container">
   			<font class="card-title">[entry.title]</font>
		</div>
		<div id="text-container">
   			<font class="card-description">[entry.description]</font>
		</div>
		<div id="text-container">
   			<a href="[entry.link]"class="newlink"><font class="card-specifics">[entry.specifics]</font></a>
		</div>
	</div>
</a>




/*  <div class="button-wrapper">
    <button data-action="slideLeft">L</button>
    <button data-action="slideRight">R</button>
  </div>*/





<style>
#cf_messages {
  height: 200px;
  width: 632px;
  position: relative;
  overflow: hidden;
  margin: 0 auto;
}

.button-wrapper {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: absolute;
}

.carousel {
  margin: 0;
  padding: 0;
  list-style: none;
  width: 100%;
  display: flex;
  position: absolute;
  left: 0;
  transition: all 1s ease;
}

.card {
  background: black;
  min-width: 200px;
  height: 200px;
  margin-right: 1rem;
  display: inline-block;
}
</style>

<script>
// Select the carousel you'll need to manipulate and the buttons you'll add events to
const carousel = document.getElementsByClassName("cf_announcements_list")[0];
const card = document.querySelector("[data-target='card']");
const leftButton = document.querySelector("[data-action='slideLeft']");
const rightButton = document.querySelector("[data-action='slideRight']");

// Prepare to limit the direction in which the carousel can slide, 
// and to control how much the carousel advances by each time.
// In order to slide the carousel so that only three cards are perfectly visible each time,
// you need to know the carousel width, and the margin placed on a given card in the carousel
const carouselWidth = carousel.offsetWidth;
const cardStyle = card.currentStyle || window.getComputedStyle(card)
const cardMarginRight = Number(cardStyle.marginRight.match(/\d+/g)[0]);

// Count the number of total cards you have
const cardCount = carousel.querySelectorAll("[data-target='card']").length;

// Define an offset property to dynamically update by clicking the button controls
// as well as a maxX property so the carousel knows when to stop at the upper limit
let offset = 0;
const maxX = -((cardCount / 3) * carouselWidth + 
               (cardMarginRight * (cardCount / 3)) - 
               carouselWidth - cardMarginRight);


// Add the click events
leftButton.addEventListener("click", function() {
  if (offset !== 0) {
    offset += carouselWidth + cardMarginRight;
    carousel.style.transform = `translateX(${offset}px)`;
    }
})
  
rightButton.addEventListener("click", function() {
  if (offset !== maxX) {
    offset -= carouselWidth + cardMarginRight;
    carousel.style.transform = `translateX(${offset}px)`;
  }
})
</script>