hero.scss 1.1 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667
  1. .__img-hero{
  2. height: 400px;
  3. width: 100vw;
  4. position: relative;
  5. left: 50%;
  6. right: 50%;
  7. margin-left: -50vw;
  8. margin-right: -50vw;
  9. img{
  10. width:100%;
  11. height: 100%;
  12. object-fit: cover;
  13. }
  14. }
  15. .participant_full{
  16. .hero{
  17. figure{
  18. width:100%;
  19. .__img{
  20. &> div{
  21. margin: auto;
  22. width: 300px;
  23. height: 300px;
  24. }
  25. img{
  26. border-radius: 100%;
  27. width: 100%;
  28. height: 100%;
  29. object-fit: cover;
  30. }
  31. }
  32. figcaption {
  33. align-self: center;
  34. text-align: center;
  35. margin: 2rem 0;
  36. }
  37. }
  38. }
  39. }
  40. @media screen and (min-width: 768px) {
  41. .participant_full{
  42. .hero{
  43. figure{
  44. width:100%;
  45. .__img{
  46. margin-right: 2rem;
  47. &> div{
  48. width: 300px;
  49. height: 300px;
  50. }
  51. img{
  52. border-radius: 100%;
  53. width: 100%;
  54. height: 100%;
  55. object-fit: cover;
  56. }
  57. }
  58. figcaption {
  59. align-self: center;
  60. }
  61. }
  62. }
  63. }
  64. }