
/*  Artical  */

.caption-wrapper {

  padding: 15px;  
  margin: 5px;
  background-color: var(--caption-wrapper-background);
  border: solid 5px var(--caption-wrapper-border);
  font-size: 20px;
  color:brown;
  border-radius: 6px;
}


.caption-tital {

  background-color: var(--caption-tital-background);
  border: solid 2px var(--caption-tital-border);
  margin-bottom: 10px;
  padding: 5px;
  border-radius: 6px;
}


.caption-content-left {

  display: grid;
  grid-template-columns: 4fr 5fr;
  gap: 8px;
  

  background-color: var(--caption-contemt-left-background);
  border: solid 2px var(--caption-content-left-border);

text-align: center;
border-radius: 6px;

}


.caption-content-right {

  display: grid;
  grid-template-columns: 5fr 4fr;
  gap: 8px;
  
  background-color: var(--caption-contemt-right-background);
  border: solid 2px var(--caption-content-right-border);


text-align: center;
border-radius: 6px;

}











.caption-comment-text {

 text-align: center;
  font-size:25px;
  color: rgb(78, 104, 104);

}

.caption-text {


color: #322a41;



}

.artical-comment-left {

  margin-top: 25px;
  color: #000;
  font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
  background-color: var(--artical-comment-left-background);
  border: solid 2px var(--artical-comment-left-border);
padding: 5px;

}

.artical-comment-right {

  margin-top: 25px;
  color: #000;
  font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
  background-color: var(--artical-comment-right-background);
  border: solid 2px var(--artical-comment-right-border);
padding: 5px;

}


.intersection-wrapper-artical {

background-color: var(--artical-intersection-backgound);
border: solid 5px var(--artical-intersection-border);
padding: 5px; 

}




.caption-text {

  padding: 5px;  
  margin: 5px;
  background-color: var(--caption-text-background);
  border: solid 5px var(--caption-text-border);
text-align:left;
border-radius: 3px;
}

.caption-img {

padding: 15px; 



border: solid 2px var(--caption-image-border);
border-radius: 6px;


}


@media (width < 600px) {                      /*  */

.caption-content-left {

  
  display: grid;
  grid-template-columns: 1fr;

}}


@media (width < 600px) {                      /*  */

.caption-content-right {

  
  display: grid;
  grid-template-columns: 1fr;

}}









@media (width < 600px) {                      /*  */

.caption-comment-text {

  font-size: 20px;

}}

@media (width < 900px) {                      /*  */

.caption-text {

  font-size: 15px;

}}

@media (width < 700px) {                      /*  */

.caption-text {

  font-size: 12px;

}}



@media (width < 600px) {
.caption-image-left {


  display: none;
}}

@media (width > 600px) {
.caption-image1 {


  display: none;
}}

