/* START wstawka 01.03.2025 */
 /* START przyciski wideolinku */
.button-container {
margin: 10px auto 0 auto;
  display: flex;
  justify-content: center;
  max-width: 90%;
  padding: 10px 20px;
 /* border: 1px solid;  */
}
.btn-group {
  display: flex;
  justify-content: space-between;
  width: 90%; /*  dostosować */
 /*   border: 1px solid;   */
}

.btn-group .edit {
  width: 40%;
}


@media(max-width:680px){

.button-container {
        max-width: 100%;
}
    .btn-group {
      width: 100%; /*  dostosować */
        align-items: center;
          gap: 20px 0; 
    }

    .btn-group .edit {
      width: 45%;
    }
}

@media(max-width:480px){
.button-container {
        max-width: 100%;
}
    .btn-group {
      width: 90%; /*  dostosować */
        flex-direction: column;
        align-items: center;
          gap: 20px 0; 
    }

    .btn-group .edit {
      width: 90%;
    }
}
/* END przyciski wideolinku */



.save_button {
    background-color: #059669; color: #fff; border-radius: 5px; cursor:pointer;
    width: 60%;
   margin: .6rem 0;
   padding: 10px 20px;

  font-size: 1.2rem;

{

 /*  */

/* END wstawka 01.03.2025 */




/* Stylowanie przycisków */
.image-button {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    margin: 0px;
}

.image-button img {
    width: 150px; /* Dostosuj rozmiar obrazka */
  /*  height: 100px;  */
    object-fit: cover;
}





.bg {
width: 33%;
  padding: 0px 10px 25px 10px ;
    background: #046999;
    font-size: 1.2rem;
    color: #fff;
}



.bgbefore, .edArtbgbefore {
list-style: none; /* Ukrywa domyślne punktory */
}

.adArtbgbefore::before {
content:'';
background: url('../graphics/przycisk5plus.png'); /*url of image*/
height: 50px; /*height of image*/
width: 50px;  /*width of image*/
/* margin-right: 1px;   */
 background-repeat: no-repeat;
 display: inline-block;     
position: relative;  
top: 18px; 
} 










.bgbefore::before {
content:'';
background: url('../graphics/adVideo5b.png'); /*url of image*/
height: 50px; /*height of image*/
width: 50px;  /*width of image*/
/* margin-right: 1px;   */
 background-repeat: no-repeat;
/* position: absolute;
 position: relative;       */
 display: inline-block;    
 
 
position: relative;  
top: 18px; /* */ 
}

.edArtbgbefore::before {
content:'';
background: url('../graphics/edit2b.png'); /*url of image*/
height: 50px; /*height of image*/
width: 50px;  /*width of image*/
/* margin-right: 1px;   */
 background-repeat: no-repeat;
 display: inline-block;     
position: relative;  
top: 18px; 
} 



@media (max-width: 900px) {
  .bg {
width: 30%;
}  
}

@media (max-width: 800px) {
  .bg {
width: 33%;
}  
}













/* Stylowanie dla ekranów mniejszych ni| 500px */
@media (max-width: 500px) {
    .button-container {
        flex-direction: column;
    }

    .image-button {
        margin: 10px auto;
    }
}

/*
Wyja[nienie:

    HTML:
        Stworzono trzy przyciski, które zawieraj obrazy (<img>).
        Ka|dy przycisk ma klas image-button, a caBo[ znajduje si w kontenerze button-container.

    CSS:
        Kontener: U|yto flexbox do rozmieszczenia przycisków równomiernie w jednej linii za pomoc justify-content: space-evenly.
        Przyciski: Stylizowane jako obrazki bez marginesów i z zaokrgleniem.
        Responsywno[: Dziki zapytaniu medialnemu (@media) poni|ej szeroko[ci 500px przyciski ukBadaj si w kolumnie (flex-direction: column).

Wystarczy podmieni image1.jpg, image2.jpg i image3.jpg na [cie|ki do Twoich obrazków.
*/