.end-wrapper {
  opacity: 0; 
  transition: opacity 0.3s ease; 
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  padding: 20px;
  position: relative;
  }
  
.title-end-container {
    position: relative;
    justify-content: center;
    align-items: center;
    display: flex;
}

.title-end {
    color: #ff605c;
}

.end-container {
  display: flex;
  flex-wrap: wrap;
  gap: 20px; 
  max-width: 1200px; 
  width: 100%;
}

.article-containers {
    align-items: center;
    justify-content: center;
    position: relative;
    background-color: #0a0e14;
    padding: 20px;
    border-radius: 8px;
    flex: 1 1 calc(33.333% - 20px); 
    box-sizing: border-box;
    margin-bottom: 20px;
}

.card-image-end img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}


.card-end {
    padding: 20px;
    margin: 10px;
    width: 100%;
    max-width: 330px;
    min-height: 370px;
    border-radius: 20px;
    background: #212121;
    border: 2px solid #00d0ff;
    box-shadow: 0px 0px 15px rgba(77, 163, 255, 0.5); 
    transition: 0.4s;
    box-sizing: border-box;
  }

.card-end:hover {
  translate: 0 -10px;
}

.card-title-end {
  font-size: 18px;
  font-weight: 600;
  color: #b2eccf;
  margin: 15px 0 0 10px;
}

.card-image-end {
  min-height: 170px;
  background-color: #313131;
  border-radius: 15px;
  background: #313131;
  box-shadow: inset 5px 5px 3px #2f2f2f,
            inset -5px -5px 3px #333333;
}

.card-body-end {
  margin: 13px 0 0 10px;
  color: rgb(184, 184, 184);
  font-size: 15px;
}

.footer-end {
  float: right;
  margin: 28px 0 0 18px;
  font-size: 13px;
  color: #b3b3b3;
}

.by-name {
  font-weight: 700;
}

  
@media (max-width: 768px) {

  .end-container {
    margin-top: 250vw;
  }

  .article-containers {
    flex: 1 1 calc(50% - 20px);
  }
}